ad59450e70
* 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
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
/*
|
|
* 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 Drawer from '@mui/material/Drawer';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
const useStyles = makeStyles({
|
|
list: {
|
|
width: 250,
|
|
},
|
|
});
|
|
|
|
interface IProps {
|
|
drawerOpen: boolean
|
|
|
|
setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>
|
|
navBarItems: Array<NavbarItem>
|
|
}
|
|
|
|
export default function TemporaryDrawer({ drawerOpen, setDrawerOpen, navBarItems }: IProps) {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<div>
|
|
<Drawer
|
|
open={drawerOpen}
|
|
anchor="left"
|
|
onClose={() => setDrawerOpen(false)}
|
|
>
|
|
<div
|
|
className={classes.list}
|
|
role="presentation"
|
|
onClick={() => setDrawerOpen(false)}
|
|
onKeyDown={() => setDrawerOpen(false)}
|
|
>
|
|
<List>
|
|
{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>
|
|
</div>
|
|
);
|
|
}
|