From 570f1bacff8f824a3945f5c364b082915e6a1348 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sun, 8 Nov 2026 00:48:43 +0100
Subject: [PATCH 1/4] feat: add own mobile header menu

---
 frontend/app/components/Header/Header.tsx     |  9 +-
 .../MobileHeaderMenu/MobileHeaderMenu.tsx     | 86 +++++++++++++++++++
 frontend/app/components/ui/DarkModeToggle.tsx | 33 ++++++-
 3 files changed, 121 insertions(+), 7 deletions(-)
 create mode 100644 frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx

diff --git a/frontend/app/components/Header/Header.tsx b/frontend/app/components/Header/Header.tsx
index 1826663..17818c0 100644
--- a/frontend/app/components/Header/Header.tsx
+++ b/frontend/app/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import { Link } from "react-router";
 import { authClient } from "~/api/auth";
+import { MobileHeaderMenu } from "~/components/MobileHeaderMenu/MobileHeaderMenu";
 import { Button, buttonVariants } from "~/components/ui/Button";
 import { DarkModeToggle } from "~/components/ui/DarkModeToggle";
 import { cn } from "~/lib/utils";
@@ -14,7 +15,7 @@ function Header() {
           <h1 className="m-0 text-2xl">Readr</h1>
         </Link>
 
-        <nav aria-label="Main">
+        <nav aria-label="Main" className="hidden md:block">
           <Link to="/" className={buttonVariants({ variant: "ghost" })}>
             Home
           </Link>
@@ -32,8 +33,10 @@ function Header() {
         </nav>
       </section>
 
-      <div className="flex items-center gap-4">
-        <DarkModeToggle />
+      <MobileHeaderMenu />
+
+      <div className="hidden md:flex items-center gap-4">
+        <DarkModeToggle variant="button" />
         {!isPending && session ? (
           <>
             <Link
diff --git a/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx b/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
new file mode 100644
index 0000000..ff9f26e
--- /dev/null
+++ b/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
@@ -0,0 +1,86 @@
+import {
+  BookIcon,
+  HomeIcon,
+  LogInIcon,
+  LogOutIcon,
+  MenuIcon,
+  StarIcon,
+} from "lucide-react";
+import { Link } from "react-router";
+import { authClient } from "~/api/auth";
+import { Button } from "~/components/ui/Button";
+import { DarkModeToggle } from "~/components/ui/DarkModeToggle";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/DropdownMenu";
+
+function MobileHeaderMenu() {
+  const { data: session, isPending } = authClient.useSession();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="outline"
+            size="icon"
+            className="md:hidden"
+            aria-label="Open menu"
+          >
+            <MenuIcon />
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem render={<Link to="/" />}>
+          <HomeIcon />
+          Home
+        </DropdownMenuItem>
+        <DropdownMenuItem render={<Link to="/books" />}>
+          <BookIcon />
+          Books
+        </DropdownMenuItem>
+        {!isPending && session && (
+          <DropdownMenuItem render={<Link to="/profile" />}>
+            <StarIcon />
+            Favorites
+          </DropdownMenuItem>
+        )}
+        <DarkModeToggle variant="dropdownMenu" />
+        <DropdownMenuSeparator />
+        {!isPending && session ? (
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>
+              Signed in as {session.user.name}
+            </DropdownMenuLabel>
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={() => {
+                void (async () => {
+                  await authClient.signOut();
+                  location.reload();
+                })();
+              }}
+            >
+              <LogOutIcon />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        ) : (
+          <DropdownMenuItem render={<Link to="/login" />}>
+            <LogInIcon />
+            Log in
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export { MobileHeaderMenu };
diff --git a/frontend/app/components/ui/DarkModeToggle.tsx b/frontend/app/components/ui/DarkModeToggle.tsx
index 5f2564a..d782735 100644
--- a/frontend/app/components/ui/DarkModeToggle.tsx
+++ b/frontend/app/components/ui/DarkModeToggle.tsx
@@ -1,23 +1,48 @@
-import { Moon, Sun } from "lucide-react";
+import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
 import { Button } from "~/components/ui/Button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "~/components/ui/DropdownMenu";
 import { useTheme } from "~/lib/themeProvider";
 
-function DarkModeToggle() {
+function DarkModeToggle({ variant }: { variant: "button" | "dropdownMenu" }) {
   const { setTheme } = useTheme();
 
+  if (variant === "dropdownMenu") {
+    return (
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <SunMoonIcon />
+          Theme
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem onClick={() => setTheme("light")}>
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("dark")}>
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("system")}>
+            System
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    );
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
         render={
           <Button variant="outline" size="icon">
-            <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-            <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+            <SunIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+            <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
             <span className="sr-only">Toggle theme</span>
           </Button>
         }

From db686a9f47877f3304bd89736d0ec0f8231a53c3 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sun, 8 Nov 2026 00:52:49 +0100
Subject: [PATCH 2/4] chore: fix eslint warnings in Field and Toast shadcn
 components

---
 frontend/app/components/ui/Field.tsx | 2 ++
 frontend/app/components/ui/Toast.tsx | 8 ++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/ui/Field.tsx b/frontend/app/components/ui/Field.tsx
index 63ab54c..8a35190 100644
--- a/frontend/app/components/ui/Field.tsx
+++ b/frontend/app/components/ui/Field.tsx
@@ -200,6 +200,8 @@ function FieldError({
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error, index) =>
+            // We do not have any other data available to use as a key
+            // eslint-disable-next-line @eslint-react/no-array-index-key
             error?.message && <li key={index}>{error.message}</li>,
         )}
       </ul>
diff --git a/frontend/app/components/ui/Toast.tsx b/frontend/app/components/ui/Toast.tsx
index ea24dfe..ab58dec 100644
--- a/frontend/app/components/ui/Toast.tsx
+++ b/frontend/app/components/ui/Toast.tsx
@@ -98,9 +98,11 @@ function ToastDescription({
   );
 }
 
+const defaultToastActionRender = <Button variant="outline" size="sm" />;
+
 function ToastAction({
   className,
-  render = <Button variant="outline" size="sm" />,
+  render = defaultToastActionRender,
   ...props
 }: ToastPrimitive.Action.Props) {
   return (
@@ -113,10 +115,12 @@ function ToastAction({
   );
 }
 
+const defaultToastCloseRender = <Button variant="ghost" size="icon-sm" />;
+
 function ToastClose({
   className,
   children,
-  render = <Button variant="ghost" size="icon-sm" />,
+  render = defaultToastCloseRender,
   ...props
 }: ToastPrimitive.Close.Props) {
   return (

From 297b599f982dac3fed29f34b7072e95346aadf15 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sun, 8 Nov 2026 16:16:24 +0100
Subject: [PATCH 3/4] fix: hide whole mobile dropdown menu when changing screen
 size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Henrik Strøm-Andersen <hestro@stud.ntnu.no>
---
 frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx b/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
index ff9f26e..661901c 100644
--- a/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
+++ b/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
@@ -37,7 +37,7 @@ function MobileHeaderMenu() {
           </Button>
         }
       />
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="end" className="md:hidden">
         <DropdownMenuItem render={<Link to="/" />}>
           <HomeIcon />
           Home

From a7139778b5f9977d7707d9b21d3679e74fcd5316 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sun, 8 Nov 2026 16:18:27 +0100
Subject: [PATCH 4/4] feat: add profile button to mobile header menu

---
 .../app/components/MobileHeaderMenu/MobileHeaderMenu.tsx     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx b/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
index 661901c..5acb81d 100644
--- a/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
+++ b/frontend/app/components/MobileHeaderMenu/MobileHeaderMenu.tsx
@@ -5,6 +5,7 @@ import {
   LogOutIcon,
   MenuIcon,
   StarIcon,
+  UserIcon,
 } from "lucide-react";
 import { Link } from "react-router";
 import { authClient } from "~/api/auth";
@@ -59,6 +60,10 @@ function MobileHeaderMenu() {
             <DropdownMenuLabel>
               Signed in as {session.user.name}
             </DropdownMenuLabel>
+            <DropdownMenuItem render={<Link to="/profile" />}>
+              <UserIcon />
+              Profile
+            </DropdownMenuItem>
             <DropdownMenuItem
               variant="destructive"
               onClick={() => {