Luis/nextjs-python-web-template
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init: layout with simple side navigation

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-08-06 17:26:24 +02:00
parent 52c73265ac
commit c3b49fdce0
13 changed files with 362 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,15 @@
"use client";
import "./globals.css";
import type { Metadata } from "next";
import localFont from "next/font/local";
import * as React from "react";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ChangeEvent, useState } from "react";
import { StyledEngineProvider } from "@mui/material/styles";
import cx from "classnames";
// import { tw } from "../utils/tailwind";
import { darkTheme, lightTheme } from "./theme/themes";
import { Sidebar } from "@/components/sidebar";
const roboto = localFont({
src: [
@@ -13,49 +18,42 @@ const roboto = localFont({
weight: "400",
style: "normal",
},
// {
// path: "./Roboto-Italic.woff2",
// weight: "400",
// style: "italic",
// },
// {
// path: "./Roboto-Bold.woff2",
// weight: "700",
// style: "normal",
// },
// {
// path: "./Roboto-BoldItalic.woff2",
// weight: "700",
// style: "italic",
// },
],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
let [useDarkTheme, setUseDarkTheme] = useState(false);
let [theme, setTheme] = useState(useDarkTheme ? darkTheme : lightTheme);
const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => {
setUseDarkTheme(currentValue);
setTheme(currentValue ? darkTheme : lightTheme);
};
return (
<html lang="en">
<head>
<title>Clan.lol</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Clan.lol - build your own network" />
<link rel="icon" href="/favicon.ico" />
</head>
<StyledEngineProvider injectFirst>
<body
className={cx(
"h-screen",
"min-h-screen",
"w-screen",
"bg-white",
// custom animation defined in tailwind.config
roboto.className
)}
>
{children}
</body>
<ThemeProvider theme={theme}>
<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>
</div>
</div>
</body>
</ThemeProvider>
</StyledEngineProvider>
</html>
);