Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bottom navbar for mobile #51

Merged
merged 6 commits into from
Oct 29, 2021
Merged

Bottom navbar for mobile #51

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ae7807b
- implemented Botton navbar for mobile devices
ff2400t Oct 27, 2021
4aaf785
- Added text to the mobile bottom bar
ff2400t Oct 27, 2021
d1d8c36
Made the Sidebar Seperate component used just for Non-Mobile Devices
ff2400t Oct 28, 2021
50dcf2f
Added the main Material UI System package
ff2400t Oct 28, 2021
c41c1cc
Extracted the Bottom Navbar into a seperate component
ff2400t Oct 28, 2021
fbbd37d
updated the mui dependencies
ff2400t Oct 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"@mui/lab": "^5.0.0-alpha.46",
"@mui/material": "^5.0.0-rc.1",
"@mui/styles": "^5.0.0-rc.1",
"@mui/system": "^5.0.6",
ff2400t marked this conversation as resolved.
Show resolved Hide resolved
"axios": "^0.21.1",
"file-selector": "^0.2.4",
"react": "^17.0.2",
Expand Down
62 changes: 62 additions & 0 deletions src/components/navbar/BottomNavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 7 additions & 2 deletions src/components/navbar/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { useHistory } from 'react-router-dom';
import NavBarContext from 'context/NavbarContext';
import DarkTheme from 'context/DarkTheme';
import PermanentSideBar from './PermanentSideBar';
import BottomNavigationBar from './BottomNavigationBar';

const useStyles = makeStyles((theme) => ({
root: {
Expand Down Expand Up @@ -67,6 +68,7 @@ export default function NavBar() {
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);

Expand Down Expand Up @@ -103,8 +105,11 @@ export default function NavBar() {
</Toolbar>
</AppBar>
{
navbarItems.some(({ path }) => path === history.location.pathname)
&& <PermanentSideBar navBarItems={navbarItems} />
isMainRoute
&& (
isMobileWidth
? <BottomNavigationBar navBarItems={navbarItems} />
: <PermanentSideBar navBarItems={navbarItems} />)
}
</div>
)}
Expand Down
80 changes: 20 additions & 60 deletions src/components/navbar/PermanentSideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +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, useMediaQuery,
} from '@mui/material';
import { ListItem, ListItemIcon, Tooltip } from '@mui/material';
import { Link, useLocation } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
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],
},
bottomBar: {
bottom: 0,
left: 0,
height: '64px',
width: '100vw',
backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
position: 'fixed',
display: 'flex',
flexDirection: 'row',
zIndex: theme.zIndex.drawer,
boxShadow: theme.shadows[5],
justifyContent: 'space-evenly',
},
tooltip: {
fontSize: '0.8rem',
},
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',
}));
ff2400t marked this conversation as resolved.
Show resolved Hide resolved

interface IProps {
Expand All @@ -50,42 +28,24 @@ interface IProps {

export default function PermanentSideBar({ navBarItems }: IProps) {
const location = useLocation();
const classes = useStyles();
const theme = useTheme();
const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
return (
<List className={isMobileWidth ? classes.bottomBar : classes.sideBar}>
<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 button key={title}>
<ListItem disableRipple button key={title}>
<ListItemIcon style={{ minWidth: '0' }}>
{isMobileWidth
? (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
color: location.pathname === path
? theme.palette.primary.main
: theme.palette.grey.A400,
}}
>
<IconComponent fontSize="medium" />
<div style={{ fontSize: '0.65rem' }}>{title}</div>
</div>
)
: (
<Tooltip placement="right" classes={{ tooltip: classes.tooltip }} title={title}>
<IconComponent color={location.pathname === path ? 'primary' : theme.palette.grey.A400} fontSize="large" />
</Tooltip>
)}

<Tooltip placement="right" title={title}>
<IconComponent sx={{ color: location.pathname === path ? 'primary.main' : 'grey.A400' }} fontSize="large" />
</Tooltip>

</ListItemIcon>
</ListItem>
</Link>
))
}
</List>
</SideNavBarContainer>
);
}
73 changes: 71 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1157,7 +1157,7 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.15.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
Expand Down Expand Up @@ -1281,6 +1281,17 @@
"@emotion/weak-memoize" "^0.2.5"
stylis "^4.0.3"

"@emotion/cache@^11.5.0":
version "11.5.0"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.5.0.tgz#a5eb78cbef8163939ee345e3ddf0af217b845e62"
integrity sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==
dependencies:
"@emotion/memoize" "^0.7.4"
"@emotion/sheet" "^1.0.3"
"@emotion/utils" "^1.0.0"
"@emotion/weak-memoize" "^0.2.5"
stylis "^4.0.10"

"@emotion/hash@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
Expand Down Expand Up @@ -1327,6 +1338,11 @@
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.2.tgz#1d9ffde531714ba28e62dac6a996a8b1089719d0"
integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==

"@emotion/sheet@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.3.tgz#00c326cd7985c5ccb8fe2c1b592886579dcfab8f"
integrity sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ==

"@emotion/styled@^11.3.0":
version "11.3.0"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207"
Expand Down Expand Up @@ -1677,6 +1693,15 @@
"@mui/utils" "5.0.0-rc.1"
prop-types "^15.7.2"

"@mui/private-theming@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.0.1.tgz#50a0ea6ad5a8d1d78072859c4bdaaa6b6584d986"
integrity sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==
dependencies:
"@babel/runtime" "^7.15.4"
"@mui/utils" "^5.0.1"
prop-types "^15.7.2"

"@mui/styled-engine@5.0.0-rc.1":
version "5.0.0-rc.1"
resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.0-rc.1.tgz#8a0c68e88868c42944042e01e28a0d11b6caf756"
Expand All @@ -1686,6 +1711,15 @@
"@emotion/cache" "^11.4.0"
prop-types "^15.7.2"

"@mui/styled-engine@^5.0.2":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.2.tgz#a2d188e80d2c8c3501316649c1901a41ac07e376"
integrity sha512-vApnXLj/5V+SbBy+jGFtPgu3tgs0ybSdwWLwXcnUAdNdRyJBffi2KyOP8fhUONLOcZBMU2heNXWz/Zqn5kbDKQ==
dependencies:
"@babel/runtime" "^7.15.4"
"@emotion/cache" "^11.5.0"
prop-types "^15.7.2"

"@mui/styles@^5.0.0-rc.1":
version "5.0.0-rc.1"
resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.0.0-rc.1.tgz#479c082afbdef116ad5323e15e3f1324efd29205"
Expand Down Expand Up @@ -1723,11 +1757,30 @@
csstype "^3.0.8"
prop-types "^15.7.2"

"@mui/system@^5.0.6":
version "5.0.6"
resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.6.tgz#053ad18e3888f041137db9f0c0ac1486c86972a0"
integrity sha512-qZdgODiO82/r1bH9KV5bdqqx/q14i32OGUK/bO6phhXM/DX0TmWSUsnPqFX4F7/UKrvBHsGzIb8ohdRuihQD+Q==
dependencies:
"@babel/runtime" "^7.15.4"
"@mui/private-theming" "^5.0.1"
"@mui/styled-engine" "^5.0.2"
"@mui/types" "^7.0.0"
"@mui/utils" "^5.0.1"
clsx "^1.1.1"
csstype "^3.0.9"
prop-types "^15.7.2"

"@mui/types@7.0.0-rc.1":
version "7.0.0-rc.1"
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.0.0-rc.1.tgz#276090e2cd062a5e9241cf8d4ad795a4ee10eb03"
integrity sha512-4vYFVi8ExcC7EEuk5melw/XPG2DVPeXI/HUYnQj+3t5NESpdvLJhbbvmHH366ZWAhXR2FechYWo/cQfGIsSG8Q==

"@mui/types@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.0.0.tgz#a7398502bc9c508875aafcbe28aea599b2c3d203"
integrity sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==

"@mui/utils@5.0.0-rc.1":
version "5.0.0-rc.1"
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.0.0-rc.1.tgz#8427d1117a380b8c861be9a6bbf51075e776cd63"
Expand All @@ -1739,6 +1792,17 @@
prop-types "^15.7.2"
react-is "^17.0.2"

"@mui/utils@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.0.1.tgz#d4f0f41b82db6ac273920a1b5b6a4de7879271f5"
integrity sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==
dependencies:
"@babel/runtime" "^7.15.4"
"@types/prop-types" "^15.7.4"
"@types/react-is" "^16.7.1 || ^17.0.0"
prop-types "^15.7.2"
react-is "^17.0.2"

"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
Expand Down Expand Up @@ -4307,6 +4371,11 @@ csstype@^3.0.2, csstype@^3.0.8:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==

csstype@^3.0.9:
version "3.0.9"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==

cyclist@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
Expand Down Expand Up @@ -10891,7 +10960,7 @@ stylehacks@^4.0.0:
postcss "^7.0.0"
postcss-selector-parser "^3.0.0"

stylis@^4.0.3:
stylis@^4.0.10, stylis@^4.0.3:
version "4.0.10"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
Expand Down