fix(docs): mobile nav drawer and version dropdown state
Build & Push Docker Image / build (push) Successful in 2m30s
Build & Push Docker Image / build (push) Successful in 2m30s
- 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
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user