finishes up sidebar
This commit is contained in:
parent
a1e8e67b0c
commit
5d4cafe8fb
4 changed files with 68 additions and 72 deletions
|
|
@ -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
53
src/components/Sidebar.astro
Normal 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>
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
---
|
---
|
||||||
|
import Sidebar from "../components/Sidebar.astro";
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -15,8 +17,11 @@ const { title } = Astro.props;
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body data-sidebar-layout>
|
||||||
<slot />
|
<Sidebar />
|
||||||
|
<main data-main-layout>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
@ -50,4 +55,11 @@ const { title } = Astro.props;
|
||||||
--container-md: 600px;
|
--container-md: 600px;
|
||||||
--container-sm: 480px;
|
--container-sm: 480px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-main-layout] {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Header from "../components/Header.astro";
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Home">
|
<Layout title="Home">
|
||||||
<Header />
|
<h1>Welcome!</h1>
|
||||||
<img src="https://placehold.co/1200x300" />
|
<img src="https://placehold.co/1200x300" />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue