dennis/dnsc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finishes up sidebar

Browse source
This commit is contained in:
Dennis Schoepf 2026-02-19 19:11:18 +01:00
parent a1e8e67b0c
commit 5d4cafe8fb
4 changed files with 68 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/components/Header.astro
View file

@ -1,68 +0,0 @@
---
const { pathname } = Astro.url;
const currentPath =
pathname.endsWith("/") && pathname.length > 1
? pathname.slice(0, -1)
: pathname;
const navItems = [
{ href: "/", label: "About" },
{ href: "/now", label: "Now" },
{ href: "/writing", label: "Writing" },
];
---
<header>
<h1>dnsc</h1>
<ul>
{
navItems.map(({ href, label }) => (
<li>
<a href={href} class={currentPath === href ? "active" : ""}>
{label}
</a>
</li>
))
}
</ul>
</header>
<style>
header {
display: flex;
justify-content: center;
padding: 0.5rem;
flex-wrap: wrap;
max-width: var(--container-lg);
}
h1 {
font-family: var(--font-fancy);
font-size: 1.5rem;
margin-bottom: 0.5rem;
width: 100%;
text-align: center;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
justify-content: center;
padding-left: 0;
margin-bottom: 0.6rem;
}
ul > li {
margin-left: 0.6rem;
margin-right: 0.6rem;
}
a,
a:visited {
color: var(--foreground);
}
a.active {
font-weight: bold;
}
</style>

53
src/components/Sidebar.astro Normal file
View file

@ -0,0 +1,53 @@
---
const { pathname } = Astro.url;
const year = new Date().getFullYear();
const currentPath =
pathname.endsWith("/") && pathname.length > 1
? pathname.slice(0, -1)
: pathname;
const navItems = [
{ href: "/", label: "About" },
{ href: "/now", label: "Now" },
{ href: "/writing", label: "Writing" },
];
---
<aside data-sidebar>
<header>
<h1>dnsc</h1>
</header>
<nav>
<ul>
{
navItems.map(({ href, label }) => (
<li>
<a href={href} class={currentPath === href ? "active" : ""}>
{label}
</a>
</li>
))
}
</ul>
</nav>
<footer>© {year} • <a href="/legal">Legal</a></footer>
</aside>
<style>
h1 {
font-family: var(--font-fancy);
font-size: 1.5rem;
width: 100%;
text-align: center;
margin-bottom: 0;
}
footer {
font-size: 0.8rem;
color: var(--muted-foreground);
}
footer > a {
text-decoration: none;
}
</style>

14
src/layouts/Layout.astro
View file

@ -1,4 +1,6 @@
---
import Sidebar from "../components/Sidebar.astro";
const { title } = Astro.props;
---
@ -15,8 +17,11 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<body data-sidebar-layout>
<Sidebar />
<main data-main-layout>
<slot />
</main>
</body>
</html>
@ -50,4 +55,11 @@ const { title } = Astro.props;
--container-md: 600px;
--container-sm: 480px;
}
[data-main-layout] {
margin-top: 3rem;
padding: 0.5rem;
padding-left: 0;
padding-right: 1rem;
}
</style>

3
src/pages/index.astro
View file

@ -1,10 +1,9 @@
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
---
<Layout title="Home">
<Header />
<h1>Welcome!</h1>
<img src="https://placehold.co/1200x300" />
</Layout>