"use client"; import { Sidebar } from "@/components/sidebar"; import { tw } from "@/utils/tailwind"; import MenuIcon from "@mui/icons-material/Menu"; import { Button, CssBaseline, IconButton, MenuItem, Select, ThemeProvider, useMediaQuery, } from "@mui/material"; import { StyledEngineProvider } from "@mui/material/styles"; import axios from "axios"; import localFont from "next/font/local"; import Image from "next/image"; import * as React from "react"; import { Toaster } from "react-hot-toast"; import "./globals.css"; import { darkTheme, lightTheme } from "./theme/themes"; import Background from "@/components/background"; import { AppContext, WithAppState } from "@/components/hooks/useAppContext"; const roboto = localFont({ src: [ { path: "../fonts/truetype/Roboto-Regular.ttf", weight: "400", style: "normal", }, ], }); axios.defaults.baseURL = "http://localhost:2979"; // add negative margin for smooth transition to fill the space of the sidebar const translate = tw`lg:-ml-64 -ml-14`; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)"); const [showSidebar, setShowSidebar] = React.useState(true); return (