Commit 8937a3d

HPCesia <me@hpcesia.com>
2026-08-10 05:21:56
Header component in BaseLayout
1 parent 0a90c97
Changed files (3)
src
src/components/Header.astro
@@ -0,0 +1,46 @@
+---
+import { SITE_CONFIG } from "@/config.ts";
+import { url } from "@/utils/url.ts";
+---
+<header class="header">
+  <a class="header-home" href={url("/")}>{SITE_CONFIG.title}</a>
+  <nav>
+    <ul>
+      <li><a href={url("/posts")}>Posts</a></li>
+    </ul>
+  </nav>
+</header>
+
+<style lang="scss" is:global>
+header.header {
+  border-bottom: 0.1rem;
+  border-bottom-style: solid;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0.25rem;
+
+  .header-home {
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  nav > ul {
+    display: flex;
+    margin-block: 0;
+
+    > :not(:last-child) {
+      margin-inline-end: 0.25rem;
+    }
+  }
+}
+</style>
src/layouts/BaseLayout.astro
@@ -1,6 +1,8 @@
 ---
 import { SITE_CONFIG } from "@/config";
 
+import Header from "@/components/Header.astro";
+
 import "sanitize.css/sanitize.css";
 import "@/styles/global.scss";
 
@@ -32,6 +34,7 @@ const {
     <meta name="author" content={author} />
   </head>
   <body>
+    <Header />
     <slot />
   </body>
 </html>
src/pages/index.astro
@@ -1,9 +1,6 @@
 ---
-import { url } from "@/utils/url.ts";
-
 import BaseLayout from "@/layouts/BaseLayout.astro";
 ---
 <BaseLayout title="Astro">
   <h1>Astro</h1>
-  <a href={url("/posts")}>Posts</a>
 </BaseLayout>