feat(navbar): adds initial drawer for additional buttons

Author: dvcol

src/components/AppComponent.vue

@@ -28,12 +28,11 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
 
 <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;
 @include transition.scale;
 
-$header-height: 2.75rem;
-
 header {
   position: fixed;
   top: 0;
@@ -42,7 +41,7 @@ header {
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  height: $header-height;
+  min-height: layout.$header-navbar-height;
 
   > :first-child {
     @include mixin.hover-background;
@@ -53,7 +52,7 @@ main {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: calc(100% - #{$header-height});
-  margin-top: $header-height;
+  min-height: calc(100% - #{layout.$header-navbar-height});
+  margin-top: layout.$header-navbar-height;
 }
 </style>

src/components/common/navbar/NavbarComponent.vue

@@ -18,11 +18,12 @@ const navigate = (to: Route) => {
 
 const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route.Search];
 
+const isHover = ref(false);
 const navElement = ref<HTMLElement>();
 </script>
 
 <template>
-  <nav ref="navElement">
+  <nav ref="navElement" @mouseenter="isHover = true" @mouseleave="isHover = false">
     <NTabs
       :value="route.name?.toString()"
       class="tabs"
@@ -50,15 +51,36 @@ const navElement = ref<HTMLElement>();
         <NavbarSettingsDropdown v-if="navElement" :parent-element="navElement" />
       </NTab>
     </NTabs>
+    <div class="drawer" :class="{ visible: isHover }">
+      <div>This is an optional drawer</div>
+    </div>
   </nav>
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/layout' as layout;
+
 nav {
   padding: 0 0.25rem;
   font-size: 12px;
   text-align: center;
 
+  .drawer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.5s var(--n-bezier);
+    transition-delay: 0.2s;
+
+    &.visible {
+      height: layout.$header-drawer-height;
+      transition: height 0.25s var(--n-bezier);
+      transition-delay: 0s;
+    }
+  }
+
   a {
     color: inherit; /* blue colors for links too */
     text-decoration: inherit; /* no underline */

src/components/views/history/HistoryComponent.vue

@@ -59,7 +59,7 @@ const getTitle = (media: TraktHistory) => {
 <template>
   <NVirtualList
     ref="virtualList"
-    style="max-height: calc(100dvh - 8px); margin-top: -44px; margin-bottom: 8px"
+    class="history-list"
     :item-size="80"
     :data-length="history.length"
     :items="history"
@@ -87,5 +87,11 @@ const getTitle = (media: TraktHistory) => {
 </template>
 
 <style lang="scss" scoped>
-// TODO
+@use '~/styles/layout' as layout;
+
+.history-list {
+  max-height: calc(100dvh - 8px);
+  margin-top: -#{layout.$header-navbar-height};
+  margin-bottom: 8px;
+}
 </style>

src/styles/layout.scss

@@ -0,0 +1,2 @@
+$header-navbar-height: 2.75rem;
+$header-drawer-height: 2.75rem;

src/styles/layout.style.ts

@@ -0,0 +1,4 @@
+export const Header = {
+  navbarHeight: 44,
+  drawerHeight: 44,
+} as const;