Implement footer in Dashboard state

This commit is contained in:
Mathias Wagner
2024-07-21 15:24:19 +02:00
parent f25bac1f3c
commit bc74ae8116

View File

@ -1,21 +1,36 @@
import {Box, Toolbar} from "@mui/material";
import {Box, Link, Toolbar, Typography} from "@mui/material";
import {Outlet} from "react-router-dom";
import Header from "@/states/Dashboard/components/Header";
import Sidebar from "@/states/Dashboard/components/Sidebar";
import {useState} from "react";
import {useContext, useState} from "react";
import {ProjectProvider} from "@/states/Dashboard/contexts/Project";
import {InfoContext} from "@contexts/Info/index.js";
export const Dashboard = () => {
const [mobileOpen, setMobileOpen] = useState(false);
const {info} = useContext(InfoContext);
return (
<ProjectProvider>
<Box sx={{display: "flex", overflow: "hidden"}}>
<Header mobileOpen={mobileOpen} toggleOpen={() => setMobileOpen(current => !current)} />
<Sidebar mobileOpen={mobileOpen} toggleOpen={() => setMobileOpen(current => !current)} />
<Box component="main" sx={{ flexGrow: 1, p: 3, ml: { sm: "260px"} }}>
<Header mobileOpen={mobileOpen} toggleOpen={() => setMobileOpen(current => !current)}/>
<Sidebar mobileOpen={mobileOpen} toggleOpen={() => setMobileOpen(current => !current)}/>
<Box component="main" sx={{flexGrow: 1, p: 3, ml: {sm: "260px"}, mb: "2rem"}}>
<Toolbar/>
<Outlet />
<Outlet/>
</Box>
<Box sx={{
display: "flex", justifyContent: "space-between", position: "fixed", bottom: 0,
ml: {sm: "260px"}, width: {sm: "calc(100% - 260px)", xs: "100%"}, py: 1, px: 2,
backgroundColor: "background.paper", borderTop: 1, borderColor: "divider", alignItems: "center"
}}>
<Typography variant="caption" color="text.secondary">
© 2021 - {new Date().getFullYear()}
<Link href="https://github.com/gnmyt/LicenseAPI" target="_blank" color="primary" sx={{ml: 0.5}}>
LicenseAPI
</Link>
</Typography>
<Typography variant="caption" color="text.secondary">Version {info.version}</Typography>
</Box>
</Box>
</ProjectProvider>