Move settings to upper right and enabled scrollable appbar

This commit is contained in:
James Ketr 2025-04-17 18:40:01 -07:00
parent c9a6f34d5a
commit 77fbc7655b

View File

@ -1055,33 +1055,33 @@ const App = () => {
}} }}
> >
<Toolbar> <Toolbar>
<Tooltip title="LLM Settings"> {
<IconButton mobileOpen === false &&
color="inherit" <Box sx={{ display: "flex", flexGrow: 1 }}>
aria-label="open drawer" <Tabs sx={{ display: "flex", flexGrow: 1 }} value={tab} indicatorColor="secondary"
edge="start" textColor="inherit"
onClick={handleDrawerToggle}
sx={{ mr: 2 }}
>
<SettingsIcon />
</IconButton>
</Tooltip>
{mobileOpen === false &&
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={tab} indicatorColor="secondary"
textColor="inherit"
variant="scrollable" variant="scrollable"
allowScrollButtonsMobile allowScrollButtonsMobile
scrollButtons="auto" scrollButtons="auto"
onChange={handleTabChange} aria-label="Backstory navigation"> onChange={handleTabChange} aria-label="Backstory navigation">
<Tab label="Backstory" icon={<Avatar sx={{ width: 24, height: 24 }} variant="rounded" alt="Backstory logo" src="/logo192.png" />} iconPosition="start" /> <Tab label="Backstory" icon={<Avatar sx={{ width: 24, height: 24 }} variant="rounded" alt="Backstory logo" src="/logo192.png" />} iconPosition="start" />
<Tab label="Resume Builder"/> <Tab label="Resume Builder" />
<Tab label="Context Visualizer" /> <Tab label="Context Visualizer" />
<Tab label="About"/> <Tab label="About" />
</Tabs> </Tabs>
</Box>}
<Tooltip title="LLM Settings">
<IconButton
color="inherit"
aria-label="open drawer"
edge="end"
onClick={handleDrawerToggle}
>
<SettingsIcon />
</IconButton>
</Tooltip>
</Box>
}
{ {
mobileOpen === true && mobileOpen === true &&
<Tooltip title="Close Settings"> <Tooltip title="Close Settings">