From 53b760a81568429e6255d793a0940e447de75d51 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Mon, 13 Jul 2026 18:52:13 +0200
Subject: [PATCH] Add admin sidebar toggle on mobile, fix table wrapping, fix
 grids

---
 src/app/admin/layout.tsx                      |  7 ++-
 src/components/admin/admin-sidebar-toggle.tsx | 47 +++++++++++++++++++
 src/components/home/guest-view.tsx            |  2 +-
 src/components/navbar-color-picker.tsx        |  4 +-
 src/components/ui/table.tsx                   |  4 +-
 5 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/components/admin/admin-sidebar-toggle.tsx

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 267902d8..d9aa1189 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import { getTranslations } from "next-intl/server";
 import { AdminNavLink } from "@/components/admin/admin-nav-link";
+import { AdminSidebarToggle } from "@/components/admin/admin-sidebar-toggle";
 import { requireStaff } from "@/lib/admin/guard";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -164,7 +165,9 @@ export default async function AdminLayout({ children }: { children: ReactNode })
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--admin-canvas)]">
-      <Sidebar staff={staff} />
+      <AdminSidebarToggle>
+        <Sidebar staff={staff} />
+      </AdminSidebarToggle>
       <div className="flex flex-col min-w-0 p-5 lg:p-6">
         <Topbar staff={staff} />
         <section className="admin-page flex-1">{children}</section>
@@ -179,7 +182,7 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
   const navGroups = getNavGroups(t);
 
   return (
-    <aside className="sticky top-0 self-start h-screen bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
+    <aside className="h-full bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
       <div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
         <span
           className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--admin-accent)] shadow-lg shadow-[var(--admin-accent)]/20"
diff --git a/src/components/admin/admin-sidebar-toggle.tsx b/src/components/admin/admin-sidebar-toggle.tsx
new file mode 100644
index 00000000..953b529f
--- /dev/null
+++ b/src/components/admin/admin-sidebar-toggle.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useState, useEffect, type ReactNode } from "react";
+import { Menu, X } from "lucide-react";
+
+export function AdminSidebarToggle({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="lg:hidden flex items-center justify-center w-9 h-9 rounded-lg transition-colors duration-150 mr-2"
+        style={{ color: "var(--admin-text-muted)" }}
+        aria-label={open ? "Close sidebar" : "Open sidebar"}
+      >
+        {open ? <X size={18} /> : <Menu size={18} />}
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-40 lg:hidden"
+          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+          onClick={() => setOpen(false)}
+        />
+      )}
+
+      <div
+        className={`fixed inset-y-0 left-0 z-50 w-[260px] transform transition-transform duration-300 ease-in-out lg:!translate-x-0 lg:!relative lg:!inset-auto ${
+          open ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/home/guest-view.tsx b/src/components/home/guest-view.tsx
index d3e267b9..3c01feae 100644
--- a/src/components/home/guest-view.tsx
+++ b/src/components/home/guest-view.tsx
@@ -103,7 +103,7 @@ export default async function GuestView() {
             >
               <h2 className="px-3 text-xl font-bold text-white">Recent Users</h2>
             </div>
-            <div className="grid grid-cols-6 gap-4 p-4">
+            <div className="grid grid-cols-4 sm:grid-cols-6 gap-3 p-3">
               {recentUsers.map((u) => (
                 <div
                   key={u.username}
diff --git a/src/components/navbar-color-picker.tsx b/src/components/navbar-color-picker.tsx
index 2390a6b6..9ca1d36b 100644
--- a/src/components/navbar-color-picker.tsx
+++ b/src/components/navbar-color-picker.tsx
@@ -86,14 +86,14 @@ export function NavbarColorPicker() {
       </button>
 
       {mounted && open && (
-        <div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-3 px-2">
+        <div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[180px] sm:min-w-[200px] rounded-xl z-50 py-3 px-2">
           <div
             className="text-xs font-semibold uppercase tracking-wider mb-2 px-2"
             style={{ color: "var(--color-text-muted)" }}
           >
             Navbar kleur
           </div>
-          <div className="grid grid-cols-5 gap-1.5">
+          <div className="grid grid-cols-3 sm:grid-cols-5 gap-1.5">
             {COLORS.map((c, i) => (
               <button
                 key={c.name}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index a7a03b5a..ce5ca121 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -45,7 +45,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className,
       )}
       {...props}
@@ -58,7 +58,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className,
       )}
       {...props}