"use client"; import "./globals.css"; import localFont from "next/font/local"; import * as React from "react"; import { CssBaseline, IconButton, ThemeProvider, useMediaQuery, useTheme, } from "@mui/material"; import { ChangeEvent, useState } from "react"; import { Toaster } from "react-hot-toast"; import { StyledEngineProvider } from "@mui/material/styles"; import { darkTheme, lightTheme } from "./theme/themes"; import { Sidebar } from "@/components/sidebar"; import MenuIcon from "@mui/icons-material/Menu"; import Image from "next/image"; import { tw } from "@/utils/tailwind"; import axios from "axios"; 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 theme = useTheme(); const is_small = useMediaQuery(theme.breakpoints.down("sm")); let [useDarkTheme, setUseDarkTheme] = useState(false); let [showSidebar, setShowSidebar] = useState(true); // If the screen is small, hide the sidebar React.useEffect(() => { if (is_small) { setShowSidebar(false); } else { setShowSidebar(true); } }, [is_small]); React.useEffect(() => { if (useDarkTheme !== userPrefersDarkmode) { // Enable dark theme if the user prefers dark mode setUseDarkTheme(userPrefersDarkmode); } }, [userPrefersDarkmode, useDarkTheme, setUseDarkTheme]); const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => { setUseDarkTheme(currentValue); }; return ( Clan.lol
setShowSidebar(false)} />
Clan Logo
{children}
 ); }