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
Suwayomi · Oct 29, 2021 · 88fb4b6 · 88fb4b6
1 parent c91cc50
commit 88fb4b6
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 229 deletions.
diff --git a/package.json b/package.json
@@ -6,10 +6,11 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fontsource/roboto": "^4.3.0",
-    "@mui/icons-material": "^5.0.0-rc.1",
-    "@mui/lab": "^5.0.0-alpha.46",
-    "@mui/material": "^5.0.0-rc.1",
-    "@mui/styles": "^5.0.0-rc.1",
+    "@mui/icons-material": "^5.0.5",
+    "@mui/lab": "^5.0.0-alpha.53",
+    "@mui/material": "^5.0.6",
+    "@mui/styles": "^5.0.2",
+    "@mui/system": "^5.0.6",
     "axios": "^0.21.1",
     "file-selector": "^0.2.4",
     "react": "^17.0.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -92,6 +92,7 @@ export default function App() {
                             style={{
                                 marginTop: theme.spacing(8),
                                 marginLeft: isMobileWidth ? '' : theme.spacing(8),
+                                marginBottom: isMobileWidth ? theme.spacing(8) : '',
                                 width: 'auto',
                                 overflow: 'auto',
                             }}

diff --git a/src/components/navbar/BottomNavigationBar.tsx b/src/components/navbar/BottomNavigationBar.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import {
+    Box, ListItem,
+} from '@mui/material';
+import { styled } from '@mui/system';
+import { Link, useLocation } from 'react-router-dom';
+
+const BottomNavContainer = styled('div')(({ theme }) => ({
+    bottom: 0,
+    left: 0,
+    height: theme.spacing(7),
+    width: '100vw',
+    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    position: 'fixed',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    // For Some reason the theme is throwing and error when accessing the Zindex object,
+    // This is the zIndex of the appBar in the default theme
+    zIndex: 1100,
+}));
+
+interface IProps {
+    navBarItems: Array<NavbarItem>
+}
+
+export default function BottomNavigationBar({ navBarItems }: IProps) {
+    const location = useLocation();
+    return (
+        <BottomNavContainer>
+            {
+                navBarItems.map(({ path, title, IconComponent }: NavbarItem) => (
+                    <Link to={path} style={{ flex: 1 }} key={path}>
+                        <ListItem disableRipple button style={{ justifyContent: 'center', padding: '8px' }} key={title}>
+                            <Box sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                // if we are on the same path then make the icon active
+                                color: location.pathname === path
+                                    ? 'primary.main'
+                                    : 'grey.A400',
+                            }}
+                            >
+                                <IconComponent fontSize="medium" />
+                                <div style={{ fontSize: '0.65rem' }}>{title}</div>
+                            </Box>
+                        </ListItem>
+                    </Link>
+                ))
+            }
+        </BottomNavContainer>
+    );
+}
diff --git a/src/components/navbar/NavBar.tsx b/src/components/navbar/NavBar.tsx
@@ -5,13 +5,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import AppBar from '@mui/material/AppBar';
 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';
@@ -23,8 +22,8 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import { useHistory } from 'react-router-dom';
 import NavBarContext from 'context/NavbarContext';
 import DarkTheme from 'context/DarkTheme';
-import TemporaryDrawer from './TemporaryDrawer';
 import PermanentSideBar from './PermanentSideBar';
+import BottomNavigationBar from './BottomNavigationBar';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -54,7 +53,7 @@ const navbarItems: Array<NavbarItem> = [
         IconComponent: ExploreIcon,
     }, {
         path: '/downloads',
-        title: 'Manga Download Queue',
+        title: 'Downloads',
         IconComponent: GetAppIcon,
     }, {
         path: '/settings',
@@ -65,11 +64,11 @@ const navbarItems: Array<NavbarItem> = [
 
 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 history = useHistory();
+    const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
 
     const { darkTheme } = useContext(DarkTheme);
 
@@ -81,21 +80,8 @@ export default function NavBar() {
         <div className={classes.root}>
             <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
                 <Toolbar>
-                    {isMobileWidth ? (
-                        <IconButton
-                            edge="start"
-                            className={classes.menuButton}
-                            color="inherit"
-                            aria-label="menu"
-                            disableRipple
-                            onClick={() => setDrawerOpen(true)}
-                            size="large"
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                    )
-                        : (
-                            !navbarItems.some(({ path }) => path === history.location.pathname)
+                    {
+                        !navbarItems.some(({ path }) => path === history.location.pathname)
                             && (
                                 <IconButton
                                     edge="start"
@@ -111,21 +97,20 @@ export default function NavBar() {
                                     <ArrowBack />
                                 </IconButton>
                             )
-                        )}
+                    }
                     <Typography variant={isMobileWidth ? 'h6' : 'h5'} className={classes.title}>
                         {title}
                     </Typography>
                     {action}
                 </Toolbar>
             </AppBar>
-            {isMobileWidth ? (
-                <TemporaryDrawer
-                    navBarItems={navbarItems}
-                    drawerOpen={drawerOpen}
-                    setDrawerOpen={setDrawerOpen}
-                />
-            )
-                : <PermanentSideBar navBarItems={navbarItems} />}
+            {
+                isMainRoute
+            && (
+                isMobileWidth
+                    ? <BottomNavigationBar navBarItems={navbarItems} />
+                    : <PermanentSideBar navBarItems={navbarItems} />)
+            }
         </div>
     )}
         </>

diff --git a/src/components/navbar/PermanentSideBar.tsx b/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>
     );
 }