Fixed nav display.

This commit is contained in:
Mike Cao 2025-07-20 00:38:15 -07:00
parent 2f7f8911cd
commit 25f96f6b6b
5 changed files with 30 additions and 32 deletions

View file

@ -21,8 +21,9 @@ import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
export function SideNav(props: SidebarProps) { export function SideNav(props: SidebarProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { pathname, renderUrl, websiteId } = useNavigation(); const { pathname, renderUrl, websiteId, teamId } = useNavigation();
const [isCollapsed] = useGlobalState('sidenav-collapsed'); const [isCollapsed] = useGlobalState('sidenav-collapsed');
const isWebsite = websiteId && !pathname.includes('/settings');
const links = [ const links = [
{ {
@ -67,10 +68,10 @@ export function SideNav(props: SidebarProps) {
]; ];
return ( return (
<Row height="100%" margin="2" backgroundColor border borderRadius> <Row height="100%" backgroundColor border="right">
<Sidebar <Sidebar
{...props} {...props}
isCollapsed={isCollapsed || websiteId} isCollapsed={isCollapsed || isWebsite}
muteItems={false} muteItems={false}
variant="quiet" variant="quiet"
showBorder={false} showBorder={false}
@ -88,16 +89,17 @@ export function SideNav(props: SidebarProps) {
})} })}
</SidebarSection> </SidebarSection>
<SidebarSection> <SidebarSection>
{bottomLinks.map(({ id, path, label, icon }) => { {!teamId &&
return ( bottomLinks.map(({ id, path, label, icon }) => {
<Link key={id} href={path} role="button"> return (
<SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} /> <Link key={id} href={path} role="button">
</Link> <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
); </Link>
})} );
})}
</SidebarSection> </SidebarSection>
</Sidebar> </Sidebar>
{websiteId && <WebsiteNav websiteId={websiteId} />} {isWebsite && <WebsiteNav websiteId={websiteId} />}
</Row> </Row>
); );
} }

View file

@ -9,7 +9,7 @@ import { PanelButton } from '@/components/input/PanelButton';
export function TopNav() { export function TopNav() {
const { teamId, websiteId, pathname } = useNavigation(); const { teamId, websiteId, pathname } = useNavigation();
const isSettings = pathname.includes('/settings'); const isWebsite = websiteId && !pathname.includes('/settings');
return ( return (
<Row <Row
@ -24,21 +24,19 @@ export function TopNav() {
zIndex={1} zIndex={1}
> >
<Row alignItems="center"> <Row alignItems="center">
<PanelButton /> <PanelButton isDisabled={!!isWebsite} />
<Seperator /> <Seperator />
<Row alignItems="center" gap="1"> <TeamsButton />
<TeamsButton /> {isWebsite && (
{websiteId && !isSettings && ( <>
<> <Seperator />
<Seperator /> <WebsiteSelect
<WebsiteSelect buttonProps={{ variant: 'quiet' }}
buttonProps={{ variant: 'quiet' }} websiteId={websiteId}
websiteId={websiteId} teamId={teamId}
teamId={teamId} />
/> </>
</> )}
)}
</Row>
</Row> </Row>
<Row alignItems="center" justifyContent="flex-end"> <Row alignItems="center" justifyContent="flex-end">
<ThemeButton /> <ThemeButton />

View file

@ -134,7 +134,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
'overview'; 'overview';
return ( return (
<Column gap padding width="240px" border="left"> <Column gap padding width="240px" border="left" overflowY="auto">
<NavMenu highlightColor="2"> <NavMenu highlightColor="2">
{links.map(({ label, items }) => { {links.map(({ label, items }) => {
return ( return (

View file

@ -1,11 +1,11 @@
import { Button, Icon } from '@umami/react-zen'; import { Button, Icon, ButtonProps } from '@umami/react-zen';
import { PanelLeft } from '@/components/icons'; import { PanelLeft } from '@/components/icons';
import { useGlobalState } from '@/components/hooks'; import { useGlobalState } from '@/components/hooks';
export function PanelButton() { export function PanelButton(props: ButtonProps) {
const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed'); const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
return ( return (
<Button onPress={() => setIsCollapsed(!isCollapsed)} variant="quiet"> <Button onPress={() => setIsCollapsed(!isCollapsed)} variant="quiet" {...props}>
<Icon> <Icon>
<PanelLeft /> <PanelLeft />
</Icon> </Icon>

View file

@ -170,8 +170,6 @@ async function clickhouseQuery(
from ( from (
select session_id s, select session_id s,
${columnQuery} as t ${columnQuery} as t
from website_event_stats_hourly website_event
select ${columnQuery} as t
from website_event_stats_hourly as website_event from website_event_stats_hourly as website_event
${cohortQuery} ${cohortQuery}
where website_id = {websiteId:UUID} where website_id = {websiteId:UUID}