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,7 +128,7 @@ 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');
@@ -137,6 +137,25 @@ class Theme {
                 if ($parentLink) $parentLink.style.fontWeight = 'bold';
             }
         });
+
+        this.util.forEach(document.querySelectorAll('#header-desktop .has-children > a.dropdown-toggle'), $toggle => {
+            $toggle.addEventListener('click', function(e) {
+                e.preventDefault();
+                document.querySelectorAll('#header-desktop .has-children.active').forEach($open => {
+                    if ($open !== $toggle.parentElement) $open.classList.remove('active');
+                });
+                $toggle.parentElement.classList.toggle('active');
+            });
+        });
+
+        document.addEventListener('click', function(e) {
+            const $dropdowns = document.querySelectorAll('#header-desktop .has-children');
+            $dropdowns.forEach($dropdown => {
+                if (!$dropdown.contains(e.target)) {
+                    $dropdown.classList.remove('active');
+                }
+            });
+        });
     }
 
     initSwitchTheme() {
@@ -799,9 +818,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 '671,675d;693,742d;745,748d;834d' 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",