+17

src/assets/hamburger.svg

reviewed

··· 1 1 + <svg 2 2 + xmlns="http://www.w3.org/2000/svg" 3 3 + width="24" 4 4 + height="24" 5 5 + viewBox="0 0 24 24" 6 6 + fill="none" 7 7 + stroke="currentColor" 8 8 + stroke-width="2" 9 9 + stroke-linecap="round" 10 10 + stroke-linejoin="round" 11 11 + class="lucide lucide-menu-icon lucide-menu" 12 12 + > 13 13 + <title>Menu</title> 14 14 + <path d="M4 12h16" /> 15 15 + <path d="M4 18h16" /> 16 16 + <path d="M4 6h16" /> 17 17 + </svg>

+17 -1

src/components/navigation/Nav.astro

reviewed

··· 1 1 --- 2 2 import type { nav } from "@/content/config"; 3 3 import { getEntry } from "astro:content"; 4 4 + 4 5 import Sidebar from "./Sidebar.astro"; 6 6 + import Hamburger from "@/assets/hamburger.svg"; 5 7 6 8 const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? []; 7 9 --- ··· 53 55 } 54 56 </ul> 55 57 56 56 - <button class="mobile" popovertarget="sidebar">pop</button> 58 58 + <button class="mobile" popovertarget="sidebar"><Hamburger /></button> 57 59 58 60 <Sidebar /> 59 61 </nav> ··· 152 154 margin-right: auto; 153 155 font-size: 1.5rem; 154 156 white-space: nowrap; 157 157 + } 158 158 + 159 159 + button:has(svg) { 160 160 + padding: 0; 161 161 + border: none; 162 162 + background-color: transparent; 163 163 + 164 164 + width: 2em; 165 165 + height: 2em; 166 166 + 167 167 + & svg { 168 168 + width: 100%; 169 169 + height: 100%; 170 170 + } 155 171 } 156 172 157 173 .mobile {