ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Permanent sidebar for desktop widths(#46)

Browse Source 
* 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
This commit is contained in:
abhijeetChawla
2021-10-24 21:34:38 +05:30
committed by GitHub
parent 1ed001a8d8
commit ad59450e70
5 changed files with 145 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/TemporaryDrawer.tsx
View File

@@ -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<React.SetStateAction<boolean>>
navBarItems: Array<NavbarItem>
}
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)}
>
<List>
<Link to="/library" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Library">
<ListItemIcon>
<CollectionsBookmarkIcon />
</ListItemIcon>
<ListItemText primary="Library" />
</ListItem>
</Link>
<Link to="/updates" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Updates">
<ListItemIcon>
<NewReleasesIcon />
</ListItemIcon>
<ListItemText primary="Updates" />
</ListItem>
</Link>
<Link to="/manga/extensions" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Extensions">
<ListItemIcon>
<ExtensionIcon />
</ListItemIcon>
<ListItemText primary="Extensions" />
</ListItem>
</Link>
<Link to="/manga/sources" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Sources">
<ListItemIcon>
<ExploreIcon />
</ListItemIcon>
<ListItemText primary="Sources" />
</ListItem>
</Link>
<Link to="/manga/downloads" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="Manga Download Queue">
<ListItemIcon>
<GetAppIcon />
</ListItemIcon>
<ListItemText primary="Downloads" />
</ListItem>
</Link>
<Link to="/settings" style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key="settings">
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Settings" />
</ListItem>
</Link>
{navBarItems.map((({ path, title, IconComponent }: NavbarItem) => (
<Link to={path} style={{ color: 'inherit', textDecoration: 'none' }}>
<ListItem button key={title}>
<ListItemIcon>
<IconComponent />
</ListItemIcon>
<ListItemText primary={title} />
</ListItem>
</Link>
)))}
</List>
</div>
</Drawer>