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";

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>
      <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} />

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