Added Dropdown MegaMenu version

altxriainc · Nov 14, 2024 · c762c48 · c762c48
1 parent ff501ad
commit c762c48
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 9 deletions.
diff --git a/css/components/dropdown.css b/css/components/dropdown.css
@@ -83,14 +83,59 @@
     color: var(--dropdown-hover-color, var(--primary));
 }
 
+/* Mega Menu Styles */
+.dropdown[data-type="mega-menu"] .dropdown-menu {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    padding: var(--space-4);
+    gap: var(--space-4);
+    max-width: clamp(20rem, 80vw, 40rem);
+}
+
+/* Mega Menu Column Groups */
+.mega-menu-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.mega-menu-title {
+    font-weight: bold;
+    font-size: clamp(1rem, 1.5vw, 1.125rem);
+    color: var(--neutral-700);
+    padding: var(--space-1) 0;
+    border-bottom: 1px solid var(--neutral-300);
+}
+
+.mega-menu-item {
+    display: flex;
+    align-items: center;
+    padding: var(--space-2) 0;
+    padding-left: 0.5rem;
+    color: var(--neutral-800);
+    transition: background-color var(--transition-colors);
+}
+
+.mega-menu-item:hover {
+    background-color: var(--dropdown-hover-bg, var(--neutral-200));
+    cursor: pointer;
+}
+
+/* Icon Styling in Mega Menu */
+.mega-menu-item-icon {
+    margin-right: var(--space-2);
+    font-size: 1.25rem;
+    color: var(--neutral-500);
+}
+
 /* Data-Attribute Based Customization */
 
 /* Primary Variant */
 .dropdown[data-variant="primary"] .dropdown-trigger {
     background-color: var(--primary-bg);
     color: var(--primary-text);
 }
-.dropdown[data-variant="primary"] .dropdown-item:hover {
+.dropdown[data-variant="primary"] .dropdown-item:hover, .mega-menu-item:hover {
     background-color: var(--primary-light);
     color: var(--primary);
 }
@@ -100,7 +145,7 @@
     background-color: var(--secondary-bg);
     color: var(--secondary-text);
 }
-.dropdown[data-variant="secondary"] .dropdown-item:hover {
+.dropdown[data-variant="secondary"] .dropdown-item:hover, .mega-menu-item:hover {
     background-color: var(--secondary-light);
     color: var(--secondary);
 }
@@ -110,7 +155,7 @@
     background-color: var(--warning-bg);
     color: var(--warning-text);
 }
-.dropdown[data-variant="warning"] .dropdown-item:hover {
+.dropdown[data-variant="warning"] .dropdown-item:hover, .mega-menu-item:hover {
     background-color: var(--warning-light);
     color: var(--warning);
 }
@@ -120,7 +165,7 @@
     background-color: var(--info-bg);
     color: var(--info-text);
 }
-.dropdown[data-variant="info"] .dropdown-item:hover {
+.dropdown[data-variant="info"] .dropdown-item:hover, .mega-menu-item:hover {
     background-color: var(--info-light);
     color: var(--info);
 }
@@ -130,7 +175,7 @@
     background-color: var(--danger-bg);
     color: var(--danger-text);
 }
-.dropdown[data-variant="danger"] .dropdown-item:hover {
+.dropdown[data-variant="danger"] .dropdown-item:hover, .mega-menu-item:hover {
     background-color: var(--danger-light);
     color: var(--danger);
 }
@@ -140,7 +185,7 @@
     background-color: var(--success-bg);
     color: var(--success-text);
 }
-.dropdown[data-variant="success"] .dropdown-item:hover {
+.dropdown[data-variant="success"] .dropdown-item:hover, .mega-menu-item:hover {
     background-color: var(--success-light);
     color: var(--success);
 }
@@ -150,7 +195,7 @@
     background-color: var(--accent-bg);
     color: var(--accent-text);
 }
-.dropdown[data-variant="accent"] .dropdown-item:hover {
+.dropdown[data-variant="accent"] .dropdown-item:hover, .mega-menu-item:hover {
     background-color: var(--accent-light);
     color: var(--accent);
 }
@@ -179,4 +224,9 @@
     .dropdown-trigger {
         padding: clamp(0.5rem, 1vw, 0.75rem);
     }
+
+    /* Mega Menu Mobile Adjustments */
+    .dropdown[data-type="mega-menu"] .dropdown-menu {
+        grid-template-columns: 1fr;
+    }
 }
diff --git a/demo.html b/demo.html
@@ -9,7 +9,7 @@
   <style>
   </style>
 </head>
-<body class="">
+<body class="dark-mode">
 
   <!--main header nav menu-->
   <nav id="nav-main" class="p-3">
@@ -499,6 +499,48 @@ <h2 class="font-lg text-primary my-4">Dropdown Component Showcase</h2>
             <div class="dropdown-item" tabindex="0" role="menuitem">Special 3</div>
         </div>
     </div>
+
+    <!-- Mega Menu Dropdown -->
+    <div class="dropdown" data-variant="info" data-type="mega-menu">
+        <button class="dropdown-trigger" aria-haspopup="true" aria-expanded="false">
+            Mega Menu Dropdown
+        </button>
+        <div class="dropdown-menu" role="menu">
+            <div class="mega-menu-group">
+                <h3 class="mega-menu-title">Category 1</h3>
+                <div class="mega-menu-item" tabindex="0" role="menuitem">
+                    <span class="mega-menu-item-icon">📁</span>
+                    Item 1
+                </div>
+                <div class="mega-menu-item" tabindex="0" role="menuitem">
+                    <span class="mega-menu-item-icon">📁</span>
+                    Item 2
+                </div>
+            </div>
+            <div class="mega-menu-group">
+                <h3 class="mega-menu-title">Category 2</h3>
+                <div class="mega-menu-item" tabindex="0" role="menuitem">
+                    <span class="mega-menu-item-icon">📊</span>
+                    Item A
+                </div>
+                <div class="mega-menu-item" tabindex="0" role="menuitem">
+                    <span class="mega-menu-item-icon">📊</span>
+                    Item B
+                </div>
+            </div>
+            <div class="mega-menu-group">
+                <h3 class="mega-menu-title">Category 3</h3>
+                <div class="mega-menu-item" tabindex="0" role="menuitem">
+                    <span class="mega-menu-item-icon">🔗</span>
+                    Link 1
+                </div>
+                <div class="mega-menu-item" tabindex="0" role="menuitem">
+                    <span class="mega-menu-item-icon">🔗</span>
+                    Link 2
+                </div>
+            </div>
+        </div>
+    </div>
   </section>
 
   <section class="p-4 bg-neutral-50 shadow-md rounded my-6">
@@ -1301,7 +1343,6 @@ <h2 class="font-lg text-info my-4">Calendar with Events (November 2024)</h2>
       </div>
   </div>
 </section>
-
 
 </body>
 <script type="module" src="js/main.js"></script>