brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added a help button at the bottom of the scrollbar

Browse source
This commit is contained in:
Carter 2026-06-08 16:19:46 -06:00
parent 7f1b907fa0
commit 9d6af5dd16
1 changed files with 47 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/navigation/SideNavigator.tsx
View file

@ -1,20 +1,21 @@
import { ChevronRight, Code, Grain, Memory, People, Person, SyncAlt, TapAndPlay } from "@mui/icons-material"; import { ChevronRight, Code, Grain, HelpOutline, Memory, People, Person, SyncAlt, TapAndPlay } from "@mui/icons-material";
import ChevronLeft from "@mui/icons-material/ChevronLeft"; import ChevronLeft from "@mui/icons-material/ChevronLeft";
import { import {
darken, Box,
Divider, darken,
Grid2 as Grid, Divider,
IconButton, Grid2 as Grid,
lighten, IconButton,
List, lighten,
ListItemButton, List,
ListItemIcon, ListItemButton,
ListItemText, ListItemIcon,
SwipeableDrawer, ListItemText,
Theme, SwipeableDrawer,
Toolbar, Theme,
Tooltip, Toolbar,
useTheme Tooltip,
useTheme
} from "@mui/material"; } from "@mui/material";
import classNames from "classnames"; import classNames from "classnames";
import { useMobile, useWidth } from "../hooks/useWidth"; import { useMobile, useWidth } from "../hooks/useWidth";
@ -529,23 +530,37 @@ export default function SideNavigator(props: Props) {
onClose={onClose} onClose={onClose}
sx={{ pointerEvents: isMobile&&!open ? "none" : "auto"}} sx={{ pointerEvents: isMobile&&!open ? "none" : "auto"}}
> >
<Toolbar> <Box sx={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
<Grid container direction="row" justifyContent={"flex-end"}> <Toolbar disableGutters sx={{ px: 1 }}>
<Grid> <Grid container direction="row" justifyContent={"flex-end"}>
<IconButton <Grid>
onClick={open ? onClose : onOpen} <IconButton
aria-label={open ? "Close side menu" : "Open side menu"} onClick={open ? onClose : onOpen}
> aria-label={open ? "Close side menu" : "Open side menu"}
{open >
? theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft /> {open
: theme.direction === "rtl" ? <ChevronLeft /> : <ChevronRight />} ? theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />
</IconButton> : theme.direction === "rtl" ? <ChevronLeft /> : <ChevronRight />}
</IconButton>
</Grid>
</Grid> </Grid>
</Grid> </Toolbar>
</Toolbar> <Divider />
<Divider /> <Box sx={{ flex: 1, overflowY: "auto", scrollbarWidth: "none", "&::-webkit-scrollbar": { display: "none" } }}>
{/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */} {isAuthenticated && authenticatedSideMenu()}
{isAuthenticated && authenticatedSideMenu()} </Box>
<Divider />
<List>
<Tooltip title="Help" placement="right">
<ListItemButton classes={{ root: classes.listItem }}>
<ListItemIcon>
<HelpOutline style={{ color: getThemeType() === "light" ? "black" : undefined }} />
</ListItemIcon>
{open && <ListItemText primary="Help" />}
</ListItemButton>
</Tooltip>
</List>
</Box>
</SwipeableDrawer> </SwipeableDrawer>
); );
} }