header and footer

src/Footer.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
+import {AppBar, Box, Button, IconButton, Toolbar, Tooltip} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 function Copyright() {
   return (
@@ -17,19 +20,34 @@ function Copyright() {
 
 export default function Footer() {
   return (
-    <React.Fragment>
-      <Container
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: { xs: 2, sm: 4 },
-          py: { xs: 2, sm: 4 },
-          textAlign: { sm: 'center', md: 'left' },
-        }}
-      >
-        <Copyright />
-      </Container>
-    </React.Fragment>
+    <AppBar
+      position="fixed"
+      color="default"
+      sx={{
+        top: 'auto',
+        bottom: 0,
+        backdropFilter: 'blur(8px)',
+        boxShadow: 'none',
+        borderTop: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
+      <Toolbar>
+        <React.Fragment>
+          <Container
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: { xs: 2, sm: 4 },
+              py: { xs: 2, sm: 4 },
+              textAlign: { sm: 'center', md: 'left' },
+            }}
+          >
+            <Copyright />
+          </Container>
+        </React.Fragment>
+      </Toolbar>
+    </AppBar>
   );
 }