feat(navbar): switch to tabs instead of buttons

Author: dvcol

src/components/AppComponent.vue

@@ -19,10 +19,23 @@ const { isAuthenticated } = useSettingsStoreRefs();
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/z-index' as layers;
+
 header {
+  position: sticky;
+  top: 0;
+  z-index: layers.$layer-ui;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  background: rgb(0 0 0 / 30%);
+  backdrop-filter: blur(2px);
+  transition: background 0.5s;
+  will-change: background;
+
+  &:hover {
+    background: rgb(0 0 0 / 60%);
+  }
 }
 
 main {

src/components/common/navbar/NavbarComponent.vue

@@ -1,45 +1,69 @@
 <script lang="ts" setup>
-import { NButton, NButtonGroup } from 'naive-ui';
-import { RouterLink } from 'vue-router';
+import { NTab, NTabs } from 'naive-ui';
+import { useRoute, useRouter } from 'vue-router';
 
 import { Route } from '~/router';
-import { useRouterStore } from '~/stores/router.store';
 import { useI18n } from '~/utils';
 
-const store = useRouterStore();
 const i18n = useI18n('route');
+const route = useRoute();
+const router = useRouter();
+
+const navigate = (to: Route) => {
+  router.push(to);
+};
 
 const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route.Search, Route.Settings];
 </script>
 
 <template>
   <nav>
-    <NButtonGroup class="buttons">
-      <template v-for="(route, index) in routes" :key="route">
-        <RouterLink v-slot="{ href, navigate, isActive }" :to="`${ store.baseName }/${route}`" custom>
-          <NButton :round="index === 0 || index === routes.length - 1" :class="{ active: isActive }" :href="href" @click="navigate">
-            {{ i18n(route.toLowerCase()) }}
-          </NButton>
-        </RouterLink>
+    <NTabs :value="route.name" class="tabs" type="segment" justify-content="space-evenly" animated>
+      <template v-for="_route in routes" :key="_route">
+        <NTab class="tab" :name="_route.toLowerCase()" type="segment" @click="navigate(_route)">
+          {{ i18n(_route.toLowerCase()) }}
+        </NTab>
       </template>
-    </NButtonGroup>
+    </NTabs>
   </nav>
 </template>
 
 <style lang="scss" scoped>
 nav {
-  margin: 1rem 0;
+  margin: 0 0.25rem;
   font-size: 12px;
   text-align: center;
+
+  a {
+    color: inherit; /* blue colors for links too */
+    text-decoration: inherit; /* no underline */
+  }
+
+  .tabs {
+    display: flex;
+    justify-content: center;
+    min-height: 2.75rem;
+  }
 }
+</style>
+
+<style lang="scss">
+nav {
+  .tabs {
+    --n-bar-color: var(--trakt-red-dark) !important;
+    --n-tab-text-color-active: var(--vt-c-white) !important;
+    --n-tab-text-color-hover: color-mix(in srgb, var(--trakt-red) 90%, var(--vt-c-white)) !important;
+    --n-tab-color-segment: color-mix(in srgb, var(--trakt-red) 50%, transparent) !important;
+    --n-color-segment: inherit !important;
 
-.buttons {
-  display: flex;
-  justify-content: center;
+    /* stylelint-disable-next-line selector-class-pattern -- overriding theme class  */
+    .n-tabs-tab--active {
+      --n-tab-text-color-hover: color-mix(in srgb, var(--trakt-white) 99%, var(--vt-c-red)) !important;
+    }
 
-  .active {
-    color: var(--n-text-color-pressed);
-    background-color: var(--n-color-pressed);
+    .n-tabs-capsule {
+      backdrop-filter: blur(1px);
+    }
   }
 }
 </style>

src/styles/base.css

@@ -16,6 +16,10 @@
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
 
+  /* trakt.tv brand color */
+  --trakt-red: #ed1c24;
+  --trakt-red-dark: #ba080f;
+
   /* semantic color variables for this project */
   --section-gap: 160px;
   --color-background: var(--vt-c-black);

src/styles/z-index.scss

@@ -0,0 +1,8 @@
+$behind: -1;
+$default: 0;
+$in-front: 1;
+$layer-1: 10;
+$layer-2: 100;
+$layer-3: 1000;
+$layer-ui: 10000;
+$layer-max: 2147483647