5f4d9bf789
AppShell showed the sidebar only on the project list and overview, so it disappeared on the building structure page and in the circuit list editor. It is collapsible, so it now stays on every page. Only the print view, a stand-alone document opened in its own tab and printed as PDF, keeps the full width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import { Sidebar } from "./Sidebar";
|
|
|
|
// Every page shows the (collapsible) sidebar except the print view, which is
|
|
// a stand-alone document opened in its own tab and printed as PDF.
|
|
const PRINT_VIEW_PATTERN = /^\/projects\/[^/]+\/print(\/|$)/;
|
|
const SIDEBAR_COLLAPSED_STORAGE_KEY = "leistungsbilanz:sidebar-collapsed";
|
|
|
|
export function AppShell({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
const showSidebar = !PRINT_VIEW_PATTERN.test(pathname ?? "");
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsSidebarCollapsed(window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === "1");
|
|
}, []);
|
|
|
|
function toggleSidebarCollapsed() {
|
|
setIsSidebarCollapsed((current) => {
|
|
const next = !current;
|
|
window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, next ? "1" : "0");
|
|
return next;
|
|
});
|
|
}
|
|
|
|
if (!showSidebar) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<div className={isSidebarCollapsed ? "app-shell app-shell-collapsed" : "app-shell"}>
|
|
<Sidebar isCollapsed={isSidebarCollapsed} onToggleCollapsed={toggleSidebarCollapsed} />
|
|
<div className="app-shell-content">{children}</div>
|
|
</div>
|
|
);
|
|
}
|