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

import { useState } from "react";
import { Outlet } from "react-router-dom";
import { Box } 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";

export default function AdminShellLayout() {
  const [navCollapsed, setNavCollapsed] = useState(false);
  const sidebarWidth = getSidebarWidth(navCollapsed);

  return (
    <ProtectedRoute>
      <Box className="flex h-screen w-full overflow-hidden bg-background">
        <AppSidebar collapsed={navCollapsed} />

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

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