✨ Breadcrumbs with navigation for mobile

src/components/header/HamburgerMenuButton.astro

@@ -2,13 +2,13 @@
 import PajamasIcon from "@/components/icons/PajamasIcon.astro"
 
 interface Props {
-  id: string
+  for: string
 }
 
-const { id } = Astro.props
+const { for: forId } = Astro.props
 ---
 
-<label for={id} aria-label="open sidebar" class="btn btn-square btn-ghost">
+<label for={forId} aria-label="open sidebar" class="btn btn-square btn-ghost">
   <PajamasIcon
     name="pajamas:hamburger"
     class="w-6 h-6"

src/components/header/Header.astro

@@ -2,22 +2,24 @@
 import Navbar from "./Navbar.astro"
 import NavbarDrawer from "./NavbarDrawer.astro"
 import HamburgerMenuButton from "./HamburgerMenuButton.astro"
+import Breadcrumb from "../Breadcrumb.astro"
 import { resolvePathname } from "@/utils/linking"
 
 const currentPath = `~${resolvePathname(Astro.originPathname)}`
+const drawerToggleId = "header-drawer"
 ---
 
 <div class="sm:m-auto">
   <div class="drawer drawer-end">
-    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+    <input id={drawerToggleId} type="checkbox" class="drawer-toggle" />
     <div class="drawer-content flex flex-col">
       <!-- Navbar -->
       <div class="navbar w-full justify-end">
         <div class="flex justify-between items-center w-full h-full sm:hidden">
-          <h1 class="!text-2xl h-5">
-            {currentPath}
+          <h1 class="!text-xl h-5">
+            <Breadcrumb />
           </h1>
-          <HamburgerMenuButton id="my-drawer-3" />
+          <HamburgerMenuButton for={drawerToggleId} />
         </div>
         <div class="hidden flex-none sm:block">
           <Navbar />
@@ -25,8 +27,11 @@ const currentPath = `~${resolvePathname(Astro.originPathname)}`
       </div>
     </div>
     <div class="drawer-side z-50">
-      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
-      ></label>
+      <label
+        for={drawerToggleId}
+        aria-label="close sidebar"
+        class="drawer-overlay"></label>
+      <!-- Drawer -->
       <ul class="menu bg-cat-base min-h-full w-80 p-4">
         <li class="text-xl font-bold my-5">
           {currentPath}

src/components/projects/ProjectPage.astro

@@ -31,10 +31,11 @@ const {
 } = entry!.data
 
 function localeDateString(isoString: string): string {
+  let template = "DD-MM-YYYY"
   if (languageTag() === "nb") {
-    return dayjs(isoString).locale(languageTag()).format("DD/MM/YYYY")
+    template = "DD/MM/YYYY"
   }
-  return dayjs(isoString).locale(languageTag()).format("DD-MM-YYYY")
+  return dayjs(isoString).locale(languageTag()).format(template)
 }
 ---