From bc74ae8116a4e6014f88f8c587d9842347efe14c Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 21 Jul 2024 15:24:19 +0200
Subject: [PATCH] Implement footer in Dashboard state

---
 dashboard/src/states/Dashboard/Dashboard.jsx | 27 +++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/states/Dashboard/Dashboard.jsx b/dashboard/src/states/Dashboard/Dashboard.jsx
index d4044ee..c2d66d6 100644
--- a/dashboard/src/states/Dashboard/Dashboard.jsx
+++ b/dashboard/src/states/Dashboard/Dashboard.jsx
@@ -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>