refactor: settings page + ui components

components/app/Sidenav.vue

@@ -7,15 +7,15 @@
         :to="localePath(navigation.target)"
         class="
           p-4
-          text-xs
           flex-col flex-1
-          hover:bg-primaryLight
+          hover:bg-primaryDark hover:text-secondaryDark
           items-center
           justify-center
+          transition
         "
       >
-        <i class="material-icons">{{ navigation.icon }}</i>
-        <span class="mt-2">{{ navigation.title }}</span>
+        <i class="material-icons opacity-75">{{ navigation.icon }}</i>
+        <span class="mt-2 text-xs font-semibold">{{ navigation.title }}</span>
       </nuxt-link>
     </nav>
   </aside>
@@ -36,67 +36,11 @@ export default {
       ],
     }
   },
-  computed: {
-    currentNavigation() {
-      return this.navigation.filter((item) =>
-        this.$route.name.includes(item.primary)
-      )
-    },
-  },
-  mounted() {
-    window.addEventListener("scroll", () => {
-      const mainNavLinks = document.querySelectorAll("nav.secondary-nav a")
-      const fromTop = window.scrollY
-      mainNavLinks.forEach(({ hash, classList }) => {
-        const section = document.querySelector(hash)
-        if (
-          section &&
-          section.offsetTop <= fromTop &&
-          section.offsetTop + section.offsetHeight > fromTop
-        ) {
-          classList.add("current")
-        } else {
-          classList.remove("current")
-        }
-      })
-    })
-  },
 }
 </script>
 
 <style scoped lang="scss">
-nav.secondary-nav {
-  @apply flex flex-col flex-nowrap;
-  @apply items-center;
-  @apply justify-center;
-  @apply border-t-2 border-dashed border-divider;
-  @apply pt-2;
-  @apply space-y-2;
-
-  a {
-    @apply inline-flex;
-    @apply items-center;
-    @apply justify-center;
-    @apply flex-shrink-0;
-    @apply p-4;
-    @apply rounded-full;
-    @apply bg-primaryDark;
-    @apply text-secondaryLight;
-    @apply fill-current;
-    @apply outline-none;
-
-    @apply ease-in-out;
-    @apply duration-150;
-
-    &:hover {
-      @apply text-secondary;
-      @apply fill-current;
-    }
-
-    &.current {
-      @apply text-accent;
-      @apply fill-current;
-    }
-  }
+.active {
+  @apply text-accent;
 }
 </style>