Skip to content

Commit 3025300

Browse files
ryuheechulryuheechul
committed
Add SideNavs
1 parent 5310681 commit 3025300

File tree

4 files changed

+77
-9
lines changed

4 files changed

+77
-9
lines changed

‎src/components/app/Header.astro‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
---
22
import HeaderLink from './HeaderLink.astro';
3+
import LinkToHome from './LinkToHome.astro';
4+
5+
const { fillBg } = Astro.props;
36
---
47

5-
<div class="flex flex-row items-center">
6-
<a href="/" class="flex items-center">
7-
<div class="i-bi-0-square text-yellow-500 text-xl"></div>
8-
<div class="i-bi-1-square-fill text-yellow-400 text-xl mr-1"></div>
9-
<h1 class="text-lg font-medium">Bizarre Binary</h1>
10-
</a>
11-
<div class="mx-3"></div>
8+
<div
9+
class:list={[
10+
'py-3',
11+
'flex',
12+
'flex-row',
13+
'items-center',
14+
'lg:ml--48',
15+
'xl:ml--60',
16+
{ 'bg-white': fillBg },
17+
]}
18+
>
19+
<div class="w-48 xl:w-60">
20+
<LinkToHome />
21+
</div>
22+
<div class="mx-3 lg:hidden"></div>
1223
<nav>
1324
<section class="">
1425
<ul class="unset flex gap-4 [&>li]:p-0">

‎src/components/app/LinkToHome.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
---
3+
4+
<a href="/" class="flex items-center">
5+
<div class="i-bi-0-square text-yellow-500 text-xl"></div>
6+
<div class="i-bi-1-square-fill text-yellow-400 text-xl mr-1"></div>
7+
<h1 class="text-lg font-medium">Bizarre Binary</h1>
8+
</a>

‎src/components/app/SideNavs.astro‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
import LinkToHome from './LinkToHome.astro';
3+
const path = Astro.url.pathname.replace(/\/$/, '');
4+
5+
const allToys = await Astro.glob('../../pages/toys/*.mdx');
6+
7+
const pathMatchesUrl = (url: string) => {
8+
let sanitized = url;
9+
10+
if (url.endsWith('/')) {
11+
sanitized = url.slice(0, -1);
12+
}
13+
return path.startsWith(sanitized);
14+
};
15+
---
16+
17+
<!-- -z-10 is important to be not blocking interactivity on the main components as this components expands to full screen -->
18+
<aside class="fixed top-0 left-0 h-full w-full flex lt-lg:hidden -z-10">
19+
<div class="flex-1 flex">
20+
<div class="grow"></div>
21+
<!-- main -->
22+
<div class="w-48 xl:w-60 text-gray-500">
23+
<!-- "invisible" to act as a place holder while the real one is coming from ./Header.astro -->
24+
<header class="py-2.5 sticky top-0 w-full invisible">
25+
<LinkToHome />
26+
</header>
27+
<!-- safe list class="text-gray-800" -->
28+
<div class="px-3">
29+
<h2 class="mt-10 my-2 font-bold text-gray-500">Toys</h2>
30+
<ul class="text-sm">
31+
{
32+
allToys.map((toy) => (
33+
<li class="truncate">
34+
<a href={toy.url} class={toy.url && pathMatchesUrl(toy.url) ? 'text-gray-800' : ''}>
35+
{toy.frontmatter.title}
36+
</a>
37+
</li>
38+
))
39+
}
40+
</ul>
41+
</div>
42+
</div>
43+
</div>
44+
<!-- place holder to represent the actual content-->
45+
<div class="w-prose"></div>
46+
<div class="flex-1"></div>
47+
</aside>

‎src/layouts/Layout.astro‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import Header from '../components/app/Header.astro';
3+
import SideNavs from '../components/app/SideNavs.astro';
34
import GATag from '../components/app/GATag.astro';
45
import PWA from '../components/app/PWA.astro';
56
import GlobalStyle from '../components/app/GlobalStyle.astro';
@@ -32,9 +33,10 @@ const description = titleFromProps ? `${defaultTitle} - ${title}` : title;
3233
<PWA />
3334
</head>
3435
<body class="m-auto max-w-prose px-2 md:px-0 flex flex-col [min-height:100svh]">
35-
<header class="py-3 sticky z-20 top-0 bg-white">
36-
<Header />
36+
<header class="sticky z-20 top-0">
37+
<Header fillBg={true} />
3738
</header>
39+
<SideNavs />
3840
<main>
3941
<slot />
4042
</main>

0 commit comments

Comments
 (0)