feat: add navbar

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
+import { isShowMenu } from './utils/store-data'
 
 useHead({
   titleTemplate: (title) => (title ? `${title} | 开源面对面` : '开源面对面'),
@@ -9,7 +10,7 @@ useHead({
 <template>
   <app-header />
   <ai-assistant />
-  <router-view v-slot="{ Component }">
+  <router-view v-show="!isShowMenu" v-slot="{ Component }">
     <Transition>
       <component :is="Component" />
     </Transition>

src/components/app-footer.vue

@@ -37,9 +37,6 @@
       Made by
       <a href="https://github.com/sxzz" target="_blank">三咲智子</a> with ❤️
     </p>
-    <p>
-      <a href="/sponsors" target="_blank">Our Sponsors</a>
-    </p>
     <p>
       <a href="https://github.com/opensource-f2f" target="_blank">开源面对面</a>
       &copy; 2022

src/components/app-header.vue

@@ -1,101 +1,82 @@
 <script setup lang="ts">
 import { Menu } from 'floating-vue'
 import 'floating-vue/dist/style.css'
-
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <header
-    flex="~ row none"
-    relative
-    h-240px
-    w-full
-    justify-center
-    style="background: var(--header-bg)"
-  >
-    <div flex="~ col gap-16px" items-center justify-center>
-      <router-link :to="{ name: 'Index' }">
-        <img
-          h-100px
-          w-100px
-          rounded-2
-          src="/static/logo.png"
-          alt="开源面对面"
-        />
-      </router-link>
-      <span>开源面对面，连接热爱开源的你！</span>
-
-      <div flex="~ row gap-2" flex-wrap justify-center>
-        <a target="_blank" href="https://github.com/opensource-f2f">
-          <img
-            alt="GitHub Org's stars"
-            src="https://img.shields.io/github/stars/opensource-f2f?style=social"
-          />
-        </a>
-        <a target="_blank" href="https://twitter.com/osf2f">
+  <header style="background: var(--header-bg)">
+    <app-navbar />
+    <div flex="~ row none" relative h-240px w-full justify-center>
+      <div flex="~ col gap-16px" items-center justify-center>
+        <router-link :to="{ name: 'Index' }">
           <img
-            alt="Twitter followers"
-            src="https://img.shields.io/twitter/follow/osf2f?style=social"
+            h-100px
+            w-100px
+            rounded-2
+            src="/static/logo.png"
+            alt="开源面对面"
           />
-        </a>
-        <a
-          target="_blank"
-          href="https://www.youtube.com/channel/UCV7Ibg1k_aMSEcDFgJvuvdg"
-        >
-          <img
-            alt="YouTube subscribers"
-            src="https://img.shields.io/youtube/channel/subscribers/UCV7Ibg1k_aMSEcDFgJvuvdg?style=social"
-          />
-        </a>
-        <a target="_blank" href="https://feeds.osf2f.net/osf2f.xml">
-          <img
-            alt="RSS address"
-            src="https://img.shields.io/badge/rss-F88900?style=flat&logo=rss&logoColor=white"
-          />
-        </a>
-        <a
-          target="_blank"
-          href="https://open.spotify.com/show/48Yeu1L5pTluk1AVc3ShU6"
-        >
-          <img
-            alt="Listen on Spotify"
-            src="https://img.shields.io/badge/spotify-1DB954?style=flat&logo=spotify&logoColor=white"
-          />
-        </a>
-        <a target="_blank" href="https://music.163.com/#/djradio?id=1001312291">
-          <img h-20px alt="NetEase Music" src="/static/netease-music.svg" />
-        </a>
+        </router-link>
+        <span>开源面对面，连接热爱开源的你！</span>
 
-        <Menu>
-          <div text="#2aae67" i-carbon-logo-wechat cursor-pointer text-20px />
-          <template #popper>
-            <div flex="~ col" m-10px>
-              <img
-                h-150px
-                alt="Weixin Offcial Accounts Platform"
-                src="/static/we-chat.jpeg"
-              />扫一扫 关注微信公众号
-            </div>
-          </template>
-        </Menu>
-      </div>
-    </div>
-    <div
-      absolute
-      right-5
-      top-5
-      cursor-pointer
-      i="dark:carbon-moon carbon-sun"
-      text="black 2xl"
-      @click="toggleDark()"
-    />
+        <div flex="~ row gap-2" flex-wrap justify-center>
+          <a target="_blank" href="https://github.com/opensource-f2f">
+            <img
+              alt="GitHub Org's stars"
+              src="https://img.shields.io/github/stars/opensource-f2f?style=social"
+            />
+          </a>
+          <a target="_blank" href="https://twitter.com/osf2f">
+            <img
+              alt="Twitter followers"
+              src="https://img.shields.io/twitter/follow/osf2f?style=social"
+            />
+          </a>
+          <a
+            target="_blank"
+            href="https://www.youtube.com/channel/UCV7Ibg1k_aMSEcDFgJvuvdg"
+          >
+            <img
+              alt="YouTube subscribers"
+              src="https://img.shields.io/youtube/channel/subscribers/UCV7Ibg1k_aMSEcDFgJvuvdg?style=social"
+            />
+          </a>
+          <a target="_blank" href="https://feeds.osf2f.net/osf2f.xml">
+            <img
+              alt="RSS address"
+              src="https://img.shields.io/badge/rss-F88900?style=flat&logo=rss&logoColor=white"
+            />
+          </a>
+          <a
+            target="_blank"
+            href="https://open.spotify.com/show/48Yeu1L5pTluk1AVc3ShU6"
+          >
+            <img
+              alt="Listen on Spotify"
+              src="https://img.shields.io/badge/spotify-1DB954?style=flat&logo=spotify&logoColor=white"
+            />
+          </a>
+          <a
+            target="_blank"
+            href="https://music.163.com/#/djradio?id=1001312291"
+          >
+            <img h-20px alt="NetEase Music" src="/static/netease-music.svg" />
+          </a>
 
-    <router-link to="/">
-      <div absolute left-5 top-5 cursor-pointer text="black 2xl">
-        <div i-carbon-home text="[var(--text-color)]" />
+          <Menu>
+            <div text="#2aae67" i-carbon-logo-wechat cursor-pointer text-20px />
+            <template #popper>
+              <div flex="~ col" m-10px>
+                <img
+                  h-150px
+                  alt="Weixin Offcial Accounts Platform"
+                  src="/static/we-chat.jpeg"
+                />扫一扫 关注微信公众号
+              </div>
+            </template>
+          </Menu>
+        </div>
       </div>
-    </router-link>
+    </div>
   </header>
 </template>

src/components/app-navbar.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { isLargeScreen } from '../utils/store-data'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <div px-20px>
+    <div flex>
+      <!-- logo -->
+      <div h-60px flex items-center>
+        <router-link to="/">
+          <div cursor-pointer text="black 2xl">
+            <div i-carbon-home text="[var(--text-color)]" />
+          </div>
+        </router-link>
+      </div>
+
+      <div class="content" flex flex-grow-1 items-center flex-justify-end>
+        <!-- menu -->
+        <NavMenu v-if="isLargeScreen" class="menu" />
+
+        <!-- search -->
+        <!-- <NavSearch /> -->
+
+        <!-- theme-toggler -->
+        <div
+          ml-40px
+          cursor-pointer
+          i="dark:carbon-moon carbon-sun"
+          text="black 2xl"
+          @click="toggleDark()"
+        />
+
+        <!-- github -->
+        <a target="_blank" href="https://github.com/opensource-f2f">
+          <div text="black 2xl" ml-15px cursor-pointer>
+            <div i-carbon-logo-github text="[var(--text-color)]" />
+          </div>
+        </a>
+
+        <!-- collapsible menu -->
+        <NavHamburger v-if="!isLargeScreen" />
+      </div>
+    </div>
+  </div>
+</template>

src/components/navbar/nav-hamburger.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { isShowMenu, menuList } from '../../utils/store-data'
+</script>
+
+<template>
+  <div
+    ml-20px
+    cursor-pointer
+    :i="isShowMenu ? 'carbon-close' : 'carbon-menu'"
+    text=" 2xl"
+    @click="isShowMenu = !isShowMenu"
+  />
+  <div
+    v-if="isShowMenu"
+    style="background-color: var(--bg)"
+    flex="~ col"
+    fixed
+    left-0
+    top-60px
+    z-999
+    h-full
+    w-full
+    px-50px
+    py-10px
+  >
+    <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
+    >
+      <a
+        :key="key"
+        ml-20px
+        style="color: var(--text-color)"
+        :item="item"
+        :href="item.href"
+      >
+        {{ item.name }}
+      </a>
+    </div>
+  </div>
+</template>

src/components/navbar/nav-menu.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { menuList } from '../../utils/store-data'
+</script>
+
+<template>
+  <nav flex>
+    <a
+      v-for="(item, key) in menuList"
+      :key="key"
+      ml-20px
+      style="color: var(--text-color)"
+      :item="item"
+      :href="item.href"
+    >
+      {{ item.name }}
+    </a>
+  </nav>
+</template>

src/components/navbar/nav-search.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>search</div>
+</template>

src/components/sponsors.vue

@@ -1,16 +1,17 @@
 <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 style="align-self: center">
+  <div self-center>
     <div>Sponsor list</div>
 
-    <table style="width: 600px">
+    <table :style="{ width: isLargeScreen ? '600px' : '350px' }">
       <tr>
         <td>捐赠人</td>
         <td>时间</td>

src/typings/components.d.ts

@@ -10,12 +10,16 @@ declare module 'vue' {
     AiAssistant: typeof import('./../components/ai-assistant.vue')['default']
     AppFooter: typeof import('./../components/app-footer.vue')['default']
     AppHeader: typeof import('./../components/app-header.vue')['default']
+    AppNavbar: typeof import('./../components/app-navbar.vue')['default']
     Badge: typeof import('./../components/badge.vue')['default']
     Components: typeof import('./../components/index.vue')['default']
     ContributorContent: typeof import('./../components/contributor-content.vue')['default']
     EpisodeContent: typeof import('./../components/episode-content.vue')['default']
     EpisodeItem: typeof import('./../components/episode-item.vue')['default']
     EpisodeMeta: typeof import('./../components/episode-meta.vue')['default']
+    NavHamburger: typeof import('./../components/navbar/nav-hamburger.vue')['default']
+    NavMenu: typeof import('./../components/navbar/nav-menu.vue')['default']
+    NavSearch: typeof import('./../components/navbar/nav-search.vue')['default']
     NotFound: typeof import('./../components/not-found.vue')['default']
     Person: typeof import('./../components/person.vue')['default']
     PersonList: typeof import('./../components/person-list.vue')['default']

src/utils/store-data.ts

@@ -0,0 +1,8 @@
+/** menuList info */
+export const menuList = ref([{ name: 'Sponsors', href: '/sponsors' }])
+
+/** isLargeScreen info */
+export const isLargeScreen = useMediaQuery('(min-width: 600px)')
+
+/** isShowMenu */
+export const isShowMenu = ref(false)