watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-15 18:15:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Keep sidenav menu scrollable with fixed user footer

Browse source
This commit is contained in:
Mike Cao 2026-02-12 17:46:31 -08:00
parent fee155c65b
commit 9e9e44519d
2 changed files with 20 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/(main)/App.tsx
View file

@ -47,10 +47,10 @@ export function App({ children }) {
<Row display={{ base: 'flex', lg: 'none' }} alignItems="center" gap padding="3"> <Row display={{ base: 'flex', lg: 'none' }} alignItems="center" gap padding="3">
<MobileNav /> <MobileNav />
</Row> </Row>
<Column display={{ base: 'none', lg: 'flex' }}> <Column display={{ base: 'none', lg: 'flex' }} minHeight="0" style={{ overflow: 'hidden' }}>
<SideNav /> <SideNav />
</Column> </Column>
<Column overflowX="hidden" position="relative"> <Column overflowX="hidden" minHeight="0" position="relative">
<TopNav /> <TopNav />
<Column alignItems="center">{children}</Column> <Column alignItems="center">{children}</Column>
</Column> </Column>

36
src/app/(main)/SideNav.tsx
View file

@ -54,11 +54,11 @@ export function SideNav(props: any) {
<Column <Column
{...props} {...props}
backgroundColor="surface-base" backgroundColor="surface-base"
justifyContent="space-between"
border border
borderRadius borderRadius
paddingX="2" paddingX="2"
height="100%" flexGrow="1"
minHeight="0"
margin="2" margin="2"
style={{ style={{
width: isCollapsed ? '55px' : '240px', width: isCollapsed ? '55px' : '240px',
@ -66,22 +66,22 @@ export function SideNav(props: any) {
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
<Column style={{ minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}> <Row
<Row alignItems="center"
alignItems="center" justifyContent="space-between"
justifyContent="space-between" height="60px"
height="60px" style={{ flexShrink: 0 }}
style={{ flexShrink: 0 }} >
> <Row paddingX="3" alignItems="center" justifyContent="space-between" flexGrow="1">
<Row paddingX="3" alignItems="center" justifyContent="space-between" flexGrow={1}> {!isCollapsed && (
{!isCollapsed && ( <IconLabel icon={<Logo />}>
<IconLabel icon={<Logo />}> <Text weight="bold">umami</Text>
<Text weight="bold">umami</Text> </IconLabel>
</IconLabel> )}
)} <PanelButton />
<PanelButton />
</Row>
</Row> </Row>
</Row>
<Column flexGrow="1" minHeight="0" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
{websiteId ? ( {websiteId ? (
<WebsiteNav websiteId={websiteId} isCollapsed={isCollapsed} /> <WebsiteNav websiteId={websiteId} isCollapsed={isCollapsed} />
) : pathname.includes('/settings') ? ( ) : pathname.includes('/settings') ? (
@ -117,7 +117,7 @@ export function SideNav(props: any) {
</Column> </Column>
)} )}
</Column> </Column>
<Row marginBottom="4"> <Row marginBottom="4" style={{ flexShrink: 0 }}>
<UserButton showText={!isCollapsed} /> <UserButton showText={!isCollapsed} />
</Row> </Row>
</Column> </Column>