Merge pull request #28 from nbtca/feature-responsive-header

Feat: Make HeaderNavigation

cspell.json

@@ -15,6 +15,7 @@
     "m_lfit",
     "N3ptune",
     "NBTCA",
+    "nowrap",
     "openapi",
     "Rehype",
     "rehypePlugins",

src/components/Header.astro

@@ -1,7 +0,0 @@
----
-import Navigation from "./Navigation.astro";
----
-
-  <header>
-    <Navigation />
-  </header>

src/components/Navigation.astro

@@ -1,68 +0,0 @@
----
-import { SITE_TITLE } from "../consts"
-import { ref } from "vue"
-import NavigationUser from "./NavigationUser.vue"
-
-const menuList = ref<
-  {
-    link: string
-    name: string
-  }[]
->([
-  {
-    link: "/archive",
-    name: "目录",
-  },
-  // {
-  //   link: "https://repair.nbtca.space",
-  //   name: "维修",
-  // },
-  {
-    link: "/calendar",
-    name: "日历",
-  },
-  {
-    link: "/about",
-    name: "关于我们",
-  },
-  {
-    link: "/join-us",
-    name: "加入我们",
-  },
-]);
----
-
-<nav class="nav">
-  <div class="nav-wrapper">
-    <div class="nav-content-wrapper">
-      <div class="flex items-center justify-between">
-        <a href="/" class="nav-title flex items-center gap-3">
-          <img
-            src="https://oss.nbtca.space/CA-logo.svg"
-            alt=""
-            style="width: 32px; aspect-ratio: 1;"
-          />
-          <span class="hidden md:block">
-            {SITE_TITLE}
-          </span>
-        </a>
-        <div class="flex items-center">
-          {
-            menuList.value.map(menu => (
-              <div class="px-3 lg:px-4">
-                <a
-                  href={menu.link}
-                  class="nav-item-content hover:text-[#2997ff] text-nowrap"
-                >
-                  {menu.name}
-                </a>
-              </div>
-            ))
-          }
-          <div class="hidden lg:bock h-4 w-[0.5px] bg-gray-300 ml-1 mr-3"></div>
-          <NavigationUser client:load />
-        </div>
-      </div>
-    </div>
-  </div>
-</nav>

src/components/header/BaseHead.astro

@@ -1,9 +1,9 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import "../styles/global.css"
+import "../../styles/global.css"
 const { title, description, image = "/preview.png" } = Astro.props
-import { SITE_URL } from "../consts"
+import { SITE_URL } from "../../consts"
 const { pathname } = Astro.url;
 ---
 

src/components/header/Header.astro

@@ -0,0 +1,11 @@
+---
+import HeaderNavigation from "./HeaderNavigation"
+---
+
+<nav class="nav">
+  <div class="flex items-center justify-center">
+    <div class="max-w-[1005px] w-full">
+      <HeaderNavigation client:load />
+    </div>
+  </div>
+</nav>

src/components/header/HeaderNavigation.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link } from "@nextui-org/react"
+import { SITE_TITLE } from "../../consts"
+
+export default function App() {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
+
+  const menuItems = [
+    {
+      link: "/archive",
+      name: "目录",
+    },
+    {
+      link: "/calendar",
+      name: "日历",
+    },
+    {
+      link: "/about",
+      name: "关于我们",
+    },
+    {
+      link: "/join-us",
+      name: "加入我们",
+    },
+  ]
+
+  return (
+    <Navbar onMenuOpenChange={setIsMenuOpen} height="48px">
+      <NavbarContent className="flex justify-between items-center">
+        <NavbarBrand className="flex gap-4" onClick={() => window.location.href = "/"}>
+          <img
+            src="https://oss.nbtca.space/CA-logo.svg"
+            alt=""
+            className="w-8 aspect-square"
+          />
+          <span className="text-lg text-[#1d1d1f]">
+            {SITE_TITLE}
+          </span>
+        </NavbarBrand>
+        <NavbarContent className="hidden sm:flex gap-4" justify="center">
+          {
+            menuItems.map(item => (
+              <NavbarItem key={item.name}>
+                <Link color="foreground" className="nav-item-content hover:text-[#2997ff] text-nowrap" href={item.link}>
+                  {item.name}
+                </Link>
+              </NavbarItem>
+            ))
+          }
+        </NavbarContent>
+
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+          style={{ marginTop: "0" }}
+        />
+      </NavbarContent>
+
+      <NavbarMenu>
+        {menuItems.map((item, index) => (
+          <NavbarMenuItem key={`${item}-${index}`}>
+            <Link
+              color={
+                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
+              }
+              className="w-full py-1 font-bold"
+              href={item.link}
+              size="lg"
+            >
+              {item.name}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  )
+}

src/components/header/NavigationUser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { makeLogtoClient } from "../utils/auth"
+import { makeLogtoClient } from "../../utils/auth"
 import { onMounted, ref } from "vue"
 import type { IdTokenClaims } from "@logto/browser"
 import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"

src/layouts/BaseLayout.astro

@@ -1,6 +1,6 @@
 ---
-import BaseHead from "../components/BaseHead.astro"
-import Header from "../components/Header.astro"
+import BaseHead from "../components/header/BaseHead.astro"
+import Header from "../components/header/Header.astro"
 import Footer from "../components/Footer.astro"
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts"
 const { primaryTitle } = Astro.props

src/layouts/MarkdownPost.astro

@@ -1,6 +1,6 @@
 ---
-import BaseHead from "../components/BaseHead.astro"
-import Header from "../components/Header.astro"
+import BaseHead from "../components/header/BaseHead.astro"
+import Header from "../components/header/Header.astro"
 import Footer from "../components/Footer.astro"
 
 import { formatDate } from "../utils"
@@ -43,7 +43,7 @@ const dateFormatted = formatDate(pubDate)
                   <div class="category-eyebrow">
                     <span class="category-eyebrow__category category_original">{type}
                     </span
-                  >
+                    >
                     <span class="category-eyebrow__date">{dateFormatted}</span>
                   </div>
                 </div>
@@ -65,14 +65,14 @@ const dateFormatted = formatDate(pubDate)
               <div class:list={["tags-sheet component"]}>
                 <div class="component-content">
                   {
-                  frontmatter.tags?.map((tag) => {
-                    return (
-                      <a href={`/tags/${tag}`} class="tag">
-                        {tag}
-                      </a>
-                    )
-                  })
-                }
+                    frontmatter.tags?.map((tag) => {
+                      return (
+                        <a href={`/tags/${tag}`} class="tag">
+                          {tag}
+                        </a>
+                      )
+                    })
+                  }
                 </div>
               </div>
             </div>
@@ -86,7 +86,7 @@ const dateFormatted = formatDate(pubDate)
                     target="_blank"
                   >版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
                   </a
-                >
+                  >
                   <p class="content">
                     作者： {frontmatter.author} 发表日期：{dateFormatted}
                   </p>
@@ -98,7 +98,7 @@ const dateFormatted = formatDate(pubDate)
       </main>
       <Footer />
       <script is:inline>
-      var script = document.createElement("script")
+      const script = document.createElement("script")
       script.src = "/static/js/initPost.js"
       document.head.appendChild(script)
       </script>

src/pages/graduation/generate.astro

@@ -1,7 +1,7 @@
 ---
 import GenerateQR from "./GenerateQR.vue"
 import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts"
-import BaseHead from "../../components/BaseHead.astro"
+import BaseHead from "../../components/header/BaseHead.astro"
 
 const { primaryTitle } = Astro.props
 const title = primaryTitle ? `${primaryTitle}  -  ${SITE_TITLE}` : SITE_TITLE;

src/styles/global.css

@@ -247,10 +247,10 @@ ol + * {
   margin-top: 0.8em;
 }
 
-ul,
+/* ul,
 ol {
   margin-left: 1.17647em;
-}
+} */
 
 ul ul,
 ul ol,