ui fixes

components/layout/AppShell.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Menu } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { Sidebar } from "@/components/layout/Sidebar";
+import { UtilityControls } from "@/components/layout/UtilityControls";
+import { useI18n } from "@/lib/i18n/useI18n";
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const { t } = useI18n();
+  const pathname = usePathname();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  useEffect(() => {
+    setDrawerOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!drawerOpen) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setDrawerOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+    };
+  }, [drawerOpen]);
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <div className="flex min-h-screen">
+        <Sidebar />
+        <div className="flex min-h-screen flex-1 flex-col">
+          <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-white/10 bg-black/20 px-4 backdrop-blur">
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={() => setDrawerOpen(true)}
+                aria-label={t("common.openMenu")}
+                className="md:hidden rounded-lg border border-white/10 bg-white/5 p-2 text-zinc-300 hover:bg-white/10 hover:text-white"
+              >
+                <Menu className="h-4 w-4" />
+              </button>
+              <div className="text-sm font-semibold tracking-wide md:hidden">
+                {t("sidebar.productTitle")}
+              </div>
+            </div>
+            <UtilityControls />
+          </header>
+          <main className="flex-1">{children}</main>
+        </div>
+      </div>
+
+      {drawerOpen && (
+        <div className="fixed inset-0 z-40 md:hidden" role="dialog" aria-modal="true">
+          <button
+            type="button"
+            className="absolute inset-0 bg-black/70"
+            aria-label={t("common.close")}
+            onClick={() => setDrawerOpen(false)}
+          />
+          <div className="absolute inset-y-0 left-0 flex w-72 max-w-[85vw] flex-col bg-black/40">
+            <Sidebar variant="drawer" onNavigate={() => setDrawerOpen(false)} onClose={() => setDrawerOpen(false)} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/layout/Sidebar.tsx

@@ -3,49 +3,9 @@
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { BarChart3, LayoutGrid, LogOut, Settings, Wrench } from "lucide-react";
+import { BarChart3, LayoutGrid, LogOut, Settings, Wrench, X } from "lucide-react";
 import { useI18n } from "@/lib/i18n/useI18n";
 
-const THEME_COOKIE = "mis_theme";
-
-const SunIcon = ({ className }: { className?: string }) => (
-  <svg
-    className={className}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.6"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-  >
-    <circle cx="12" cy="12" r="4" />
-    <path d="M12 2v2" />
-    <path d="M12 20v2" />
-    <path d="M4.93 4.93l1.41 1.41" />
-    <path d="M17.66 17.66l1.41 1.41" />
-    <path d="M2 12h2" />
-    <path d="M20 12h2" />
-    <path d="M4.93 19.07l1.41-1.41" />
-    <path d="M17.66 6.34l1.41-1.41" />
-  </svg>
-);
-
-const MoonIcon = ({ className }: { className?: string }) => (
-  <svg
-    className={className}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.6"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-  >
-    <path d="M21 12.5A8.5 8.5 0 0 1 11.5 3a8.5 8.5 0 1 0 9.5 9.5z" />
-  </svg>
-);
-
 const items = [
   { href: "/overview", labelKey: "nav.overview", icon: LayoutGrid },
   { href: "/machines", labelKey: "nav.machines", icon: Wrench },
@@ -53,11 +13,16 @@ const items = [
   { href: "/settings", labelKey: "nav.settings", icon: Settings },
 ] as const;
 
-export function Sidebar() {
+type SidebarProps = {
+  variant?: "desktop" | "drawer";
+  onNavigate?: () => void;
+  onClose?: () => void;
+};
+
+export function Sidebar({ variant = "desktop", onNavigate, onClose }: SidebarProps) {
   const pathname = usePathname();
   const router = useRouter();
-  const { locale, setLocale, t } = useI18n();
-  const [theme, setTheme] = useState<"dark" | "light">("dark");
+  const { t } = useI18n();
   const [me, setMe] = useState<{
     user?: { name?: string | null; email?: string | null };
     org?: { name?: string | null };
@@ -83,36 +48,36 @@ export function Sidebar() {
     };
   }, []);
 
-  useEffect(() => {
-    const current = document.documentElement.getAttribute("data-theme");
-    if (current === "light" || current === "dark") {
-      setTheme(current);
-    }
-  }, []);
-
-  function applyTheme(next: "light" | "dark") {
-    document.documentElement.setAttribute("data-theme", next);
-    document.cookie = `${THEME_COOKIE}=${next}; Path=/; Max-Age=31536000; SameSite=Lax`;
-    setTheme(next);
-  }
-
-  function toggleTheme() {
-    applyTheme(theme === "light" ? "dark" : "light");
-  }
-
   async function onLogout() {
     await fetch("/api/logout", { method: "POST" });
     router.push("/login");
     router.refresh();
+    onNavigate?.();
   }
 
   const roleKey = (me?.membership?.role || "MEMBER").toLowerCase();
+  const shellClass = [
+    "relative z-20 flex flex-col border-r border-white/10 bg-black/40",
+    variant === "desktop" ? "hidden md:flex h-screen w-64" : "flex h-full w-72 max-w-[85vw]",
+  ].join(" ");
 
   return (
-    <aside className="relative z-20 hidden md:flex h-screen w-64 flex-col border-r border-white/10 bg-black/40">
-      <div className="px-5 py-4">
-        <div className="text-white font-semibold tracking-wide">{t("sidebar.productTitle")}</div>
-        <div className="text-xs text-zinc-500">{t("sidebar.productSubtitle")}</div>
+    <aside className={shellClass} aria-label={t("sidebar.productTitle")}>
+      <div className="px-5 py-4 flex items-center justify-between gap-3">
+        <div>
+          <div className="text-white font-semibold tracking-wide">{t("sidebar.productTitle")}</div>
+          <div className="text-xs text-zinc-500">{t("sidebar.productSubtitle")}</div>
+        </div>
+        {variant === "drawer" && onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t("common.close")}
+            className="rounded-lg border border-white/10 bg-white/5 p-2 text-zinc-300 hover:bg-white/10 hover:text-white md:hidden"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
       </div>
 
       <nav className="px-3 py-2 flex-1 space-y-1">
@@ -123,6 +88,7 @@ export function Sidebar() {
             <Link
               key={it.href}
               href={it.href}
+              onClick={onNavigate}
               className={[
                 "flex items-center gap-3 rounded-xl px-3 py-2 text-sm transition",
                 active
@@ -149,45 +115,6 @@ export function Sidebar() {
           </div>
         </div>
 
-        <div
-          className="pointer-events-auto flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2"
-          title={t("sidebar.themeTooltip")}
-        >
-          <button
-            type="button"
-            onClick={toggleTheme}
-            aria-label={theme === "light" ? t("sidebar.switchToDark") : t("sidebar.switchToLight")}
-            className="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/30 text-white hover:bg-white/10 transition"
-          >
-            {theme === "light" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
-          </button>
-          <div className="flex items-center gap-2 text-[11px] font-semibold tracking-[0.2em]">
-            <button
-              type="button"
-              onClick={() => {
-                setLocale("en");
-                router.refresh();
-              }}
-              aria-pressed={locale === "en"}
-              className={locale === "en" ? "text-white" : "text-zinc-400 hover:text-white"}
-            >
-              EN
-            </button>
-            <span className="text-zinc-500">|</span>
-            <button
-              type="button"
-              onClick={() => {
-                setLocale("es-MX");
-                router.refresh();
-              }}
-              aria-pressed={locale === "es-MX"}
-              className={locale === "es-MX" ? "text-white" : "text-zinc-400 hover:text-white"}
-            >
-              ES
-            </button>
-          </div>
-        </div>
-
         <button
           onClick={onLogout}
           className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-zinc-200 hover:bg-white/10"

components/layout/UtilityControls.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useI18n } from "@/lib/i18n/useI18n";
+
+const THEME_COOKIE = "mis_theme";
+
+const SunIcon = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2" />
+    <path d="M12 20v2" />
+    <path d="M4.93 4.93l1.41 1.41" />
+    <path d="M17.66 17.66l1.41 1.41" />
+    <path d="M2 12h2" />
+    <path d="M20 12h2" />
+    <path d="M4.93 19.07l1.41-1.41" />
+    <path d="M17.66 6.34l1.41-1.41" />
+  </svg>
+);
+
+const MoonIcon = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M21 12.5A8.5 8.5 0 0 1 11.5 3a8.5 8.5 0 1 0 9.5 9.5z" />
+  </svg>
+);
+
+type UtilityControlsProps = {
+  className?: string;
+};
+
+export function UtilityControls({ className }: UtilityControlsProps) {
+  const router = useRouter();
+  const { locale, setLocale, t } = useI18n();
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+
+  useEffect(() => {
+    const current = document.documentElement.getAttribute("data-theme");
+    if (current === "light" || current === "dark") {
+      setTheme(current);
+    }
+  }, []);
+
+  function applyTheme(next: "light" | "dark") {
+    document.documentElement.setAttribute("data-theme", next);
+    document.cookie = `${THEME_COOKIE}=${next}; Path=/; Max-Age=31536000; SameSite=Lax`;
+    setTheme(next);
+  }
+
+  function toggleTheme() {
+    applyTheme(theme === "light" ? "dark" : "light");
+  }
+
+  function switchLocale(nextLocale: "en" | "es-MX") {
+    setLocale(nextLocale);
+    router.refresh();
+  }
+
+  return (
+    <div
+      className={[
+        "pointer-events-auto flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2",
+        className ?? "",
+      ].join(" ")}
+      title={t("sidebar.themeTooltip")}
+    >
+      <button
+        type="button"
+        onClick={toggleTheme}
+        aria-label={theme === "light" ? t("sidebar.switchToDark") : t("sidebar.switchToLight")}
+        className="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/30 text-white hover:bg-white/10 transition"
+      >
+        {theme === "light" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
+      </button>
+      <div className="flex items-center gap-2 text-[11px] font-semibold tracking-[0.2em]">
+        <button
+          type="button"
+          onClick={() => switchLocale("en")}
+          aria-pressed={locale === "en"}
+          className={locale === "en" ? "text-white" : "text-zinc-400 hover:text-white"}
+        >
+          EN
+        </button>
+        <span className="text-zinc-500">|</span>
+        <button
+          type="button"
+          onClick={() => switchLocale("es-MX")}
+          aria-pressed={locale === "es-MX"}
+          className={locale === "es-MX" ? "text-white" : "text-zinc-400 hover:text-white"}
+        >
+          ES
+        </button>
+      </div>
+    </div>
+  );
+}