feat: 导航栏隐藏

frontend/app.vue

@@ -39,6 +39,31 @@ useHead({
     { name: 'baidu-site-verification', content: '' },
   ],
 })
+
+// 自动隐藏导航栏
+const isNavShown = ref(true)
+provide('isNavShown', isNavShown)
+if (process.client) {
+  const { directions, isScrolling, arrivedState } = useScroll(document)
+  const checkHeaderStatus = useDebounceFn(
+    (top, bottom, topArrived) => {
+      if (topArrived) {
+        isNavShown.value = true
+        return
+      }
+      if (top)
+        isNavShown.value = true
+
+      else if (bottom)
+        isNavShown.value = false
+    },
+    100,
+  )
+  watch(directions, () => {
+    if (isScrolling.value)
+      checkHeaderStatus(directions.top, directions.bottom, arrivedState.top)
+  })
+}
 </script>
 
 <template>

frontend/components/Navs/index.vue

@@ -6,11 +6,12 @@ const activeNav = computed(() => {
   return NavList.value.find(item => item.url === route.fullPath) || NavList[0]
 })
 const [isMobileNavShown, toggleMobileNavShown] = useToggle()
+const isNavShown = inject('isNavShown')
 </script>
 
 <template>
   <div class="main-header-wrapper">
-    <header class="main-header visible flex items-center justify-between h-full">
+    <header class="main-header flex items-center justify-between h-full" :class="{ 'nav-shown': isNavShown }">
       <nav class="nav-list h-full">
         <NuxtLink to="/" class="logo h-full">
           <Logo />
@@ -20,8 +21,8 @@ const [isMobileNavShown, toggleMobileNavShown] = useToggle()
             <span class="mobile-nav-active">{{ activeNav?.nav }}</span>
             <div i-carbon:caret-up class="mobile-nav-icon" />
           </div>
-          <div class="nav-item-wrapper" :class=" isMobileNavShown ? 'mobile-nav-item-wrapper' : '' " @click="toggleMobileNavShown()">
-            <NavsItem v-for="item in NavList" :key="item.nav" :nav="item" class="mx-4" :class=" isMobileNavShown ? 'mobile-nav-item' : '' " />
+          <div class="nav-item-wrapper" :class="{ 'mobile-nav-item-wrapper': isMobileNavShown }" @click="toggleMobileNavShown()">
+            <NavsItem v-for="item in NavList" :key="item.nav" :nav="item" class="mx-4" :class="{ 'mobile-nav-item': isMobileNavShown }" />
           </div>
         </div>
       </nav>
@@ -31,7 +32,7 @@ const [isMobileNavShown, toggleMobileNavShown] = useToggle()
 </template>
 
 <style scoped>
-.main-header.visible{
+.main-header.nav-shown{
     transform: translateZ(0);
 }
 

frontend/components/Types/index.vue

@@ -1,35 +1,38 @@
 <script setup>
 const runtimeConfig = useRuntimeConfig()
-const { data: TypeList } = await useFetch('/api/global/types')
+const { data: typeList } = await useFetch('/api/global/types')
+const isNavShown = inject('isNavShown')
 </script>
 
 <template>
-  <div class="view-nav">
+  <div class="view-types" :class="{ 'nav-shown': !isNavShown }">
     <div class="flex list-none ma pr-114">
-      <li v-for="item in TypeList" :key="item.type" class="navList">
+      <li v-for="item in typeList" :key="item.type" class="type-list">
         {{ item.alias }}
       </li>
     </div>
   </div>
 </template>
 
 <style scoped>
-.view-nav {
+.nav-shown{
+  @apply -translate-y-5rem;
+}
+.view-types {
   background: #fff;
   position: fixed;
-  top: 4.84rem;
+  top: 5rem;
   width: 100%;
   height: 3.833rem;
   z-index: 1;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
   transition: all .2s;
-  transform: translateZ(0);
   display: flex;
 }
-.navList{
+.type-list{
   @apply mr-8 text-lg text-gray-700 h-5 w-auto float-left cursor-pointer whitespace-nowrap;
 }
-.navList:hover{
+.type-list:hover{
   color: #1e80ff;
 }
 </style>

frontend/pages/index.vue

@@ -1,7 +1,11 @@
+<script setup>
+
+</script>
+
 <template>
   <div class="root_class">
     <Suspense>
-      <Main />
+      <Main pb-8rem />
       <template #fallback>
         <div op50 italic>
           <span animate-pulse>Loading...</span>