add Permanent sidebar for desktop widths(#46)

* sidebar is working in the desktop mode
Still needs a few styling imporvements

* - made the color of the sidebar same as the Navbar
- increased font size in when using on a non-mobile device

* changed the main view padding to 64px

* Settings changed a few values to be based on the Theme object

* - Added ToolTip
- Fixed a Typo
- Renamed mobileDevice to isMobileWidth
- changed text property to Title in NavbarItem

* increased tooltip fontsize

src/components/navbar/NavBar.tsx

@@ -12,9 +12,18 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
+import NewReleasesIcon from '@mui/icons-material/NewReleases';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import ExploreIcon from '@mui/icons-material/Explore';
+import GetAppIcon from '@mui/icons-material/GetApp';
+import SettingsIcon from '@mui/icons-material/Settings';
+import TemporaryDrawer from 'components/TemporaryDrawer';
 import NavBarContext from '../../context/NavbarContext';
 import DarkTheme from '../../context/DarkTheme';
-import TemporaryDrawer from '../TemporaryDrawer';
+import PermanentSideBar from './PermanentSideBar';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -28,10 +37,41 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
+const navbarItems: Array<NavbarItem> = [
+    {
+        path: '/library',
+        title: 'Library',
+        IconComponent: CollectionsBookmarkIcon,
+    },
+    {
+        path: '/updates',
+        title: 'Updates',
+        IconComponent: NewReleasesIcon,
+    }, {
+        path: '/manga/extensions',
+        title: 'Extensions',
+        IconComponent: ExtensionIcon,
+    }, {
+        path: '/manga/sources',
+        title: 'Sources',
+        IconComponent: ExploreIcon,
+    }, {
+        path: '/manga/downloads',
+        title: 'Manga Download Queue',
+        IconComponent: GetAppIcon,
+    }, {
+        path: '/settings',
+        title: 'Settings',
+        IconComponent: SettingsIcon,
+    },
+];
+
 export default function NavBar() {
     const classes = useStyles();
     const [drawerOpen, setDrawerOpen] = useState(false);
     const { title, action, override } = useContext(NavBarContext);
+    const theme = useTheme();
+    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     const { darkTheme } = useContext(DarkTheme);
 
@@ -43,24 +83,33 @@ export default function NavBar() {
         <div className={classes.root}>
             <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
                 <Toolbar>
-                    <IconButton
-                        edge="start"
-                        className={classes.menuButton}
-                        color="inherit"
-                        aria-label="menu"
-                        disableRipple
-                        onClick={() => setDrawerOpen(true)}
-                        size="large"
-                    >
-                        <MenuIcon />
-                    </IconButton>
-                    <Typography variant="h6" className={classes.title}>
+                    {isMobileWidth && (
+                        <IconButton
+                            edge="start"
+                            className={classes.menuButton}
+                            color="inherit"
+                            aria-label="menu"
+                            disableRipple
+                            onClick={() => setDrawerOpen(true)}
+                            size="large"
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                    )}
+                    <Typography variant={isMobileWidth ? 'h6' : 'h5'} className={classes.title}>
                         {title}
                     </Typography>
                     {action}
                 </Toolbar>
             </AppBar>
-            <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+            {isMobileWidth ? (
+                <TemporaryDrawer
+                    navBarItems={navbarItems}
+                    drawerOpen={drawerOpen}
+                    setDrawerOpen={setDrawerOpen}
+                />
+            )
+                : <PermanentSideBar navBarItems={navbarItems} />}
         </div>
     )}
         </>