feat(navbar): adds picker & search to history tab

Author: dvcol

src/components/AppComponent.vue

@@ -14,10 +14,16 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
   <header>
     <RouterView v-slot="{ Component, route }" name="navbar">
       <NavbarComponent v-if="isAuthenticated">
-        <template v-if="Component" #drawer>
-          <KeepAlive>
-            <component :is="Component" :key="route.path" />
-          </KeepAlive>
+        <template v-if="Component" #drawer="{ parentElement }">
+          <Transition name="scale" mode="out-in">
+            <KeepAlive>
+              <component
+                :is="Component"
+                :key="route.path"
+                :parent-element="parentElement"
+              />
+            </KeepAlive>
+          </Transition>
         </template>
       </NavbarComponent>
     </RouterView>

src/components/common/navbar/NavbarComponent.vue

@@ -55,7 +55,7 @@ const navElement = ref<HTMLElement>();
       </NTab>
     </NTabs>
     <div class="drawer" :class="{ visible: showDrawer }">
-      <slot name="drawer"></slot>
+      <slot name="drawer" :parent-element="navElement"></slot>
     </div>
   </nav>
 </template>

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NAvatar, NDropdown, NEllipsis, NIcon, NSpace } from 'naive-ui';
+import { NAvatar, NDropdown, NEllipsis, NFlex, NIcon } from 'naive-ui';
 
 import { computed, defineProps, h, ref } from 'vue';
 
@@ -143,16 +143,15 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
     class="dropdown"
     :style="{
       'margin-top': '0.75rem',
-      'margin-right': '-0.25rem',
       'text-align': 'left',
-      'min-width': 'max(calc(100vw / 6), 9rem)',
+      'min-width': 'max(calc(100vw / 6), 8rem)',
       'max-width': '20rem',
       'background-color': Colors.bgBlurBlackHover,
       'backdrop-filter': Blurs.blur,
     }"
     @select="onSelect"
   >
-    <NSpace justify="space-around" align="center" :wrap="false">
+    <NFlex justify="space-around" align="center" :wrap="false">
       <NEllipsis
         style="
           max-width: calc(100vw / 6 - 0.25rem - 3px - 1.75rem);
@@ -180,6 +179,6 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
       <NIcon v-else style="position: absolute; top: 0.4rem; right: 0.75rem" size="1.5em">
         <IconAccount />
       </NIcon>
-    </NSpace>
+    </NFlex>
   </NDropdown>
 </template>

src/components/icons/IconLoop.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
+      <path stroke-dasharray="16" stroke-dashoffset="16" d="M10.5 13.5L3 21">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.4s"
+          dur="0.2s"
+          values="16;0"
+        />
+      </path>
+      <path
+        stroke-dasharray="40"
+        stroke-dashoffset="40"
+        d="M10.7574 13.2426C8.41421 10.8995 8.41421 7.10051 10.7574 4.75736C13.1005 2.41421 16.8995 2.41421 19.2426 4.75736C21.5858 7.10051 21.5858 10.8995 19.2426 13.2426C16.8995 15.5858 13.1005 15.5858 10.7574 13.2426Z"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.4s"
+          values="40;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/views/history/HistoryNavbar.vue

@@ -1,5 +1,59 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { NDatePicker, NFlex, NIcon, NInput } from 'naive-ui';
+import { defineProps } from 'vue';
+
+import IconLoop from '~/components/icons/IconLoop.vue';
+
+defineProps({
+  parentElement: HTMLElement,
+});
+</script>
 
 <template>
-  <div>History Navbar</div>
+  <NFlex class="row" align="center" justify="center" :vertical="false">
+    <NDatePicker
+      class="picker"
+      type="daterange"
+      :to="parentElement"
+      :default-value="[Date.now(), Date.now()]"
+      placement="bottom"
+      update-value-on-close
+      close-on-select
+      clearable
+      :on-clear="() => console.log('clear')"
+      :on-confirm="value => console.log('confirm', value)"
+    />
+    <NInput class="input" placeholder="Search" autosize clearable>
+      <template #prefix>
+        <NIcon :component="IconLoop" />
+      </template>
+    </NInput>
+  </NFlex>
 </template>
+
+<style lang="scss" scoped>
+@use '~/styles/mixin' as mixin;
+
+.row {
+  width: 100%;
+
+  .picker {
+    flex: 0 1 48%;
+  }
+
+  .input {
+    flex: 0 1 48%;
+  }
+}
+</style>
+
+<style lang="scss">
+@use '~/styles/mixin' as mixin;
+
+.n-date-panel {
+  @include mixin.hover-background(rgb(0 0 0 / 80%), rgb(0 0 0 / 90%));
+
+  margin-top: 12px;
+  margin-left: -16px;
+}
+</style>

src/styles/layout.scss

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

src/styles/layout.style.ts

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