fix(navbar): adjust css transition and fix absolute routing

Author: dvcol

src/components/AppComponent.vue

@@ -83,6 +83,7 @@ const onBack = () => {
                     :is="Component"
                     :parent-element="parentElement"
                     :reverse="reverse"
+                    :panel-open="panelOpen"
                   />
                 </KeepAlive>
               </Transition>
@@ -148,7 +149,6 @@ const onBack = () => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/styles/mixin' as mixin;
 @use '~/styles/layout' as layout;
 @use '~/styles/z-index' as layers;
 @use '~/styles/transition' as transition;
@@ -173,17 +173,6 @@ const onBack = () => {
       top 0.5s var(--n-bezier),
       left 0.5s var(--n-bezier),
       width 0.5s var(--n-bezier);
-
-    > :first-child {
-      @include mixin.hover-background;
-    }
-
-    &.open > :first-child {
-      background: var(--bg-gradient-60-90);
-      // stylelint-disable-next-line property-no-vendor-prefix -- necessary for safari
-      -webkit-backdrop-filter: blur(var(--bg-blur-20));
-      backdrop-filter: blur(var(--bg-blur-20));
-    }
   }
 
   main {

src/components/common/navbar/NavbarComponent.vue

@@ -34,6 +34,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  panelOpen: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const { disabled, reverse } = toRefs(props);
@@ -181,7 +186,7 @@ const onTouchEnd = (e: TouchEvent) => {
 <template>
   <nav
     ref="navElement"
-    :class="{ reverse, floating }"
+    :class="{ reverse, floating, panel: panelOpen, drawer: showDrawer }"
     @mouseenter="isHover = true"
     @mouseleave="isHover = false"
     @focusin="isFocus = true"
@@ -257,6 +262,7 @@ const onTouchEnd = (e: TouchEvent) => {
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/mixin' as mixin;
 @use '~/styles/layout' as layout;
 
 nav {
@@ -265,16 +271,31 @@ nav {
   --navbar-text-color-hover-active: var(--white);
   --navbar-text-color-active: var(--white);
 
+  @include mixin.hover-background;
+
   display: flex;
   flex-direction: column;
   padding: env(safe-area-inset-top) 0.25rem 0;
   overflow-x: unset;
   font-size: 12px;
   text-align: center;
   transition:
+    backdrop-filter layout.$navbar-transition layout.$navbar-transition-delay,
+    background layout.$navbar-transition layout.$navbar-transition-delay,
     border-radius 0.25s var(--n-bezier),
     padding 0.25s var(--n-bezier);
 
+  &.drawer {
+    transition-delay: layout.$navbar-transition-delay-visible;
+  }
+
+  &.panel {
+    background: var(--bg-gradient-60-90);
+    // stylelint-disable-next-line property-no-vendor-prefix -- necessary for safari
+    -webkit-backdrop-filter: blur(var(--bg-blur-20));
+    backdrop-filter: blur(var(--bg-blur-20));
+  }
+
   &.reverse {
     flex-direction: column-reverse;
     padding: 0 0.25rem;

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -145,7 +145,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
     case 'logout':
       return logout();
     default:
-      if (Object.values(Route).includes(key as Route)) return router.push(key);
+      if (Object.values(Route).includes(key as Route)) return router.push(`/${key}`);
       if (typeof label === 'string' && key.startsWith('user-')) {
         return loadUser(label);
       }

src/styles/layout.scss

@@ -33,8 +33,8 @@ $top-safe-watching-height: calc(#{$watching-height} + #{$safe-area-inset-top});
 $top-safe-watching-open-height: calc(#{$watching-open-height} + #{$safe-area-inset-top});
 
 // Navbar transition
-$navbar-transition: 0.5s var(--n-bezier);
-$navbar-transition-visible: 0.25s var(--n-bezier);
+$navbar-transition: 0.75s var(--n-bezier);
+$navbar-transition-visible: 0.5s var(--n-bezier);
 $navbar-transition-delay: 0.5s;
 $navbar-transition-delay-visible: 0s;
 

src/styles/mixin.scss

@@ -11,8 +11,6 @@
   -webkit-backdrop-filter: blur($blur);
   backdrop-filter: blur($blur);
   transition: $transition-prop $transition;
-  will-change: color, background, background-color, backdrop-filter, box-shadow,
-    border-color, scale, opacity, backdrop-filter;
 
   &:active,
   &:hover {