feat(main nav): improve main nav

fix submenu should close when other is open
bitsundbaeume · Oct 21, 2023 · 3571d12 · 3571d12
1 parent 3c54461
commit 3571d12
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git a/src/components/header/Header.astro b/src/components/header/Header.astro
@@ -4,17 +4,29 @@ import MainNav from "@components/header/MainNav.vue";
 import "@styles/objects/_header.scss";
 
 const items = [
-  {
-    label: "Start Reading",
-    path: "/introduction/editorial",
-  },
   {
     label: "B&B Publication 2023",
     path: "/",
+  },
+  {
+    label: "HTML Version",
+    childItems: [
+      {
+        label: "Abstract",
+        path: "/closure/acknowledgements/#h-shaping-digital-transformation-for-a-sustainable-society",
+      },
+      {
+        label: "Table of Contents",
+        path: "/introduction/editorial/",
+      },
+    ],
+  },
+  {
+    label: "PDF Version",
     childItems: [
       {
-        label: "Overview",
-        path: "/#overview",
+        label: "Abstract",
+        path: "/",
       },
       {
         label: "Browse",

diff --git a/src/components/header/menu-nav/MenuItem.vue b/src/components/header/menu-nav/MenuItem.vue
@@ -1,5 +1,6 @@
 <template>
   <li
+    ref="menuItemRef"
     :class="[
       'c-menu__item',
       {
@@ -22,16 +23,14 @@
     </a>
 
     <template v-else>
-      <a
+      <button
         :ref="`menu-title-${depth}${index}`"
         class="c-menu__link is-menu-title"
-        role="button"
         tabindex="0"
         @click="toggleMenuItem"
-        @keydown="toggleMenuItem"
       >
         {{ props.menuItem.label }}
-      </a>
+      </button>
 
       <MenuSubmenu
         ref="submenu"
@@ -67,7 +66,7 @@ import { onClickOutside } from "@vueuse/core";
 
 export interface MenuItemData {
   label: string;
-  path: string;
+  path?: string;
   childItems?: MenuItemData[];
 }
 
@@ -81,7 +80,7 @@ const props = defineProps<MenuItemProps>();
 
 const isOpen = ref(false);
 const isCurrentPath = ref(false);
-const submenu = ref(null);
+const menuItemRef = ref(null);
 const submenuDirection = ref("right");
 
 const emit = defineEmits<{
@@ -92,16 +91,13 @@ const emit = defineEmits<{
 }>();
 
 /**
- * If the user clicks outside the submenu, close the submenu
+ * Close the submenu when clicking outside of it
  *
- * @param   {[type]}  submenu
- * @param   {[type]}  event
+ * @param   {[type]}  menuItemRef
  *
- * @return  {void}             [return description]
+ * @return  {void}
  */
-onClickOutside(submenu, (event): void => {
-  if ((event.target as Element).classList.contains("is-menu-title")) return;
-
+onClickOutside(menuItemRef, (): void => {
   isOpen.value = false;
 
   emit("submenuState", isOpen.value);
@@ -134,11 +130,11 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     isCurrentPath.value =
       window.location.pathname.slice(1) ===
-      props.menuItem.path.replace(/^\//gm, "");
+      props.menuItem?.path?.replace(/^\//gm, "");
   } else {
     isCurrentPath.value =
       window.location.pathname.replace(/^\/|\/$/gm, "") ===
-      props.menuItem.path.replace(/^\//gm, "");
+      props.menuItem?.path?.replace(/^\//gm, "");
   }
 });
 </script>
diff --git a/src/styles/components/_menu.scss b/src/styles/components/_menu.scss
@@ -45,6 +45,12 @@
     flex: 1 1 100%;
     text-decoration: none;
     padding: 2rem 0.6rem;
+    color: var(--blue-500);
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    font-size: var(--font-size-xs);
+    line-height: 1.5;
 
     @include butler-mx.hover {
       text-decoration: underline;
@@ -76,8 +82,7 @@
     position: absolute;
     z-index: 1;
     background: #fff;
-    margin-block-start: 0;
-    margin-block-end: 0;
+    margin-block: 0 0;
     top: 100%;
     width: max-content;
   }