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;
   }