IoSL/service-aware-frontend
3
0
Fork 0
generated from Luis/nextjs-python-web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: responsive layout for sidebar and dashboard

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-08-12 12:25:44 +02:00
parent a243f97574
commit ff89bcba4b
9 changed files with 472 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
pkgs/ui/src/app/layout.tsx
View File

@@ -3,13 +3,21 @@
import "./globals.css";
import localFont from "next/font/local";
import * as React from "react";
import { CssBaseline, ThemeProvider } from "@mui/material";
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 { ChevronLeft } from "@mui/icons-material";
import Image from "next/image";
const roboto = localFont({
src: [
@@ -26,12 +34,18 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
let [useDarkTheme, setUseDarkTheme] = useState(false);
let [theme, setTheme] = useState(useDarkTheme ? darkTheme : lightTheme);
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);
setTheme(currentValue ? darkTheme : lightTheme);
};
return (
@@ -43,13 +57,42 @@ export default function RootLayout({
<link rel="icon" href="/favicon.ico" />
</head>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<ThemeProvider theme={useDarkTheme ? darkTheme : lightTheme}>
<body id="__next" className={roboto.className}>
<CssBaseline />
<div className="flex h-screen overflow-hidden">
<Sidebar />
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<main>{children}</main>
<Sidebar
show={showSidebar}
onClose={() => setShowSidebar(false)}
/>
<div className="flex flex-col w-full h-full">
<div className="static min-h-10 top-0 mb-2 py-2">
<div className="grid grid-cols-3">
<div className="col-span-1">
<IconButton
hidden={true}
onClick={() => setShowSidebar((c) => !c)}
>
{!showSidebar && <MenuIcon />}
</IconButton>
</div>
<div className="col-span-1 block lg:hidden w-full text-center font-semibold text-white ">
<Image
src="/logo.svg"
alt="Clan Logo"
width={58}
height={58}
priority
/>
</div>
</div>
</div>
<div className="px-1">
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<main>{children}</main>
</div>
</div>
</div>
</div>
</body>