feat(header): Add support for dropdown-menu

Resolves #71

Signed-off-by: Khusika Dhamar Gusti <[email protected]>

Author: khusika

assets/css/_partial/_header.scss

@@ -163,15 +163,17 @@ header {
     }
 
     .menu {
-      overflow: hidden;
+      overflow: visible;
       white-space: nowrap;
 
       .menu-inner {
         float: right;
+        overflow: visible;
       }
 
       .menu-item {
-        margin: 0 .5rem;
+        display: inline-block;
+        padding: 0 .5rem;
 
         &.delimiter {
           border-left: 1.5px solid $global-font-color;
@@ -182,7 +184,7 @@ header {
         }
 
         &.language {
-          margin-right: 0;
+          padding-right: 0;
           &:hover {
             color: $global-link-hover-color;
             [theme=dark] & {
@@ -192,7 +194,7 @@ header {
         }
 
         &.search {
-          margin: 0 -.5rem 0 0;
+          padding: 0;
         }
       }
 
@@ -204,11 +206,80 @@ header {
           color: $header-hover-color-dark;
         }
       }
+
+      .menu-item.has-children {
+        padding: 0;
+      }
+
+      .menu-item.has-children {
+        > a {
+          cursor: pointer;
+        }
+
+        .dropdown-toggle {
+          i {
+            display: inline-block;
+            font-size: 0.9em;
+            vertical-align: middle;
+            margin-left: .25rem;
+            @include transition(transform 0.35s ease);
+          }
+        }
+
+        .dropdown-menu {
+          display: none;
+          position: absolute;
+          overflow: hidden;
+          top: 100%;
+          left: 0;
+          background: $header-background-color;
+          z-index: 9999;
+          @include border-radius(.25rem);
+          @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, .1));
+
+          [theme="dark"] & {
+            background: $header-background-color-dark;
+          }
+        }
+
+        &:hover .dropdown-menu,
+        &:focus-within .dropdown-menu {
+          display: block;
+        }
+        &:hover .dropdown-toggle i {
+          @include transform(rotate(180deg));
+        }
+        &:hover {
+          color: $header-hover-color;
+          [theme=dark] & { color: $header-hover-color-dark; }
+        }
+
+        &.active .dropdown-toggle i {
+          @include transform(rotate(180deg));
+        }
+
+        .dropdown-item {
+          display: block;
+          padding: 0 .5rem !important;
+          color: $global-font-color;
+          white-space: nowrap;
+          @include transition(width 0.2s ease);
+          @include border-radius(.25rem);
+          [theme="dark"] & {
+            color: $global-font-color-dark;
+          }
+
+          &:hover {
+            background: darken($header-background-color, 5%);
+            color: $global-link-hover-color;
+          }
+        }
+      }
     }
   }
 
   &.open .header-wrapper .menu .menu-item.search {
-    margin: 0 .25rem 0 .5rem;
+    padding: 0 .25rem 0 .5rem;
 
     input {
       width: 24rem;
@@ -319,6 +390,7 @@ header {
       .menu-item {
         display: block;
         line-height: 2.5rem;
+        padding: 0 .5rem;
         &.language {
           &:hover {
             color: $global-link-hover-color;
@@ -329,6 +401,42 @@ header {
         }
       }
 
+      .menu-item.has-children {
+        .dropdown-toggle i {
+          @include transition(transform 0.35s ease);
+        }
+
+        &.active .dropdown-toggle i {
+          @include transform(rotate(180deg));
+        }
+
+        .dropdown-menu {
+          display: none;
+          position: static;
+          background: $header-background-color;
+          box-shadow: none;
+          min-width: 0;
+          overflow: hidden;
+          padding: 0;
+
+          [theme=dark] & {
+            background: $header-background-color-dark;
+          }
+        }
+
+        .dropdown-item {
+          display: block;
+          padding: 0 .5rem !important;
+          color: $global-font-color;
+          white-space: nowrap;
+          @include transition(width 0.2s ease);
+          @include border-radius(.25rem);
+          [theme="dark"] & {
+            color: $global-font-color-dark;
+          }
+        }
+      }
+
       &.active {
         display: block;
       }

assets/js/theme.js

@@ -68,16 +68,72 @@ class Theme {
     initMenuMobile() {
         const $menuToggleMobile = document.getElementById('menu-toggle-mobile');
         const $menuMobile = document.getElementById('menu-mobile');
+        const closeAllSubmenus = () => {
+            this.util.forEach(document.querySelectorAll('#menu-mobile .has-children'), $menuItem => {
+                $menuItem.classList.remove('active');
+                const $submenu = $menuItem.querySelector('.dropdown-menu');
+                if ($submenu) {
+                    $submenu.style.display = 'none';
+                    $submenu.style.height = '';
+                }
+            });
+        };
         $menuToggleMobile.addEventListener('click', () => {
             document.body.classList.toggle('blur');
             $menuToggleMobile.classList.toggle('active');
             $menuMobile.classList.toggle('active');
+            if (!$menuMobile.classList.contains('active')) {
+                closeAllSubmenus();
+            }
         }, false);
         this._menuMobileOnClickMask = this._menuMobileOnClickMask || (() => {
             $menuToggleMobile.classList.remove('active');
             $menuMobile.classList.remove('active');
+            closeAllSubmenus();
         });
         this.clickMaskEventSet.add(this._menuMobileOnClickMask);
+
+        this.util.forEach(document.querySelectorAll('#menu-mobile .has-children'), $menuItem => {
+            const $submenu = $menuItem.querySelector('.dropdown-menu');
+            if ($submenu) {
+                $submenu.style.transition = 'height 0.35s ease';
+                $submenu.style.overflow = 'hidden';
+                $submenu.style.display = 'none';
+            }
+        });
+
+        $menuMobile.addEventListener('click', (event) => {
+            const $clickedItem = event.target.closest('a.dropdown-toggle');
+            if (!$clickedItem) return;
+
+            event.preventDefault();
+            const $menuItem = $clickedItem.parentElement;
+            const $submenu = $menuItem.querySelector('.dropdown-menu');
+
+            if (!$submenu) return;
+
+            $menuItem.classList.toggle('active');
+            if ($submenu.style.display === 'block') {
+                $submenu.style.height = `${$submenu.scrollHeight}px`;
+                window.setTimeout(() => { $submenu.style.height = '0'; }, 0);
+                $submenu.addEventListener('transitionend', () => { $submenu.style.display = 'none'; }, { once: true });
+            } else {
+                $submenu.style.display = 'block';
+                $submenu.style.height = '0';
+                window.setTimeout(() => { $submenu.style.height = `${$submenu.scrollHeight}px`; }, 0);
+                $submenu.addEventListener('transitionend', () => { $submenu.style.height = ''; }, { once: true });
+            }
+        });
+
+        if (!this.util.isMobile()) {
+            this.util.forEach(document.querySelectorAll('#header-desktop .has-children .dropdown-item.active'), $activeChild => {
+                const $parentMenuItem = $activeChild.closest('.has-children');
+                if ($parentMenuItem) {
+                    const $parentLink = $parentMenuItem.querySelector('a.dropdown-toggle');
+                    if ($parentLink) $parentLink.style.fontWeight = 'bold';
+                }
+            });
+        }
     }
 
     initSwitchTheme() {