take less space in sidebar

This commit is contained in:
Olivier Gagnon 2021-09-16 21:59:12 -04:00
parent 7837454f18
commit cab823bcdf

@ -101,6 +101,10 @@ const useStyles = makeStyles((theme: Theme) =>
active: { active: {
borderLeft: "3px solid " + colors.primary, borderLeft: "3px solid " + colors.primary,
}, },
listitem: {
paddingTop: theme.spacing(0.1),
paddingBottom: theme.spacing(0.1),
},
}), }),
); );
@ -357,7 +361,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
return ( return (
<BBTheme> <BBTheme>
<Drawer open={open} anchor="left" variant="permanent"> <Drawer open={open} anchor="left" variant="permanent">
<ListItem button onClick={toggleDrawer}> <ListItem classes={{ root: classes.listitem }} button onClick={toggleDrawer}>
<ListItemIcon> <ListItemIcon>
{!open ? <ChevronRightIcon color={"primary"} /> : <ChevronLeftIcon color={"primary"} />} {!open ? <ChevronRightIcon color={"primary"} /> : <ChevronLeftIcon color={"primary"} />}
</ListItemIcon> </ListItemIcon>
@ -365,7 +369,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</ListItem> </ListItem>
<Divider /> <Divider />
<List> <List>
<ListItem button onClick={() => setHackingOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<ComputerIcon color={"primary"} /> <ComputerIcon color={"primary"} />
</ListItemIcon> </ListItemIcon>
@ -375,6 +379,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Collapse in={hackingOpen} timeout="auto" unmountOnExit> <Collapse in={hackingOpen} timeout="auto" unmountOnExit>
<List> <List>
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Terminal"} key={"Terminal"}
className={clsx({ className={clsx({
@ -392,6 +397,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</ListItemText> </ListItemText>
</ListItem> </ListItem>
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Create Scripts"} key={"Create Scripts"}
className={clsx({ className={clsx({
@ -407,6 +413,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</ListItemText> </ListItemText>
</ListItem> </ListItem>
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Active Scripts"} key={"Active Scripts"}
className={clsx({ className={clsx({
@ -452,7 +459,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</Collapse> </Collapse>
<Divider /> <Divider />
<ListItem button onClick={() => setCharacterOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<AccountBoxIcon color={"primary"} /> <AccountBoxIcon color={"primary"} />
</ListItemIcon> </ListItemIcon>
@ -479,6 +486,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</ListItem> </ListItem>
{canOpenFactions && ( {canOpenFactions && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Factions"} key={"Factions"}
className={clsx({ className={clsx({
@ -498,6 +506,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
)} )}
{canOpenAugmentations && ( {canOpenAugmentations && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Augmentations"} key={"Augmentations"}
className={clsx({ className={clsx({
@ -537,6 +546,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</ListItem> </ListItem>
{canOpenSleeves && ( {canOpenSleeves && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Sleeves"} key={"Sleeves"}
className={clsx({ className={clsx({
@ -555,7 +565,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</Collapse> </Collapse>
<Divider /> <Divider />
<ListItem button onClick={() => setWorldOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<PublicIcon color={"primary"} /> <PublicIcon color={"primary"} />
</ListItemIcon> </ListItemIcon>
@ -597,6 +607,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</ListItem> </ListItem>
{canJob && ( {canJob && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Job"} key={"Job"}
className={clsx({ className={clsx({
@ -614,6 +625,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
)} )}
{canStockMarket && ( {canStockMarket && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Stock Market"} key={"Stock Market"}
className={clsx({ className={clsx({
@ -631,6 +643,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
)} )}
{canBladeburner && ( {canBladeburner && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Bladeburner"} key={"Bladeburner"}
className={clsx({ className={clsx({
@ -648,6 +661,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
)} )}
{canCorporation && ( {canCorporation && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Corp"} key={"Corp"}
className={clsx({ className={clsx({
@ -665,6 +679,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
)} )}
{canGang && ( {canGang && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Gang"} key={"Gang"}
className={clsx({ className={clsx({
@ -683,7 +698,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</Collapse> </Collapse>
<Divider /> <Divider />
<ListItem button onClick={() => setHelpOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<LiveHelpIcon color={"primary"} /> <LiveHelpIcon color={"primary"} />
</ListItemIcon> </ListItemIcon>
@ -740,6 +755,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</ListItem> </ListItem>
{process.env.NODE_ENV === "development" && ( {process.env.NODE_ENV === "development" && (
<ListItem <ListItem
classes={{ root: classes.listitem }}
button button
key={"Dev"} key={"Dev"}
className={clsx({ className={clsx({