"use client"; import "./globals.css"; import localFont from "next/font/local"; import * as React from "react"; import { CssBaseline, IconButton, ThemeProvider, useMediaQuery, } from "@mui/material"; import { ChangeEvent, useState } from "react"; 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"; const roboto = localFont({ src: [ { path: "../fonts/truetype/Roboto-Regular.ttf", weight: "400", style: "normal", }, ], }); // 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)"); let [useDarkTheme, setUseDarkTheme] = useState(false); let [showSidebar, setShowSidebar] = useState(true); 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}
 ); }