refactor

src/App.vue

@@ -1,29 +1,21 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { isShowMenu } from './utils/store-data'
+import { isShowMenu } from './utils/menu'
 
 useHead({
   titleTemplate: (title) => (title ? `${title} | 开源面对面` : '开源面对面'),
 })
 </script>
 
 <template>
-  <app-header />
-  <ai-assistant />
-  <router-view v-show="!isShowMenu" v-slot="{ Component }">
-    <Transition>
-      <component :is="Component" />
-    </Transition>
-  </router-view>
-  <app-footer />
+  <div :class="{ 'overflow-hidden': isShowMenu }">
+    <app-header />
+    <ai-assistant />
+    <router-view v-slot="{ Component }">
+      <Transition>
+        <component :is="Component" />
+      </Transition>
+    </router-view>
+    <app-footer />
+  </div>
 </template>
-
-<style scoped>
-.v-enter-active {
-  transition: opacity 0.3s ease-in;
-}
-
-.v-enter-from {
-  opacity: 0;
-}
-</style>

src/components/app-navbar.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { isLargeScreen } from '../utils/store-data'
-
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 </script>
@@ -17,16 +15,14 @@ const toggleDark = useToggle(isDark)
         </router-link>
       </div>
 
-      <div class="content" flex flex-grow-1 items-center flex-justify-end>
-        <!-- menu -->
-        <NavMenu v-show="isLargeScreen" />
+      <div class="content" flex="~ grow-1 justify-end gap5" items-center>
+        <NavMenu />
 
         <!-- search -->
         <!-- <NavSearch /> -->
 
         <!-- theme-toggler -->
         <div
-          ml-40px
           cursor-pointer
           i="dark:carbon-moon carbon-sun"
           text="black 2xl"
@@ -35,7 +31,7 @@ const toggleDark = useToggle(isDark)
 
         <!-- github -->
         <a target="_blank" href="https://github.com/opensource-f2f">
-          <div text="black 2xl" ml-15px cursor-pointer>
+          <div text="black 2xl" cursor-pointer>
             <div i-carbon-logo-github text="[var(--text-color)]" />
           </div>
         </a>

src/components/navbar/nav-hamburger.vue

@@ -1,46 +1,49 @@
 <script setup lang="ts">
-import { isShowMenu, menuList } from '../../utils/store-data'
+import { isShowMenu, menus } from '../../utils/menu'
+
+const router = useRouter()
+router.afterEach(() => {
+  isShowMenu.value = false
+})
 </script>
 
 <template>
   <div
-    ml-20px
     cursor-pointer
+    text-2xl
     sm-hidden
-    :i="isShowMenu ? 'carbon-close' : 'carbon-menu'"
-    text=" 2xl"
+    :class="isShowMenu ? 'i-carbon-close' : 'i-carbon-menu'"
     @click="isShowMenu = !isShowMenu"
   />
-  <div
-    v-show="isShowMenu"
-    style="background-color: var(--bg)"
-    flex="~ col"
-    fixed
-    left-0
-    top-60px
-    z-999
-    h-full
-    w-full
-    px-50px
-    py-10px
-  >
+  <Transition>
     <div
-      v-for="(item, key) in menuList"
-      :key="key"
-      style="border-bottom: 1px solid var(--border-color)"
-      border-bottom="1px solid [var(--border-color)]"
-      p-10px
-      text-center
+      v-show="isShowMenu"
+      flex="~ col gap2"
+      bg="[var(--bg)]"
+      fixed
+      left-0
+      top-60px
+      z-999
+      h-full
+      w-full
+      px-50px
+      py-10px
+      duration="150!"
     >
-      <a
+      <router-link
+        v-for="(item, key) in menus"
         :key="key"
-        ml-20px
-        style="color: var(--text-color)"
-        :item="item"
-        :href="item.href"
+        border-b="1px solid [var(--border-color)]"
+        class="text-[var(--text-color)]"
+        flex="~ gap2"
+        items-center
+        justify-center
+        p2
+        :to="item.href"
       >
-        {{ item.name }}
-      </a>
+        <div :class="item.icon" text-xl />
+        {{ item.label }}
+      </router-link>
     </div>
-  </div>
+  </Transition>
 </template>

src/components/navbar/nav-menu.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { menuList } from '../../utils/store-data'
+import { menus } from '../../utils/menu'
 </script>
 
 <template>
   <nav flex>
-    <a
-      v-for="(item, key) in menuList"
+    <router-link
+      v-for="(item, key) in menus"
       :key="key"
+      :to="item.href"
+      class="text-[var(--text-color)]"
+      sm="flex flex-gap1"
       ml-20px
-      style="color: var(--text-color)"
-      :item="item"
-      :href="item.href"
+      hidden
+      items-center
     >
-      {{ item.name }}
-    </a>
+      <!-- TODO tooltip for label -->
+      <div :title="item.label" :class="item.icon" class="text-2xl" />
+    </router-link>
   </nav>
 </template>

src/components/sponsors.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import sponsors from '../assets/sponsors.json'
-import { isLargeScreen } from '../utils/store-data'
 
 sponsors.sort((a, b) => {
   return Date.parse(b.date) - Date.parse(a.date)
 })
 </script>
 
 <template>
-  <div self-center>
-    <div>Sponsor list</div>
-
-    <table :style="{ width: isLargeScreen ? '600px' : '350px' }">
+  <div flex="~ col gap2" items-center p2>
+    <h1>Sponsor list</h1>
+    <table max-w-500px w-full>
       <tr>
         <td>捐赠人</td>
         <td>时间</td>

src/style.css

@@ -34,3 +34,11 @@ a {
   background-color: transparent;
   color: var(--text-color);
 }
+
+.v-enter-active {
+  transition: opacity 0.3s ease-in;
+}
+
+.v-enter-from {
+  opacity: 0;
+}

src/utils/menu.ts

@@ -0,0 +1,16 @@
+export interface MenuItem {
+  label: string
+  href: string
+  icon: string
+}
+
+// @unocss-include
+export const menus: MenuItem[] = [
+  {
+    label: 'Sponsors',
+    href: '/sponsors',
+    icon: 'i-ri:heart-3-line text-pink',
+  },
+]
+
+export const isShowMenu = ref(false)