From a241448e9e35b66125964eb68f426908dc99f399 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Mon, 13 Jul 2026 19:02:09 +0200
Subject: [PATCH] Revert admin sidebar toggle, fix hamburger position directly

---
 src/app/admin/layout.tsx                      |  7 +--
 src/components/admin/admin-sidebar-toggle.tsx | 47 -------------------
 src/components/mobile-nav.tsx                 |  2 +-
 src/components/navigation.tsx                 |  4 +-
 4 files changed, 4 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/admin/admin-sidebar-toggle.tsx

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index d9aa1189..267902d8 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -3,7 +3,6 @@ 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";
@@ -165,9 +164,7 @@ 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)]">
-      <AdminSidebarToggle>
-        <Sidebar staff={staff} />
-      </AdminSidebarToggle>
+      <Sidebar staff={staff} />
       <div className="flex flex-col min-w-0 p-5 lg:p-6">
         <Topbar staff={staff} />
         <section className="admin-page flex-1">{children}</section>
@@ -182,7 +179,7 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
   const navGroups = getNavGroups(t);
 
   return (
-    <aside className="h-full bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
+    <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">
       <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
deleted file mode 100644
index 953b529f..00000000
--- a/src/components/admin/admin-sidebar-toggle.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"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/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 30dacbf9..738077dd 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -17,7 +17,7 @@ export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Clo
       <button
         type="button"
         onClick={() => setOpen(!open)}
-        className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150"
+        className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
         style={{ color: "var(--color-navbar-text-readable, var(--color-navbar-text))" }}
         aria-expanded={open}
         aria-controls="mobile-menu"
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index bca1be86..2d22ddae 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -34,8 +34,7 @@ export async function Navigation() {
           </Link>
         </div>
 
-        <div className="ml-auto flex md:hidden">
-          <MobileNav menuLabel={t("openMenu") || "Open menu"} closeLabel={t("closeMenu") || "Close menu"}>
+        <MobileNav menuLabel={t("openMenu") || "Open menu"} closeLabel={t("closeMenu") || "Close menu"}>
           <Link href="/" className="nav-item md:hidden" role="menuitem">
             <Image
               src="/assets/images/icons/navigation/me.png"
@@ -163,7 +162,6 @@ export async function Navigation() {
             <ThemeSwitcher />
           </div>
         </MobileNav>
-        </div>
 
         <div className="ml-auto flex items-center gap-x-1 hidden md:flex">
           <LanguageSwitcher />