shoc-frontend-new/src/app/(protected)/_layout.tsx

import { useState } from "react";
import { Outlet } from "react-router";
import { Box, useMediaQuery, useTheme } from "@mui/material";

import { ProtectedRoute } from "@/components/auth/protected-route";
import { AppSidebar } from "@/components/layout/app-sidebar";
import { getSidebarWidth } from "@/config/menu";
import { AppTopbar } from "@/components/layout/app-topbar";
import { SlaAtRiskBanner } from "@/components/notifications/sla-at-risk-banner";
import { NotificationSessionProvider } from "@/domain/notifications/session/notification-session-provider";

export default function AdminShellLayout() {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
  const [navCollapsed, setNavCollapsed] = useState(false);
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const sidebarWidth = isDesktop ? getSidebarWidth(navCollapsed) : 0;

  const handleToggleNav = () => {
    if (isDesktop) {
      setNavCollapsed((value) => !value);
      return;
    }

    setMobileNavOpen((value) => !value);
  };

  return (
    <ProtectedRoute>
      <NotificationSessionProvider>
        <Box className="flex h-screen w-full overflow-hidden bg-background">
          <AppSidebar
            collapsed={isDesktop ? navCollapsed : false}
            mobile={!isDesktop}
            open={isDesktop || mobileNavOpen}
            onClose={() => setMobileNavOpen(false)}
          />

          <Box
            className="flex h-screen min-w-0 flex-1 flex-col overflow-hidden"
            sx={{ width: `calc(100% - ${sidebarWidth}px)` }}
          >
            <AppTopbar onToggleNav={handleToggleNav} />
            <SlaAtRiskBanner />

            <Box
              component="main"
              className="flex-1 overflow-auto"
              sx={{ backgroundColor: "var(--color-bg-page)" }}
            >
              <Outlet />
            </Box>
          </Box>
        </Box>
      </NotificationSessionProvider>
    </ProtectedRoute>
  );
}