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

Rename SideMenu to NavMenu, fix tooltips, and update react-zen.

Browse source 
- Rename SideMenu to NavMenu with visible group title labels and selected item highlighting
- Update react-zen to 0.242.0 and fix responsive breakpoints (xs -> base)
- Style floating tooltips with inverted background across WorldMap, charts, and WeeklyTraffic
- Add CSS variables for primary color and use IconLabel consistently
- Remove stray console.log from LoadingPanel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-02-06 01:58:55 -08:00
parent 7cafc3e61d
commit c6dd3fb6ff
36 changed files with 107 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/(main)/admin/AdminLayout.tsx
View file

@ -13,9 +13,9 @@ export function AdminLayout({ children }: { children: ReactNode }) {
}
return (
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
<Grid columns={{ base: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
<Column
display={{ xs: 'none', lg: 'flex' }}
display={{ base: 'none', lg: 'flex' }}
width="240px"
height="100%"
border="right"

4
src/app/(main)/admin/AdminNav.tsx
View file

@ -1,4 +1,4 @@
import { SideMenu } from '@/components/common/SideMenu';
import { NavMenu } from '@/components/common/NavMenu';
import { useMessages, useNavigation } from '@/components/hooks';
import { Globe, User, Users } from '@/components/icons';
@ -37,7 +37,7 @@ export function AdminNav({ onItemClick }: { onItemClick?: () => void }) {
?.find(({ path }) => path && pathname.startsWith(path))?.id;
return (
<SideMenu
<NavMenu
items={items}
title={formatMessage(labels.admin)}
selectedKey={selectedKey}

2
src/app/(main)/boards/[boardId]/BoardHeader.tsx
View file

@ -76,7 +76,7 @@ function BoardEditHeader() {
return (
<Grid
columns={{ xs: '1fr', md: '1fr 1fr' }}
columns={{ base: '1fr', md: '1fr 1fr' }}
paddingY="4"
marginBottom="6"
border="bottom"

4
src/app/(main)/settings/SettingsLayout.tsx
View file

@ -6,9 +6,9 @@ import { SettingsNav } from './SettingsNav';
export function SettingsLayout({ children }: { children: ReactNode }) {
return (
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
<Grid columns={{ base: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
<Column
display={{ xs: 'none', lg: 'flex' }}
display={{ base: 'none', lg: 'flex' }}
width="240px"
height="100%"
border="right"

4
src/app/(main)/settings/SettingsNav.tsx
View file

@ -1,4 +1,4 @@
import { SideMenu } from '@/components/common/SideMenu';
import { NavMenu } from '@/components/common/NavMenu';
import { useMessages, useNavigation } from '@/components/hooks';
import { Settings2, UserCircle, Users } from '@/components/icons';
@ -42,7 +42,7 @@ export function SettingsNav({ onItemClick }: { onItemClick?: () => void }) {
.find(({ path }) => path && pathname.includes(path.split('?')[0]))?.id;
return (
<SideMenu
<NavMenu
items={items}
title={formatMessage(labels.settings)}
selectedKey={selectedKey}

4
src/app/(main)/websites/[websiteId]/(reports)/attribution/Attribution.tsx
View file

@ -95,7 +95,7 @@ export function Attribution({
})}
</MetricsBar>
<SectionHeader title={formatMessage(labels.sources)} />
<Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>
<Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap>
<Panel>
<AttributionTable data={data?.referrer} title={formatMessage(labels.referrer)} />
</Panel>
@ -104,7 +104,7 @@ export function Attribution({
</Panel>
</Grid>
<SectionHeader title="UTM" />
<Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>
<Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap>
<Panel>
<AttributionTable data={data?.utm_source} title={formatMessage(labels.sources)} />
</Panel>

2
src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.tsx
View file

@ -17,7 +17,7 @@ export function AttributionPage({ websiteId }: { websiteId: string }) {
return (
<Column gap="6">
<WebsiteControls websiteId={websiteId} />
<Grid columns={{ xs: '1fr', md: '1fr 1fr 1fr' }} gap>
<Grid columns={{ base: '1fr', md: '1fr 1fr 1fr' }} gap>
<Column>
<Select
label={formatMessage(labels.model)}

2
src/app/(main)/websites/[websiteId]/(reports)/goals/GoalsPage.tsx
View file

@ -26,7 +26,7 @@ export function GoalsPage({ websiteId }: { websiteId: string }) {
)}
<LoadingPanel data={data} isLoading={isLoading} error={error}>
{data && (
<Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>
<Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap>
{data.data.map((report: any) => (
<Panel key={report.id}>
<Goal {...report} startDate={startDate} endDate={endDate} />

2
src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx
View file

@ -53,7 +53,7 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
<Panel allowFullscreen height="900px">
<Column
paddingY="6"
paddingX={{ xs: '3', md: '6' }}
paddingX={{ base: '3', md: '6' }}
position="absolute"
top="40px"
left="0"

2
src/app/(main)/websites/[websiteId]/(reports)/utm/UTM.tsx
View file

@ -43,7 +43,7 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
return (
<Panel key={param}>
<Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap="6">
<Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap="6">
<Column>
<Heading>
<Text transform="capitalize">{param.replace(/^utm_/, '')}</Text>

4
src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
View file

@ -23,11 +23,11 @@ export function WebsiteControls({
}) {
return (
<Column gap>
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap>
<Grid columns={{ base: '1fr', md: 'auto 1fr' }} gap>
<Row alignItems="center" justifyContent="flex-start" gap="4">
{allowFilter && <WebsiteFilterButton websiteId={websiteId} />}
</Row>
<Row alignItems="center" justifyContent={{ xs: 'flex-start', md: 'flex-end' }}>
<Row alignItems="center" justifyContent={{ base: 'flex-start', md: 'flex-end' }}>
{allowDateFilter && (
<WebsiteDateFilter websiteId={websiteId} allowCompare={allowCompare} />
)}

4
src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx
View file

@ -1,4 +1,4 @@
import { SideMenu } from '@/components/common/SideMenu';
import { NavMenu } from '@/components/common/NavMenu';
import { useMessages, useNavigation } from '@/components/hooks';
import {
AppWindow,
@ -226,5 +226,5 @@ export function WebsiteExpandedMenu({
},
];
return <SideMenu items={items} selectedKey={view} onItemClick={onItemClick} />;
return <NavMenu items={items} selectedKey={view} onItemClick={onItemClick} />;
}

6
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -20,7 +20,7 @@ export function WebsiteExpandedView({
return (
<Column height="100%" overflow="hidden" gap>
<Row id="expanded-mobile-menu-button" display={{ xs: 'flex', md: 'none' }}>
<Row id="expanded-mobile-menu-button" display={{ base: 'flex', md: 'none' }}>
<MobileMenuButton>
{({ close }) => {
return (
@ -31,10 +31,10 @@ export function WebsiteExpandedView({
}}
</MobileMenuButton>
</Row>
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" overflow="hidden">
<Grid columns={{ base: '1fr', md: 'auto 1fr' }} gap="6" overflow="hidden">
<Column
id="metrics-expanded-menu"
display={{ xs: 'none', md: 'flex' }}
display={{ base: 'none', md: 'flex' }}
width="240px"
gap="6"
border="right"

6
src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
View file

@ -1,5 +1,6 @@
import { Icon, Row, Text } from '@umami/react-zen';
import { Favicon } from '@/components/common/Favicon';
import { IconLabel } from '@/components/common/IconLabel';
import { LinkButton } from '@/components/common/LinkButton';
import { PageHeader } from '@/components/common/PageHeader';
import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
@ -34,10 +35,7 @@ export function WebsiteHeader({
{showActions && (
<LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
<Icon>
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
<IconLabel icon={<Edit />}>{formatMessage(labels.edit)}</IconLabel>
</LinkButton>
)}
</Row>

10
src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
View file

@ -9,14 +9,8 @@ import { WebsiteNav } from './WebsiteNav';
export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
return (
<WebsiteProvider websiteId={websiteId}>
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%">
<Column
display={{ xs: 'none', lg: 'flex' }}
width="240px"
border="right"
backgroundColor
marginRight="2"
>
<Grid columns={{ base: '1fr', lg: 'auto 1fr' }} width="100%">
<Column display={{ base: 'none', lg: 'flex' }} width="240px" border="right" marginRight="2">
<WebsiteNav websiteId={websiteId} />
</Column>
<PageBody gap>

6
src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
View file

@ -1,5 +1,5 @@
import { Column, Text } from '@umami/react-zen';
import { SideMenu } from '@/components/common/SideMenu';
import { NavMenu } from '@/components/common/NavMenu';
import { useMessages, useNavigation } from '@/components/hooks';
import {
AlignEndHorizontal,
@ -163,7 +163,7 @@ export function WebsiteNav({
.find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
return (
<Column padding="2" position="sticky" top="0" gap backgroundColor="transparent">
<Column padding="2" position="sticky" top="0" gap>
<WebsiteSelect
websiteId={websiteId}
teamId={teamId}
@ -171,7 +171,7 @@ export function WebsiteNav({
renderValue={renderValue}
buttonProps={{ style: { outline: 'none' } }}
/>
<SideMenu
<NavMenu
items={items}
selectedKey={selectedKey}
allowMinimize={false}

5
src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
View file

@ -1,7 +1,7 @@
import { Grid, Heading, Row, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { Panel } from '@/components/common/Panel';
import { useMessages } from '@/components/hooks';
import { useMessages, useMobile } from '@/components/hooks';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { WeeklyTraffic } from '@/components/metrics/WeeklyTraffic';
import { WorldMap } from '@/components/metrics/WorldMap';
@ -16,6 +16,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
metric: formatMessage(labels.visitors),
};
const rowProps = { minHeight: '570px' };
const { isMobile } = useMobile();
return (
<Grid gap="3">
@ -103,7 +104,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
</GridRow>
<GridRow layout="two-one" {...rowProps}>
<Panel gridColumn={{ xs: 'span 1', md: 'span 2' }} paddingX="0" paddingY="0">
<Panel paddingX="0" paddingY="0" style={{ gridColumn: isMobile ? 'span 1' : 'span 2' }}>
<WorldMap websiteId={websiteId} />
</Panel>

2
src/app/(main)/websites/[websiteId]/cohorts/CohortEditForm.tsx
View file

@ -80,7 +80,7 @@ export function CohortEditForm({
<Column>
<Label>{formatMessage(labels.action)}</Label>
<Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>
<Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap>
<Column>
<FormField
name="parameters.action.type"

2
src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
View file

@ -166,7 +166,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
</Select>
</Row>
<Panel minHeight="300px">
<Grid columns={{ xs: '1fr', lg: '1fr 1fr' }} gap="6" height="100%">
<Grid columns={{ base: '1fr', lg: '1fr 1fr' }} gap="6" height="100%">
<Column gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="base">{formatMessage(labels.previous)}</Heading>

2
src/app/global.css
View file

@ -1,5 +1,7 @@
:root {
--font-family: var(--font-inter), sans-serif;
--primary: oklch(62.3% 0.214 259.815);
--primary-foreground: oklch(98.5% 0 0);
}
html,

5
src/app/share/[slug]/[[...path]]/ShareNav.tsx
View file

@ -1,5 +1,5 @@
import { Button, Column, Icon, Row, Text, ThemeButton } from '@umami/react-zen';
import { SideMenu } from '@/components/common/SideMenu';
import { NavMenu } from '@/components/common/NavMenu';
import { useMessages, useNavigation, useShare } from '@/components/hooks';
import { AlignEndHorizontal, Clock, Eye, PanelLeft, Sheet, Tag, User } from '@/components/icons';
import { LanguageButton } from '@/components/input/LanguageButton';
@ -147,7 +147,6 @@ export function ShareNav({
maxHeight="100dvh"
height="100dvh"
border={isMobile ? undefined : 'right'}
borderColor={isMobile ? undefined : '4'}
>
<Row as="header" gap alignItems="center" justifyContent="space-between">
{!collapsed && (
@ -174,7 +173,7 @@ export function ShareNav({
</Row>
{!collapsed && (
<Column flexGrow={1} overflowY="auto">
<SideMenu
<NavMenu
items={items}
selectedKey={selectedKey}
allowMinimize={false}

6
src/app/share/[slug]/[[...path]]/SharePage.tsx
View file

@ -79,15 +79,15 @@ export function SharePage() {
const PageComponent = PAGE_COMPONENTS[pageKey] || WebsitePage;
return (
<Grid columns={{ xs: '1fr', lg: `${navCollapsed ? '60px' : '240px'} 1fr` }} width="100%">
<Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap padding="3">
<Grid columns={{ base: '1fr', lg: `${navCollapsed ? '60px' : '240px'} 1fr` }} width="100%">
<Row display={{ base: 'flex', lg: 'none' }} alignItems="center" gap padding="3">
<MobileMenuButton>
{({ close }) => {
return <ShareNav onItemClick={close} />;
}}
</MobileMenuButton>
</Row>
<Column display={{ xs: 'none', lg: 'flex' }} marginRight="2">
<Column display={{ base: 'none', lg: 'flex' }} marginRight="2">
<ShareNav collapsed={navCollapsed} onCollapse={setNavCollapsed} />
</Column>
<PageBody gap>