link-stack/apps/bridge-frontend/app/_components/InternalLayout.tsx

"use client";

import { FC, PropsWithChildren, useState } from "react";
import { Grid } from "@mui/material";
import { CssBaseline } from "@mui/material";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
import { SessionProvider } from "next-auth/react";
import { Sidebar } from "./Sidebar";

export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
  const [open, setOpen] = useState(true);

  return (
    <AppRouterCacheProvider>
      <SessionProvider>
        <CssBaseline />
        <Grid container direction="row">
          <Sidebar open={open} setOpen={setOpen} />
          <Grid
            item
            sx={{ ml: open ? "270px" : "70px", width: "100%", height: "100vh" }}
          >
            {children as any}
          </Grid>
        </Grid>
      </SessionProvider>
    </AppRouterCacheProvider>
  );
};