From 9d4f443363962604be52f046baa7b877fac53105 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 29 Sep 2022 02:20:44 +0200
Subject: [PATCH] refactor: overhaul SiteNavigation component

---
 src/components/SiteNavigation.vue | 163 +++++++++++++++---------------
 1 file changed, 81 insertions(+), 82 deletions(-)

diff --git a/src/components/SiteNavigation.vue b/src/components/SiteNavigation.vue
index 2af4703..b3b8a0e 100644
--- a/src/components/SiteNavigation.vue
+++ b/src/components/SiteNavigation.vue
@@ -1,122 +1,121 @@
 <script setup lang="ts">
 import router from "@/router";
 import { RouterLink } from "vue-router";
-import NavToggle from "@/components/NavToggle.vue";
-
-interface Props {
-  isActive: boolean;
-}
-
-const props = defineProps<Props>();
 </script>
 
 <template>
-  <nav class="navigation" :class="{ open: props.isActive }">
-    <div class="navigation__background" @click="$emit('selected')"></div>
-
-    <NavToggle class="navigation__toggle" @click="$emit('selected')" />
-
-    <ul class="navigation__list">
-      <li
-        class="navigation__item"
+  <nav class="navigation">
+    <div class="navigation__list">
+      <RouterLink
+        class="navigation__link"
         v-for="(route, idx) in router.options.routes"
         :key="idx"
+        :to="route.path"
       >
-        <RouterLink :to="route.path" @click="$emit('selected')">
+        <component
+          class="navigation__link-icon"
+          :is="route.meta?.icon"
+        ></component>
+        <span class="navigation__link-text">
           {{ route.meta?.title }}
-        </RouterLink>
-      </li>
-    </ul>
+        </span>
+      </RouterLink>
+    </div>
   </nav>
 </template>
 
 <style lang="scss">
 .navigation {
   position: fixed;
-  z-index: 9000;
+  top: var(--navigation-position-top);
+  right: var(--navigation-position-right);
+  bottom: var(--navigation-position-bottom);
+  left: var(--navigation-position-left);
+  overflow: hidden;
 
-  &__background {
-    position: fixed;
+  width: var(--navigation-width);
+  height: var(--navigation-height);
 
-    background-color: rgba(#000, 0);
-    backdrop-filter: blur(0rem);
+  background-color: var(--color-navigation-background);
 
-    transition: 1s;
-  }
+  transition: 0.4s;
+  z-index: 1;
 
-  &.open &__background {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  @media (hover: hover) {
+    &:hover {
+      width: var(--navigation-width-expanded);
+    }
 
-    background-color: rgba(#000, 0.75);
-    backdrop-filter: blur(0.25rem);
-  }
-
-  &__toggle {
-    display: none;
-    position: fixed;
-    z-index: 9000;
-  }
-
-  &.open &__toggle {
-    display: flex;
-    top: 0;
-    left: 0;
+    &:hover &__link-text {
+      display: var(--navigation-link-display-hover);
+    }
   }
 
   &__list {
-    background-color: var(--color-navigation-background);
-    width: var(--navigation-width);
+    display: flex;
+    flex-flow: var(--navigation-flow);
+    justify-content: var(--navigation-justify);
+    align-items: var(--navigation-align);
 
-    list-style: none;
-
-    margin: 0;
-    padding: 3.5rem 0 0 0;
-
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: -100vw;
-
-    transition: left ease-in-out 0.4s;
+    width: 100%;
+    height: 100%;
   }
 
-  &.open &__list {
-    left: 0;
-  }
+  &__link {
+    flex: var(--navigation-link-flex);
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: var(--navigation-link-justify);
+    align-items: center;
 
-  &__item {
-    font-size: var(--navigation-item-font-size);
-    line-height: var(--navigation-item-line-height);
-  }
+    height: var(--navigation-link-height);
+
+    padding: var(--navigation-link-padding);
 
-  a {
-    display: block;
-    font-weight: bold;
     color: var(--color-router-link);
-    padding: 0 var(--container-spacing-right-safe) 0
-      var(--container-spacing-left-safe);
-
-    box-shadow: inset 0 0 0 0 var(--color-link-text-underline);
+    box-shadow: none;
 
     &:hover {
-      color: var(--color-router-link-hover);
-      box-shadow: inset var(--navigation-width) 0 0 0 var(--color-router-link);
+      box-shadow: var(--navigation-link-box-shadow);
+
+      svg {
+        fill: var(--color-router-link-hover);
+      }
     }
 
-    &:before {
-      content: "➤";
-      font-size: 2rem;
-      margin: 0 1rem 0 0;
-      display: inline-block;
-      width: 2rem;
+    > * {
+      flex: 1 0 0;
     }
 
     &.router-link-exact-active {
-      color: var(--color-router-link-active);
+      color: var(--color-router-link-hover);
+      background-color: var(--color-router-link);
+
+      &:hover {
+        color: var(--color-router-link-hover);
+      }
+
+      svg {
+        fill: var(--color-router-link-hover);
+      }
+    }
+  }
+
+  &__link-icon {
+    width: var(--navigation-link-icon-size);
+    min-width: var(--navigation-link-icon-size);
+    max-width: var(--navigation-link-icon-size);
+    margin: 0 var(--navigation-link-icon-spacing);
+    fill: var(--color-router-link);
+  }
+
+  &__link-text {
+    display: none;
+    font-size: var(--navigation-link-text-font-size);
+    margin: 0 0 0 1rem;
+
+    &:hover {
+      color: var(--color-router-link-hover);
     }
   }
 }