✨ 重构 & 封装 Navbar 组件

Skywt2003 · May 20, 2024 · 6b27ccb · 6b27ccb
1 parent 6a9ca91
commit 6b27ccb
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 77 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -5,21 +5,21 @@ import Menu from "@components/menu/Menu.astro";
 import Path from "@components/Path.astro";
 
 interface Props {
-  items: MenuItem[];
-  path: PathItem[];
+  menuItems: MenuItem[];
+  pathItems: PathItem[];
 }
 
-const { items, path } = Astro.props;
+const { menuItems, pathItems } = Astro.props;
 ---
 
 <footer class="mt-16 py-8 text-secondary">
   <div class="container container--wide text-sm">
     <div class="flex justify-between flex-wrap">
       <div class="m-2">
-        <Path path={path} />
+        <Path items={pathItems} />
       </div>
       <div class="m-2">
-        <Menu showIcon={false} items={items} />
+        <Menu showIcon={false} items={menuItems} />
       </div>
     </div>
     <hr class="my-4" />

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,80 +1,19 @@
 ---
-import Menu from "@components/menu/Menu.astro";
 import Path from "@components/Path.astro";
+import Navbar from "./Navbar.astro";
 
 interface Props {
-  items: MenuItem[];
-  path: PathItem[];
+  pathItems: PathItem[];
+  menuItems: MenuItem[];
 }
 
-const { items, path = [] } = Astro.props;
+const { pathItems, menuItems } = Astro.props;
 ---
 
 <header class="mt-12 container container--wide">
   <h5 class="mt-4 mx-4 text-secondary sm:hidden text-center">
-    <Path path={path} />
+    <Path items={pathItems} />
   </h5>
 </header>
 
-<nav
-  class="py-2 font-thin sticky top-0 backdrop-blur-md z-10 transition-all"
-  id="navbar-wrapper"
->
-  <div
-    class="container container--wide flex justify-center sm:justify-between flex-wrap"
-  >
-    <h5 class="m-2 hidden sm:block text-secondary">
-      <Path path={path} />
-    </h5>
-    <div class="m-2 text-secondary">
-      <Menu items={items} />
-    </div>
-  </div>
-</nav>
-
-<script is:inline>
-  // 使用 ViewTransition 后，所有 DOM 操作的 js 都有一堆问题
-  // 这里用了极不优雅的 var，有待改进
-  var observer;
-  function addNavObserver() {
-    const headerEl = document.querySelector("#navbar-wrapper");
-    const sentinalEl = document.querySelector("header");
-    if (!sentinalEl || !headerEl) return;
-    observer = new window.IntersectionObserver((e) => {
-      if (!e[0].isIntersecting) {
-        headerEl.classList.add("sticked");
-      } else {
-        headerEl.classList.remove("sticked");
-      }
-    });
-    observer.observe(sentinalEl);
-  }
-
-  function removeNavObserver() {
-    if (observer) observer.disconnect();
-    observer = null;
-  }
-
-  document.addEventListener(
-    "astro:page-load",
-    () => {
-      addNavObserver();
-    },
-    { once: false },
-  );
-
-  document.addEventListener(
-    "astro:before-swap",
-    () => {
-      removeNavObserver();
-    },
-    { once: false },
-  );
-</script>
-
-<style lang="scss">
-  .sticked {
-    @apply bg-white bg-opacity-50 dark:bg-neutral-800 dark:bg-opacity-50;
-    @apply shadow-lg;
-  }
-</style>
+<Navbar pathItems={pathItems} menuItems={menuItems} />
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -0,0 +1,64 @@
+---
+import Path from "./Path.astro";
+import Menu from "./menu/Menu.astro";
+
+interface Props {
+  pathItems: PathItem[];
+  menuItems: MenuItem[];
+  hidden?: boolean;
+}
+
+const { pathItems, menuItems, hidden = false } = Astro.props;
+---
+
+<div id="navbar-sentinal"></div>
+<nav class:list={["navbar", { "navbar--hidden": hidden }]} id="navbar-wrapper">
+  <div class="navbar__content">
+    <h5 class="navbar__path">
+      <Path items={pathItems} />
+    </h5>
+    <div class="navbar__menu">
+      <Menu items={menuItems} />
+    </div>
+  </div>
+</nav>
+
+<script is:inline>
+  // 使用 ViewTransition 后，所有 DOM 操作的 js 都有一堆问题
+  // 这里用了极不优雅的 var，有待改进
+  var observer;
+  function addNavObserver() {
+    const headerEl = document.querySelector("#navbar-wrapper");
+    const sentinalEl = document.querySelector("#navbar-sentinal");
+    if (!sentinalEl || !headerEl) return;
+    observer = new window.IntersectionObserver((e) => {
+      if (!e[0].isIntersectin && e[0].boundingClientRect.top <= 0) {
+        headerEl.classList.add("navbar--sticked");
+      } else {
+        headerEl.classList.remove("navbar--sticked");
+      }
+    });
+    observer.observe(sentinalEl);
+  }
+
+  function removeNavObserver() {
+    if (observer) observer.disconnect();
+    observer = null;
+  }
+
+  document.addEventListener(
+    "astro:page-load",
+    () => {
+      addNavObserver();
+    },
+    { once: false },
+  );
+
+  document.addEventListener(
+    "astro:before-swap",
+    () => {
+      removeNavObserver();
+    },
+    { once: false },
+  );
+</script>
diff --git a/src/components/Path.astro b/src/components/Path.astro
@@ -1,14 +1,14 @@
 ---
 interface Props {
-  path: PathItem[];
+  items: PathItem[];
 }
 
-const { path } = Astro.props;
+const { items } = Astro.props;
 ---
 
 <a href="/" class="link">SkyWT</a>
 {
-  path.map((pathItem) => (
+  items.map((pathItem) => (
     <span>
       /
       {pathItem.url ? (

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -77,8 +77,8 @@ const { title, includeHeader = true, path = [] } = Astro.props;
     <ViewTransitions />
   </head>
   <body>
-    {includeHeader && <Header items={menu_yml.items} path={path} />}
+    {includeHeader && <Header pathItems={path} menuItems={menu_yml.items} />}
     <slot />
-    <Footer items={menu_yml.items} path={path} />
+    <Footer menuItems={menu_yml.items} pathItems={path} />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,6 +6,7 @@ import ProjectsCards from "@components/projects/ProjectsCards.astro";
 import Rating from "@components/Rating.astro";
 import projects_yml from "@configs/projects.yml";
 import menu_yml from "@configs/menu.yml";
+import Navbar from "@components/Navbar.astro";
 ---
 
 <Layout title="SkyWT" includeHeader={false}>
@@ -69,6 +70,8 @@ import menu_yml from "@configs/menu.yml";
 
     <hr class="container" />
 
+    <Navbar pathItems={[]} menuItems={menu_yml.items} hidden={true} />
+
     <section>
       <h2 class="text-center">你好 👋 我是 SkyWT。</h2>
       <Bento />

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -85,6 +85,32 @@ footer {
   @include text-primary;
 }
 
+.navbar {
+  @apply py-2 sticky top-0 backdrop-blur-md z-10 transition-all;
+  @apply font-thin;
+  @include text-secondary;
+  &--hidden {
+    @apply invisible opacity-0;
+  }
+  &--sticked {
+    @apply visible opacity-100;
+    @include bg-front;
+    @apply bg-opacity-50 dark:bg-opacity-50;
+    @apply shadow-lg;
+  }
+
+  &__content {
+    @extend .container, .container--wide;
+    @apply flex justify-center sm:justify-between flex-wrap;
+  }
+  &__path {
+    @apply m-2 hidden sm:block;
+  }
+  &__menu {
+    @apply m-2;
+  }
+}
+
 // 诸如「实验室」这样的页面，显示标题的部分
 .page-heading {
   @include bg-front;