121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { Sidebar } from "./Sidebar";
|
|
import { TopBar } from "./TopBar";
|
|
import { NavBar, EVENT_NAV_IDS } from "./NavBar";
|
|
import { MainContent } from "./MainContent";
|
|
import { useAppNav } from "../contexts/AppNavContext";
|
|
import { useBreakpoint } from "../hooks/useBreakpoint";
|
|
|
|
export function AppShell() {
|
|
const {
|
|
activeNav,
|
|
setActiveNav,
|
|
selectedEventId,
|
|
setSelectedEventId,
|
|
setSearchQuery,
|
|
sidebarCollapsed,
|
|
setSidebarCollapsed,
|
|
drawerOpen,
|
|
setDrawerOpen,
|
|
} = useAppNav();
|
|
const bp = useBreakpoint();
|
|
const isSmall = bp === "mobile" || bp === "tablet";
|
|
|
|
const handleEventSelect = (eventId: string) => {
|
|
setSelectedEventId(eventId);
|
|
setActiveNav("dashboard");
|
|
};
|
|
|
|
const handleOpenSearchPage = (query: string) => {
|
|
setSearchQuery(query);
|
|
setActiveNav("search");
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!selectedEventId) return;
|
|
if (activeNav === "questions" || activeNav === "quiz") {
|
|
setActiveNav("event-activities");
|
|
}
|
|
}, [selectedEventId, activeNav, setActiveNav]);
|
|
|
|
useEffect(() => {
|
|
if (activeNav === "dashboard" && selectedEventId) {
|
|
setSidebarCollapsed(true);
|
|
}
|
|
}, [activeNav, selectedEventId, setSidebarCollapsed]);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
height: "100vh",
|
|
overflow: "hidden",
|
|
background: "var(--background)",
|
|
}}
|
|
>
|
|
{!isSmall && (
|
|
<Sidebar
|
|
activeItem={activeNav}
|
|
onItemClick={setActiveNav}
|
|
collapsed={sidebarCollapsed}
|
|
onToggleCollapse={() => setSidebarCollapsed((v) => !v)}
|
|
selectedEventId={selectedEventId}
|
|
onEventSelect={handleEventSelect}
|
|
/>
|
|
)}
|
|
{isSmall && (
|
|
<Sidebar
|
|
activeItem={activeNav}
|
|
onItemClick={setActiveNav}
|
|
collapsed={false}
|
|
onToggleCollapse={() => {}}
|
|
drawerOpen={drawerOpen}
|
|
onDrawerClose={() => setDrawerOpen(false)}
|
|
selectedEventId={selectedEventId}
|
|
onEventSelect={handleEventSelect}
|
|
/>
|
|
)}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flex: 1,
|
|
overflow: "hidden",
|
|
minWidth: 0,
|
|
}}
|
|
>
|
|
<TopBar
|
|
onMenuClick={() => setDrawerOpen((v) => !v)}
|
|
onNavigate={setActiveNav}
|
|
onEventSelect={handleEventSelect}
|
|
onOpenSearchPage={handleOpenSearchPage}
|
|
/>
|
|
{selectedEventId !== null && EVENT_NAV_IDS.has(activeNav) && (
|
|
<NavBar activeItem={activeNav} onNavigate={setActiveNav} />
|
|
)}
|
|
<main
|
|
style={{
|
|
flex: 1,
|
|
overflowY: "auto",
|
|
background: "var(--background)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding:
|
|
bp === "mobile"
|
|
? "16px 14px"
|
|
: bp === "tablet"
|
|
? "20px 20px"
|
|
: "24px 28px",
|
|
maxWidth: "1280px",
|
|
}}
|
|
>
|
|
<MainContent />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|