From ad59450e70e475040ee72efde9cbbc6efbc2d590 Mon Sep 17 00:00:00 2001 From: abhijeetChawla <84376771+abhijeetChawla@users.noreply.github.com> Date: Sun, 24 Oct 2021 21:34:38 +0530 Subject: [PATCH] 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/App.tsx | 6 +- src/components/TemporaryDrawer.tsx | 69 ++++--------------- src/components/navbar/NavBar.tsx | 77 ++++++++++++++++++---- src/components/navbar/PermanentSideBar.tsx | 60 +++++++++++++++++ src/typings.d.ts | 6 ++ 5 files changed, 145 insertions(+), 73 deletions(-) create mode 100644 src/components/navbar/PermanentSideBar.tsx diff --git a/src/App.tsx b/src/App.tsx index 719607db..e3c3fc78 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,7 @@ import { Route, Redirect, } from 'react-router-dom'; -import { Container } from '@mui/material'; +import { Container, useMediaQuery } from '@mui/material'; import CssBaseline from '@mui/material/CssBaseline'; import { createTheme, ThemeProvider, Theme, StyledEngineProvider, @@ -76,6 +76,8 @@ export default function App() { }), [darkTheme], ); + // this can only be used after the theme object is created + const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm')); return ( @@ -88,7 +90,7 @@ export default function App() { id="appMainContainer" maxWidth={false} disableGutters - style={{ paddingTop: '64px' }} + style={{ paddingTop: theme.spacing(8), paddingLeft: isMobileWidth ? '' : theme.spacing(8) }} > {/* General Routes */} diff --git a/src/components/TemporaryDrawer.tsx b/src/components/TemporaryDrawer.tsx index 4d13bb92..37a29d46 100644 --- a/src/components/TemporaryDrawer.tsx +++ b/src/components/TemporaryDrawer.tsx @@ -11,13 +11,7 @@ import Drawer from '@mui/material/Drawer'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemIcon from '@mui/material/ListItemIcon'; -import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark'; -import ExploreIcon from '@mui/icons-material/Explore'; -import ExtensionIcon from '@mui/icons-material/Extension'; -import GetAppIcon from '@mui/icons-material/GetApp'; -import NewReleasesIcon from '@mui/icons-material/NewReleases'; import ListItemText from '@mui/material/ListItemText'; -import SettingsIcon from '@mui/icons-material/Settings'; import { Link } from 'react-router-dom'; const useStyles = makeStyles({ @@ -30,9 +24,10 @@ interface IProps { drawerOpen: boolean setDrawerOpen: React.Dispatch> + navBarItems: Array } -export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) { +export default function TemporaryDrawer({ drawerOpen, setDrawerOpen, navBarItems }: IProps) { const classes = useStyles(); return ( @@ -49,56 +44,16 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) { onKeyDown={() => setDrawerOpen(false)} > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {navBarItems.map((({ path, title, IconComponent }: NavbarItem) => ( + + + + + + + + + )))} diff --git a/src/components/navbar/NavBar.tsx b/src/components/navbar/NavBar.tsx index 80019722..e8c8e6e1 100644 --- a/src/components/navbar/NavBar.tsx +++ b/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 = [ + { + 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() {
- setDrawerOpen(true)} - size="large" - > - - - + {isMobileWidth && ( + setDrawerOpen(true)} + size="large" + > + + + )} + {title} {action} - + {isMobileWidth ? ( + + ) + : }
)} diff --git a/src/components/navbar/PermanentSideBar.tsx b/src/components/navbar/PermanentSideBar.tsx new file mode 100644 index 00000000..2766a726 --- /dev/null +++ b/src/components/navbar/PermanentSideBar.tsx @@ -0,0 +1,60 @@ +/* + * 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 makeStyles from '@mui/styles/makeStyles'; +import { + List, ListItem, ListItemIcon, Tooltip, +} from '@mui/material'; +import { Link, useLocation } from 'react-router-dom'; + +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', + }, +})); + +interface IProps { + navBarItems: Array +} + +export default function PermanentSideBar({ navBarItems }: IProps) { + const location = useLocation(); + const classes = useStyles(); + return ( +
+ + { + // eslint-disable-next-line react/destructuring-assignment + navBarItems.map(({ path, title, IconComponent }: NavbarItem) => ( + + + + + + + + + + )) + } + +
+ ); +} diff --git a/src/typings.d.ts b/src/typings.d.ts index 0bf6111d..5c1c56f4 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -190,3 +190,9 @@ interface SourcePreferences { type: string props: any } + +interface NavbarItem{ + path: string, + title:string, + IconComponent: OverridableComponent>, +}