73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { Navigate, Route, Routes } from "react-router-dom";
|
|
|
|
import { PageSidebar } from "@/components/page-sidebar";
|
|
import { PageSidebarDark } from "@/components/page-sidebar-dark";
|
|
import { readSidebarEnabled } from "@/core/page-layout/sidebar-enabled";
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
|
|
import WorkspaceRoutes from "./WorkspaceRoutes";
|
|
import StrategyRoutes from "./StrategyRoutes";
|
|
import Header from "@/strategy-components/Header";
|
|
import OpenCanvasRoutes from "@/open-canvas/routes/OpenCanvasRoutes";
|
|
import RoundtableRoutes from "./RoundtableRoutes";
|
|
|
|
function PageLayout() {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const sidebarEnabled = useMemo(() => readSidebarEnabled(), []);
|
|
const { theme } = useTheme();
|
|
const isDark = theme === "dark";
|
|
|
|
return (
|
|
<div className="h-screen flex flex-col bg-muted/20">
|
|
{sidebarEnabled && <Header collapsed={collapsed} />}
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{sidebarEnabled && (
|
|
isDark ? (
|
|
<PageSidebarDark
|
|
collapsed={collapsed}
|
|
onToggleCollapsed={() => setCollapsed((prev) => !prev)}
|
|
/>
|
|
) : (
|
|
<PageSidebar
|
|
collapsed={collapsed}
|
|
onToggleCollapsed={() => setCollapsed((prev) => !prev)}
|
|
/>
|
|
)
|
|
)}
|
|
<main
|
|
className={`flex-1 overflow-hidden transition-[padding] duration-300 ${
|
|
!sidebarEnabled ? "" : collapsed ? "pl-16" : "pl-64"
|
|
}`}
|
|
>
|
|
<Routes>
|
|
<Route index element={<Navigate to="workspace" replace />} />
|
|
<Route
|
|
path="workspace/*"
|
|
element={
|
|
<WorkspaceRoutes
|
|
pageSidebarCollapsed={collapsed}
|
|
pageSidebarHidden={!sidebarEnabled}
|
|
headerHidden={!sidebarEnabled}
|
|
compactWorkspaceSidebar={sidebarEnabled}
|
|
/>
|
|
}
|
|
/>
|
|
<Route path="strategy/*" element={<StrategyRoutes />} />
|
|
<Route path="canvas/*" element={<OpenCanvasRoutes />} />
|
|
<Route path="roundtable/*" element={<RoundtableRoutes />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function PageRoutes() {
|
|
return (
|
|
<Routes>
|
|
<Route path="*" element={<PageLayout />} />
|
|
</Routes>
|
|
);
|
|
}
|