From 33cf2617774bbe436a7ed879e66d8d4f95ff8165 Mon Sep 17 00:00:00 2001
From: opencode <opencode@kubebase.de>
Date: Tue, 4 Aug 2026 06:58:07 +0200
Subject: [PATCH] fix(docs): mobile nav drawer and version dropdown state

- sidebar was hidden below lg with no replacement; add a Sheet-based
  nav drawer opened from a menu button in the header
- version dropdown stayed on 'aktuell' for /docs/releases/* pages because
  only first-segment versions were parsed; derive header version from the
  releases route too
---
 artifacts/toolrate/src/pages/docs.tsx | 72 ++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 13 deletions(-)

diff --git a/artifacts/toolrate/src/pages/docs.tsx b/artifacts/toolrate/src/pages/docs.tsx
index ccde318..c16ec5c 100644
--- a/artifacts/toolrate/src/pages/docs.tsx
+++ b/artifacts/toolrate/src/pages/docs.tsx
@@ -15,6 +15,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-react";
 import {
   ArrowLeft,
@@ -25,6 +31,7 @@ import {
   GitBranch,
   HelpCircle,
   Library,
+  Menu,
   Search,
   Server,
   Tag,
@@ -782,6 +789,12 @@ export default function Docs() {
   const [location, setLocation] = useLocation();
   const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState("");
+  const [navOpen, setNavOpen] = useState(false);
+
+  // Close the mobile nav drawer after navigating.
+  useEffect(() => {
+    setNavOpen(false);
+  }, [location]);
 
   const { version, path } = useMemo(() => parseDocsPath(location), [location]);
 
@@ -839,6 +852,15 @@ export default function Docs() {
   const section = path[0] ?? "home";
   const param = path[1];
 
+  // Version shown in the header dropdown: an explicit first-segment version
+  // (/docs/vX.Y.Z) or the releases route (/docs/releases/vX.Y.Z).
+  const headerVersion =
+    version !== null
+      ? version
+      : section === "releases" && param
+        ? param
+        : null;
+
   let content: React.ReactNode = null;
 
   if (version !== null && path.length === 0) {
@@ -936,18 +958,42 @@ export default function Docs() {
     <div className="min-h-screen bg-background flex flex-col">
       <header className="border-b bg-card shrink-0">
         <div className="mx-auto max-w-6xl px-4 md:px-6 h-14 flex items-center justify-between gap-3">
-          <Link
-            href="/"
-            className="inline-flex items-center gap-2 text-primary font-bold text-lg min-w-0"
-            data-testid="link-docs-back"
-          >
-            <Wrench className="w-5 h-5 shrink-0" />
-            <span className="truncate">toolr</span>
-            <span className="hidden md:inline-flex items-center gap-1 text-xs font-normal text-muted-foreground border-l pl-2 ml-1">
-              <ArrowLeft className="w-3.5 h-3.5" />
-              {t("docs.backToApp")}
-            </span>
-          </Link>
+          <div className="flex items-center gap-1 min-w-0">
+            <Sheet open={navOpen} onOpenChange={setNavOpen}>
+              <SheetTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="lg:hidden -ml-1 shrink-0"
+                  title={t("docs.nav")}
+                  data-testid="button-docs-nav-mobile"
+                >
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-80 overflow-y-auto p-4">
+                <SheetTitle className="sr-only">{t("docs.nav")}</SheetTitle>
+                <DocsNav
+                  version={version}
+                  handbook={handbook}
+                  reference={reference}
+                  versions={releases ?? []}
+                />
+              </SheetContent>
+            </Sheet>
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 text-primary font-bold text-lg min-w-0"
+              data-testid="link-docs-back"
+            >
+              <Wrench className="w-5 h-5 shrink-0" />
+              <span className="truncate">toolr</span>
+              <span className="hidden md:inline-flex items-center gap-1 text-xs font-normal text-muted-foreground border-l pl-2 ml-1">
+                <ArrowLeft className="w-3.5 h-3.5" />
+                {t("docs.backToApp")}
+              </span>
+            </Link>
+          </div>
           <div className="flex items-center gap-1.5 shrink-0">
             <ThemeToggle />
           </div>
@@ -957,7 +1003,7 @@ export default function Docs() {
       <div className="mx-auto max-w-6xl w-full flex-1 space-y-6 px-4 md:px-6 py-6 pb-12">
         <DocsHeader
           versions={releases ?? []}
-          activeVersion={version}
+          activeVersion={headerVersion}
           onVersionChange={handleVersionChange}
           onSearchChange={showSearch ? setSearchQuery : undefined}
         />