feat(header): Use click instead of hover for desktop dropdown-menu

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

Author: khusika

assets/css/_partial/_header.scss

@@ -242,22 +242,17 @@ header {
           }
         }
 
-        &:hover .dropdown-menu,
-        &:focus-within .dropdown-menu {
+        &.active .dropdown-menu {
           display: block;
         }
-        &:hover .dropdown-toggle i {
+        &.active .dropdown-toggle i {
           @include transform(rotate(180deg));
         }
-        &:hover {
+        &.active {
           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;

assets/js/theme.js

@@ -128,13 +128,25 @@ class Theme {
         });
     }
 
-    initDesktopMenu() {
+    initMenuDesktop() {
         if (this.util.isMobile()) return;
-        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';
+
+        this.util.forEach(document.querySelectorAll('#header-desktop .dropdown-item.active'), $activeChild => {
+            $activeChild.closest('.has-children')?.querySelector('a.dropdown-toggle')?.classList.add('active');
+        });
+
+        document.addEventListener('click', e => {
+            const $toggle = e.target.closest('a.dropdown-toggle');
+            if ($toggle && $toggle.parentElement.matches('#header-desktop .has-children')) {
+                e.preventDefault();
+                const $menuItem = $toggle.parentElement;
+                const isActive = $menuItem.classList.contains('active');
+                this.util.forEach(document.querySelectorAll('#header-desktop .has-children.active'), el => el.classList.remove('active'));
+                if (!isActive) {
+                    $menuItem.classList.add('active');
+                }
+            } else if (!e.target.closest('#header-desktop .has-children')) {
+                this.util.forEach(document.querySelectorAll('#header-desktop .has-children.active'), el => el.classList.remove('active'));
             }
         });
     }
@@ -799,9 +811,9 @@ class Theme {
             this.initSVGIcon();
             this.initTwemoji();
             this.initMenuMobile();
+            this.initMenuDesktop();
             this.initSwitchTheme();
             this.initSearch();
-            this.initDesktopMenu();
             this.initDetails();
             this.initLightGallery();
             this.initHighlight();

package.json

@@ -19,7 +19,7 @@
   "scripts": {
     "build": "rm -f -r exampleSite/public && hugo --source=exampleSite --gc",
     "build-lunr-segmentit": "browserify src/lib/lunr.segmentit.js -o assets/lib/lunr/lunr.segmentit.js -t babelify --presets @babel/preset-env --presets minify",
-    "purgejs": "npx mkdirp exampleSite/assets/js && sed '652,656d;674,723d;726,729d;815d' assets/js/theme.js > exampleSite/assets/js/theme.js",
+    "purgejs": "npx mkdirp exampleSite/assets/js && sed '664,668d;686,735d;738,741d;827d' assets/js/theme.js > exampleSite/assets/js/theme.js",
     "deploy": "npm run purgejs && hugo --source=exampleSite --gc --minify && rm -rf exampleSite/assets/js",
     "start": "hugo server --source=exampleSite -D --disableFastRender",
     "start-production": "hugo server --source=exampleSite -D --disableFastRender -e production",