Menu actions

Author: slowcheetah

web/scripts/build.mjs

@@ -89,7 +89,7 @@ async function buildVersionsMenuList(versions, currentVersion) {
 async function buildVersionMenu(versions, currentVersion) {
   const innerMenu = await buildVersionsMenuList(versions, currentVersion);
 
-  return `<div class="dropdown versions-menu"><a href="#" class="current">${currentVersion}</a>${innerMenu}</div>`;
+  return `<div class="dropdown versions-menu"><div class="dropdown-wrapper"><a href="#" class="current">${currentVersion}</a>${innerMenu}</div><div class="backdrop"></div></div>`;
 }
 
 async function build() {

web/src/js/main.js

@@ -12,18 +12,15 @@ hljs.registerLanguage('sh', bash);
 
 document.addEventListener('DOMContentLoaded', function(_event) {
   const menuSwitcher = document.getElementById('menu-switcher');
-  const menuBackdrop = document.querySelectorAll(".menu .backdrop")[0];
+  const menuBackdrop = document.querySelector(".menu > .backdrop");
   const menu = document.getElementsByClassName('menu')[0];
   const collapsibleTrigger = document.querySelectorAll(".collapsible > a");
-  const dropdownTriggers = document.querySelectorAll(".dropdown > a");
+  const dropdownTriggers = document.querySelectorAll(".dropdown .dropdown-wrapper > a");
   const currentVersion = document.querySelector('.versions-menu a.current');
+  const dropdownBackdrop = document.querySelector('.dropdown .backdrop');
 
   function toggleMenu() {
-    if (menu.classList.contains('active')) {
-      menu.classList.remove('active');
-    } else {
-      menu.classList.add('active');
-    }
+    menu.classList.toggle('active');
   }
 
   menuBackdrop.addEventListener('click',function(_e) {
@@ -45,13 +42,17 @@ document.addEventListener('DOMContentLoaded', function(_event) {
   dropdownTriggers.forEach(el => {
     el.addEventListener('click', function(e) {
       e.preventDefault();
-      this.parentElement.classList.toggle('active');
+      this.parentElement.parentElement.classList.toggle('active');
     })
   })
 
   currentVersion.addEventListener('click', function(e) {
     e.preventDefault();
   });
 
+  dropdownBackdrop.addEventListener('click', function(e) {
+    this.parentElement.classList.remove('active');
+  })
+
   hljs.highlightAll();
 });

web/src/scss/parts/header.scss

@@ -60,7 +60,7 @@ nav {
             align-items: center;
             overflow-y: auto;
 
-            .backdrop {
+            & > .backdrop {
                 display: block;
             }
 
@@ -191,35 +191,39 @@ nav {
         }
 
         .dropdown {
-            position: relative;
-
             a {
                 white-space: nowrap;
             }
 
-            & > a::after {
-                content: '';
-                display: inline-block;
-                width: 5px;
-                height: 5px;
-                margin: -4px 0 0 0.5rem;
-                vertical-align: middle;
-                border-right: 2px solid rgba(248, 248, 242, .7);
-                border-bottom: 2px solid rgba(248, 248, 242, .7);
-                rotate: 45deg;
-            }
+            .dropdown-wrapper {
+                position: relative;
+
+                & > a::after {
+                    content: '';
+                    display: inline-block;
+                    width: 5px;
+                    height: 5px;
+                    margin: -4px 0 0 0.5rem;
+                    vertical-align: middle;
+                    border-right: 2px solid rgba(248, 248, 242, .7);
+                    border-bottom: 2px solid rgba(248, 248, 242, .7);
+                    rotate: 45deg;
+                }
 
-            .dropdown-block {
-                display: none;
+                .dropdown-block {
+                    display: none;
 
-                a {
-                    display: block;
+                    a {
+                        display: block;
+                    }
                 }
             }
+
             &.active {
                 .dropdown-block {
                     display: block;
                     position: absolute;
+                    z-index: 1;
                     left: 0;
                     border: 1px solid $border-color-light;
                     padding: 0.5rem 1rem;
@@ -236,6 +240,10 @@ nav {
                         font-weight: 500;
                     }
                 }
+
+                .backdrop {
+                    display: block;
+                }
             }
         }
     }