diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx index 55ff27cd1..d66c1cc84 100644 --- a/src/app/(main)/SideNav.tsx +++ b/src/app/(main)/SideNav.tsx @@ -1,15 +1,3 @@ -import { - Button, - type ButtonProps, - Column, - Focusable, - Icon, - Row, - Text, - Tooltip, - TooltipTrigger, -} from '@umami/react-zen'; -import Link from 'next/link'; import { AdminNav } from '@/app/(main)/admin/AdminNav'; import { SettingsNav } from '@/app/(main)/settings/SettingsNav'; import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav'; @@ -25,6 +13,18 @@ import { } from '@/components/icons'; import { UserButton } from '@/components/input/UserButton'; import { Logo } from '@/components/svg'; +import { + Button, + type ButtonProps, + Column, + Focusable, + Icon, + Row, + Text, + Tooltip, + TooltipTrigger, +} from '@umami/react-zen'; +import Link from 'next/link'; export function SideNav(props: any) { const { t, labels } = useMessages(); @@ -79,7 +79,7 @@ export function SideNav(props: any) { minHeight="0" margin="2" style={{ - width: isCollapsed ? '55px' : '240px', + width: isCollapsed ? '60px' : '240px', transition: 'width 0.2s ease-in-out', overflow: 'hidden', }} diff --git a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx index bd1d31f94..1b99bac1e 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx @@ -18,7 +18,7 @@ export function WebsiteNav({ const { items, selectedKey } = useWebsiteNavItems(websiteId); return ( - + diff --git a/src/app/share/[slug]/[[...path]]/ShareNav.tsx b/src/app/share/[slug]/[[...path]]/ShareNav.tsx index 7c6e28cfe..3dd743444 100644 --- a/src/app/share/[slug]/[[...path]]/ShareNav.tsx +++ b/src/app/share/[slug]/[[...path]]/ShareNav.tsx @@ -1,10 +1,21 @@ -import { Button, Column, Icon, Row, ThemeButton } from '@umami/react-zen'; -import { NavMenu } from '@/components/common/NavMenu'; +import { IconLabel } from '@/components/common/IconLabel'; import { useMessages, useNavigation, useShare } from '@/components/hooks'; import { AlignEndHorizontal, Clock, Eye, PanelLeft, Sheet, Tag, User } from '@/components/icons'; import { LanguageButton } from '@/components/input/LanguageButton'; import { PreferencesButton } from '@/components/input/PreferencesButton'; import { Funnel, Gauge, Lightning, Magnet, Money, Network, Path, Target } from '@/components/svg'; +import { + Button, + Column, + Focusable, + Icon, + Row, + Text, + ThemeButton, + Tooltip, + TooltipTrigger, +} from '@umami/react-zen'; +import Link from 'next/link'; import { ShareBranding } from './ShareBranding'; export function ShareNav({ @@ -28,18 +39,8 @@ export function ShareNav({ section: 'traffic', label: t(labels.traffic), items: [ - { - id: 'overview', - label: t(labels.overview), - icon: , - path: renderPath(''), - }, - { - id: 'events', - label: t(labels.events), - icon: , - path: renderPath('/events'), - }, + { id: 'overview', label: t(labels.overview), icon: , path: renderPath('') }, + { id: 'events', label: t(labels.events), icon: , path: renderPath('/events') }, { id: 'sessions', label: t(labels.sessions), @@ -76,18 +77,8 @@ export function ShareNav({ section: 'behavior', label: t(labels.behavior), items: [ - { - id: 'goals', - label: t(labels.goals), - icon: , - path: renderPath('/goals'), - }, - { - id: 'funnels', - label: t(labels.funnels), - icon: , - path: renderPath('/funnels'), - }, + { id: 'goals', label: t(labels.goals), icon: , path: renderPath('/goals') }, + { id: 'funnels', label: t(labels.funnels), icon: , path: renderPath('/funnels') }, { id: 'journeys', label: t(labels.journeys), @@ -106,18 +97,8 @@ export function ShareNav({ section: 'growth', label: t(labels.growth), items: [ - { - id: 'utm', - label: t(labels.utm), - icon: , - path: renderPath('/utm'), - }, - { - id: 'revenue', - label: t(labels.revenue), - icon: , - path: renderPath('/revenue'), - }, + { id: 'utm', label: t(labels.utm), icon: , path: renderPath('/utm') }, + { id: 'revenue', label: t(labels.revenue), icon: , path: renderPath('/revenue') }, { id: 'attribution', label: t(labels.attribution), @@ -145,13 +126,19 @@ export function ShareNav({ return ( - + {!collapsed && } {!onItemClick && ( )} - {!collapsed && ( - - - - )} + + {items.map(({ label: sectionLabel, items: sectionItems }, index) => ( + + {!collapsed && ( + + {sectionLabel} + + )} + {sectionItems.map(({ id, path, label, icon }) => { + const isSelected = selectedKey === id; + return ( + + + + + + + + {label} + + + ); + })} + + ))} + typeof window !== 'undefined' && localStorage.getItem('share:navCollapsed') === 'true', + ); + + const handleCollapse = (value: boolean) => { + localStorage.setItem('share:navCollapsed', String(value)); + setNavCollapsed(value); + }; const share = useShare(); const { setTheme } = useTheme(); const pathname = usePathname(); @@ -113,7 +120,7 @@ export function SharePage() { - +