Sidebar add

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.115",
     "@mui/material": "^5.11.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -20,6 +21,7 @@
     "npm-link-shared": "^0.5.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-pro-sidebar": "^1.0.0-beta.2",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",

src/components/ui/side-bar/SideBar.tsx

@@ -0,0 +1,81 @@
+import Box from "@mui/material/Box";
+import { Link } from "react-router-dom";
+import { Button, IconButton } from "@mui/material";
+import { Menu, MenuItem, Sidebar, useProSidebar } from "react-pro-sidebar";
+import LogoutIcon from "@mui/icons-material/Logout";
+import AttractionsIcon from "@mui/icons-material/Attractions";
+import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
+import ContactsOutlinedIcon from "@mui/icons-material/ContactsOutlined";
+import { ProjectConsts } from "../../../utils/consts/ProjectConsts";
+import { NavigationConsts } from "../../../utils/consts/NavigationConsts";
+import { styles } from "./SideBarStyle";
+
+export default function SideBar(props:any) {
+
+  const menuItems = { home: "Home", contact: "Contacts" };
+
+  const { collapseSidebar, toggleSidebar, collapsed, toggled } =
+    useProSidebar();
+
+  const toggle = () => {
+    toggleSidebar();
+    collapseSidebar();
+  };
+
+  return (
+    <Box sx={styles.container}>
+      <Sidebar style={styles.sideBar}>
+        <Box sx={styles.sideBarContainer}>
+          <SideBarHeader />
+          <hr style={styles.sideBarHR} />
+          <SideBarMenu />
+          <SideBarFooter />
+        </Box>
+      </Sidebar>
+      <main style={styles.main}>
+        {props.children}
+      </main>
+    </Box>
+  );
+
+  function SideBarHeader() {
+    return (
+      <Box sx={styles.sideBarHeader}>
+        <IconButton onClick={toggle}>
+          <AttractionsIcon style={styles.sideBarHeaderIcon} fontSize="large" />
+        </IconButton>
+        {!toggled && (
+          <h1 style={styles.sideBarHeaderTitle}>{ProjectConsts.Name}</h1>
+        )}
+      </Box>
+    );
+  }
+
+  function SideBarMenu() {
+    return (
+      <Menu>
+        <MenuItem
+          component={<Link to={NavigationConsts.HomePage} />}
+          icon={<HomeOutlinedIcon />}
+        >
+          {menuItems.home}
+        </MenuItem>
+        <MenuItem icon={<ContactsOutlinedIcon fontSize="small" />}>
+          {menuItems.contact}
+        </MenuItem>
+      </Menu>
+    );
+  }
+
+  function SideBarFooter() {
+    return (
+      <Button
+        style={styles.signOutButton}
+        variant="contained"
+        startIcon={!toggled && <LogoutIcon style={styles.signOutButtonIcon} />}
+      >
+        Sign Out
+      </Button>
+    );
+  }
+}

src/components/ui/side-bar/SideBarStyle.ts

@@ -0,0 +1,44 @@
+import { ColorConsts } from "../../../utils/consts/ProjectConsts";
+
+export const styles = {
+    container: {
+      display: "flex",
+      flexDirection: "row",
+    },
+    sideBarContainer: {
+      backgroundColor: ColorConsts.LightBeige,
+      height: "100vh",
+      display: "flex",
+      flexDirection: "column",
+    },
+    sideBar: {},
+    sideBarHeader: {
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "column",
+      margin: "0.5em 0",
+    },
+    sideBarHeaderTitle: {
+      color: ColorConsts.DarkBlue,
+    },
+    sideBarHeaderIcon: {
+      color: ColorConsts.DarkBlue,
+    },
+    sideBarHR: {
+      backgroundColor: ColorConsts.DarkBlue,
+      height: "2px",
+      margin: "0",
+      border: "0",
+    },
+    main: {
+      margin: "0 0.5em",
+    },
+    signOutButton: {
+      marginTop: "auto",
+      backgroundColor: ColorConsts.DarkBlue,
+      borderRadius: "0",
+    },
+    signOutButtonIcon: {
+      transform: "rotate(180deg)",
+    },
+  };

src/index.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { ProSidebarProvider } from "react-pro-sidebar";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 
-
 root.render(
   <React.StrictMode>
-    <App />
+    <ProSidebarProvider>
+      <App />
+    </ProSidebarProvider>
   </React.StrictMode>
 );

src/pages/home/HomePage.tsx

@@ -1,5 +1,9 @@
+import SideBar from "../../components/ui/side-bar/SideBar";
+
 export default function HomePage(){
     return (
-        <h1>Home Page</h1>
+        <SideBar>
+            <h1>Hello</h1>
+        </SideBar>
     )
 }

src/utils/consts/ProjectConsts.ts

@@ -1,5 +1,5 @@
 export class ProjectConsts {
-    static Name = "Seaborgium";
+    static Name = "SEABORGIUM";
     static TokenStorageKey = "TokenKey"
  }