Adds notes to mobile menu

src/components/Header.astro

@@ -1,6 +1,9 @@
 ---
 import HeaderLink from './HeaderLink.astro';
 import Blazestar from './Blazestar.astro';
+import NoteHierarchy from './NoteHierarchy.astro';
+import NotesLinks from './NotesLinks.astro';
+import NotchedBox from './NotchedBox.astro';
 ---
 
 <header>
@@ -10,6 +13,17 @@ import Blazestar from './Blazestar.astro';
 			<HeaderLink href="/">Home</HeaderLink>
 			<HeaderLink href="/blog">Blog</HeaderLink>
 			<HeaderLink href="/about">About</HeaderLink>
+      <div class="notes-menu">
+        <label for="notes-menu-checkbox">
+          <HeaderLink>Notes</HeaderLink>
+        </label>
+        <input type="checkbox" id="notes-menu-checkbox" name="notes-menu-checkbox"/>
+        <div class="notes-menu-tree" id="notes">
+          <NotchedBox fillNotches="left">
+              <NoteHierarchy prefix="/notes" />
+          </NotchedBox>
+        </div>
+      </div>
 		</div>
 		<div class="social-links">
 			<a href="https://m.webtoo.ls/@astro" target="_blank">
@@ -88,6 +102,42 @@ import Blazestar from './Blazestar.astro';
     }
 	}
 
+  .internal-links {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  #notes-menu-checkbox {
+    display: none;
+
+    &:checked ~ #notes {
+      display: flex;
+    }
+  }
+
+  .notes-menu-tree {
+    display: none;
+    position: fixed;
+    overflow: scroll;
+    z-index: 10;
+    flex-direction: column;
+    margin-top: -4px;
+
+    a {
+      color: var(--color-light-text);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--color-accent);
+      }
+
+      &.active {
+        text-decoration: none;
+      }
+    }
+  }
+
   .h-card {
     display: none;
   }

src/components/NotchedBox.astro

@@ -17,7 +17,7 @@ const { fillNotches = "none", color = "gold" } = Astro.props;
 <style>
 .container {
   height: 100%;
-  width: 100%;
+  width: calc(100% - 2px);
   padding: 1px;
   background-color: var(--color-gold);
 }

src/components/NoteHierarchy.astro

@@ -1,12 +1,17 @@
 ---
 import { type Hierarchy } from "../lib/hierarchy.ts";
+import { makeHierarchy } from '../lib/hierarchy';
+import { getCollection } from 'astro:content';
 
 interface Props {
   prefix: string;
-	hierarchy: Hierarchy;
+	hierarchy?: Hierarchy;
 }
 
-const { prefix, hierarchy } = Astro.props;
+const { prefix, hierarchy: maybeHierarchy} = Astro.props;
+
+const hierarchy = maybeHierarchy ?? makeHierarchy((await getCollection('notes')).map(note => [note.id, note.data.title]));
+
 
 const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '/');
 

src/components/NotesLinks.astro

@@ -1,20 +1,14 @@
 ---
-import { makeHierarchy } from '../lib/hierarchy';
-import { getCollection } from 'astro:content';
 import NotchedBox from './NotchedBox.astro';
 import NoteHierarchy from './NoteHierarchy.astro';
 
-const notes = await getCollection('notes');
-
-const hierarchy = makeHierarchy(notes.map(note => [note.id, note.data.title]));
-
 const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
 const isActive = pathname.startsWith("notes");
 ---
 <NotchedBox fillNotches={isActive ? 'left' : 'none'}>
   <div class="notes-header">Notes</div>
   <div class="note-links">
-    <NoteHierarchy prefix="/notes" hierarchy={hierarchy} />
+    <NoteHierarchy prefix="/notes" />
   </div>
 </NotchedBox>
 

src/lib/hierarchy.ts

@@ -3,7 +3,7 @@ export interface HierarchyNode {
   title: string | null;
   children: Hierarchy | null;
 }
-type Hierarchy = Record<string, HierarchyNode>;
+export type Hierarchy = Record<string, HierarchyNode>;
 
 function addToHierarchy(
   tree: Hierarchy,