Commit 8937a3d
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>