Bottom navbar for mobile (#51)

* - implemented Botton navbar for mobile devices
- Also made navbar conditional to render only when its on of the paths in the navbar

* - Added text to the mobile bottom bar
- Changed /downloads Path title to Downloads
- Added conditional paddingBottom when on mobile

* Made the Sidebar Seperate component used just for Non-Mobile Devices

* Added the main Material UI System package

* Extracted the Bottom Navbar into a seperate component

* updated the mui dependencies

src/components/navbar/PermanentSideBar.tsx

@@ -6,28 +6,20 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import {
-    List, ListItem, ListItemIcon, Tooltip,
-} from '@mui/material';
+import { ListItem, ListItemIcon, Tooltip } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
+import { styled } from '@mui/system';
 
-const useStyles = makeStyles((theme) => ({
-    sideBar: {
-        height: '100vh',
-        width: theme.spacing(8),
-        backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        paddingTop: theme.spacing(8),
-        display: 'flex',
-        flexDirection: 'column',
-        boxShadow: theme.shadows[5],
-    },
-    tooltip: {
-        fontSize: '1rem',
-    },
+const SideNavBarContainer = styled('div')(({ theme }) => ({
+    height: '100vh',
+    width: theme.spacing(8),
+    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    paddingTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
 }));
 
 interface IProps {
@@ -36,25 +28,24 @@ interface IProps {
 
 export default function PermanentSideBar({ navBarItems }: IProps) {
     const location = useLocation();
-    const classes = useStyles();
     return (
-        <div className={classes.sideBar}>
-            <List>
-                {
-                    // eslint-disable-next-line react/destructuring-assignment
-                    navBarItems.map(({ path, title, IconComponent }: NavbarItem) => (
-                        <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
-                            <ListItem button key={title}>
-                                <ListItemIcon>
-                                    <Tooltip placement="right" classes={{ tooltip: classes.tooltip }} title={title}>
-                                        <IconComponent color={location.pathname === path ? 'primary' : 'action'} fontSize="large" />
-                                    </Tooltip>
-                                </ListItemIcon>
-                            </ListItem>
-                        </Link>
-                    ))
-                }
-            </List>
-        </div>
+        <SideNavBarContainer>
+            {
+                // eslint-disable-next-line react/destructuring-assignment
+                navBarItems.map(({ path, title, IconComponent }: NavbarItem) => (
+                    <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
+                        <ListItem disableRipple button key={title}>
+                            <ListItemIcon style={{ minWidth: '0' }}>
+
+                                <Tooltip placement="right" title={title}>
+                                    <IconComponent sx={{ color: location.pathname === path ? 'primary.main' : 'grey.A400' }} fontSize="large" />
+                                </Tooltip>
+
+                            </ListItemIcon>
+                        </ListItem>
+                    </Link>
+                ))
+            }
+        </SideNavBarContainer>
     );
 }