✨ More mobile friendly, fix wrong URL, Hamburger menu

- Hamburger menu on mobile
- title is moved into header on mobile
- Smaller titles on mobile
- Fix wrong import of env in config
- Cleaned up unused imports

src/components/UsesPage.astro

@@ -1,5 +1,4 @@
 ---
-import Select from "./Select.svelte"
 import * as m from "@/paraglide/messages"
 import CollapseList from "@/components/collapse/CollapseList.svelte"
 import type { CollectionEntry } from "astro:content"

src/components/header/HamburgerMenuButton.astro

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

src/components/header/Header.astro

@@ -1,7 +1,38 @@
 ---
 import Navbar from "./Navbar.astro"
+import NavbarDrawer from "./NavbarDrawer.astro"
+import HamburgerMenuButton from "./HamburgerMenuButton.astro"
+import { resolvePathname } from "@/utils/linking"
+
+const currentPath = `~${resolvePathname(Astro.originPathname)}`
 ---
 
-<div class="m-auto">
-  <Navbar />
+<div class="sm:m-auto">
+  <div class="drawer drawer-end">
+    <input id="my-drawer-3" 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>
+          <HamburgerMenuButton id="my-drawer-3" />
+        </div>
+        <div class="hidden flex-none sm:block">
+          <Navbar />
+        </div>
+      </div>
+    </div>
+    <div class="drawer-side z-50">
+      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
+      ></label>
+      <ul class="menu bg-cat-base min-h-full w-80 p-4">
+        <li class="text-xl font-bold my-5">
+          {currentPath}
+        </li>
+        <NavbarDrawer />
+      </ul>
+    </div>
+  </div>
 </div>

src/components/header/NavbarDrawer.astro

@@ -0,0 +1,12 @@
+---
+import Links from "../../links"
+import LocaleLink from "../links/LocaleLink.astro"
+---
+
+{
+  Links.map((link) => (
+    <li>
+      <LocaleLink to={link.to}>{link.label}</LocaleLink>
+    </li>
+  ))
+}

src/components/myLinks/LinkCard.astro

@@ -9,7 +9,6 @@ interface Props extends MyLink {
 
 const { title, message, url, icon, class: clazz } = Astro.props
 const iconStyle = "w-6 h-6"
-console.log(icon)
 ---
 
 <ExternalLink href={url} noStyle>

src/components/projects/MyProjectsPage.astro

@@ -1,6 +1,5 @@
 ---
 import ProjectCard from "./ProjectCard.astro"
-import * as m from "@/paraglide/messages"
 import { type CollectionEntry } from "astro:content"
 import { type NavLink } from "@/utils/linking"
 

src/components/projects/ProjectPage.astro

@@ -1,11 +1,11 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import { Image } from "astro:assets"
-import { getEntry, render } from "astro:content"
 import BadgeList from "@/components/badge/BadgeList.astro"
-import * as m from "@/paraglide/messages"
-import { languageTag } from "@/paraglide/runtime"
 import GiteaLink from "@/components/links/GiteaLink.astro"
+import { languageTag } from "@/paraglide/runtime"
+import { getEntry, render } from "astro:content"
+import { Image } from "astro:assets"
+import * as m from "@/paraglide/messages"
 import "@/styles/global.css"
 
 interface Props {
@@ -29,10 +29,10 @@ const {
 ---
 
 <!--TODO day.js / Temporal API for dates?-->
-<Layout title={title} class="mx-auto max-w-[750px]">
+<Layout title={title} class="mx-auto max-w-[750px] px-3">
   <div class="flex justify-between my-2">
     <div>
-      <h1>{title}</h1>
+      <h2>{title}</h2>
       <BadgeList tags={tags} />
     </div>
     <div class="flex flex-col items-end">