feat: add navbar (#73)

Co-authored-by: 三咲智子 Kevin Deng <[email protected]>
opensource-f2f · Mar 12, 2024 · 0785d9d · 0785d9d
1 parent 2c07ec2
commit 0785d9d
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 113 deletions.
diff --git a/public/static/ai-assistant.png b/public/static/ai-assistant.png
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,21 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
+import { isShowMenu } from './utils/menu'
 
 useHead({
   titleTemplate: (title) => (title ? `${title} | 开源面对面` : '开源面对面'),
 })
 </script>
 
 <template>
-  <app-header />
-  <ai-assistant />
-  <router-view 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>
diff --git a/src/components/app-footer.vue b/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

diff --git a/src/components/app-header.vue b/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>
diff --git a/src/components/app-navbar.vue b/src/components/app-navbar.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+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="~ grow-1 justify-end gap5" items-center>
+        <NavMenu />
+
+        <!-- search -->
+        <!-- <NavSearch /> -->
+
+        <!-- theme-toggler -->
+        <div
+          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" cursor-pointer>
+            <div i-carbon-logo-github text="[var(--text-color)]" />
+          </div>
+        </a>
+
+        <!-- collapsible menu -->
+        <NavHamburger />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/navbar/nav-hamburger.vue b/src/components/navbar/nav-hamburger.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { isShowMenu, menus } from '../../utils/menu'
+
+const router = useRouter()
+router.afterEach(() => {
+  isShowMenu.value = false
+})
+</script>
+
+<template>
+  <div
+    cursor-pointer
+    text-2xl
+    sm-hidden
+    :class="isShowMenu ? 'i-carbon-close' : 'i-carbon-menu'"
+    @click="isShowMenu = !isShowMenu"
+  />
+  <Transition>
+    <div
+      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!"
+    >
+      <router-link
+        v-for="(item, key) in menus"
+        :key="key"
+        border-b="1px solid [var(--border-color)]"
+        class="text-[var(--text-color)]"
+        flex="~ gap2"
+        items-center
+        justify-center
+        p2
+        :to="item.href"
+      >
+        <div :class="item.icon" text-xl />
+        {{ item.label }}
+      </router-link>
+    </div>
+  </Transition>
+</template>
diff --git a/src/components/navbar/nav-menu.vue b/src/components/navbar/nav-menu.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { menus } from '../../utils/menu'
+</script>
+
+<template>
+  <nav flex>
+    <router-link
+      v-for="(item, key) in menus"
+      :key="key"
+      :to="item.href"
+      class="text-[var(--text-color)]"
+      sm="flex flex-gap1"
+      ml-20px
+      hidden
+      items-center
+    >
+      <!-- TODO tooltip for label -->
+      <div :title="item.label" :class="item.icon" class="text-2xl" />
+    </router-link>
+  </nav>
+</template>
diff --git a/src/components/navbar/nav-search.vue b/src/components/navbar/nav-search.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>search</div>
+</template>
diff --git a/src/components/sponsors.vue b/src/components/sponsors.vue
@@ -7,10 +7,9 @@ sponsors.sort((a, b) => {
 </script>
 
 <template>
-  <div style="align-self: center">
-    <div>Sponsor list</div>
-
-    <table style="width: 600px">
+  <div flex="~ col gap2" items-center p2>
+    <h1>Sponsor list</h1>
+    <table max-w-full w-600px>
       <tr>
         <td>捐赠人</td>
         <td>时间</td>

diff --git a/src/style.css b/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;
+}
diff --git a/src/typings/components.d.ts b/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']