add page icons to collapsed share menu

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',
       }}

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

@@ -18,7 +18,7 @@ export function WebsiteNav({
   const { items, selectedKey } = useWebsiteNavItems(websiteId);
 
   return (
-    <Column gap="2">
+    <Column gap="2" marginTop={isCollapsed ? '2' : undefined}>
       <Link href={renderUrl('/websites', false)} role="button" onClick={onItemClick}>
         <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
           <Focusable>

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: <Eye />,
-          path: renderPath(''),
-        },
-        {
-          id: 'events',
-          label: t(labels.events),
-          icon: <Lightning />,
-          path: renderPath('/events'),
-        },
+        { id: 'overview', label: t(labels.overview), icon: <Eye />, path: renderPath('') },
+        { id: 'events', label: t(labels.events), icon: <Lightning />, 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: <Target />,
-          path: renderPath('/goals'),
-        },
-        {
-          id: 'funnels',
-          label: t(labels.funnels),
-          icon: <Funnel />,
-          path: renderPath('/funnels'),
-        },
+        { id: 'goals', label: t(labels.goals), icon: <Target />, path: renderPath('/goals') },
+        { id: 'funnels', label: t(labels.funnels), icon: <Funnel />, 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: <Tag />,
-          path: renderPath('/utm'),
-        },
-        {
-          id: 'revenue',
-          label: t(labels.revenue),
-          icon: <Money />,
-          path: renderPath('/revenue'),
-        },
+        { id: 'utm', label: t(labels.utm), icon: <Tag />, path: renderPath('/utm') },
+        { id: 'revenue', label: t(labels.revenue), icon: <Money />, path: renderPath('/revenue') },
         {
           id: 'attribution',
           label: t(labels.attribution),
@@ -145,13 +126,19 @@ export function ShareNav({
   return (
     <Column
       position={isMobile ? undefined : 'fixed'}
-      padding="3"
+      paddingX={collapsed ? '1' : '3'}
+      paddingY="3"
       width={isMobile ? '100%' : collapsed ? '60px' : '240px'}
       maxHeight="100dvh"
       height="100dvh"
       border={isMobile ? undefined : 'right'}
     >
-      <Row as="header" gap alignItems="center" justifyContent="space-between">
+      <Row
+        as="header"
+        gap
+        alignItems="center"
+        justifyContent={collapsed ? 'center' : 'space-between'}
+      >
         {!collapsed && <ShareBranding size="md" />}
         {!onItemClick && (
           <Button variant="quiet" onPress={() => onCollapse?.(!collapsed)}>
@@ -161,16 +148,44 @@ export function ShareNav({
           </Button>
         )}
       </Row>
-      {!collapsed && (
-        <Column flexGrow={1} overflowY="auto" marginTop="6">
-          <NavMenu
-            items={items}
-            selectedKey={selectedKey}
-            allowMinimize={false}
-            onItemClick={onItemClick}
-          />
-        </Column>
-      )}
+      <Column flexGrow={1} marginTop="2" overflowY="auto" gap="2">
+        {items.map(({ label: sectionLabel, items: sectionItems }, index) => (
+          <Column key={`${sectionLabel}${index}`} gap="1" marginBottom="1">
+            {!collapsed && (
+              <Row padding>
+                <Text weight="bold">{sectionLabel}</Text>
+              </Row>
+            )}
+            {sectionItems.map(({ id, path, label, icon }) => {
+              const isSelected = selectedKey === id;
+              return (
+                <Link key={id} href={path} role="button" onClick={onItemClick}>
+                  <TooltipTrigger isDisabled={!collapsed} delay={0}>
+                    <Focusable>
+                      <Row
+                        alignItems="center"
+                        justifyContent={collapsed ? 'center' : undefined}
+                        hover={{ backgroundColor: 'surface-sunken' }}
+                        backgroundColor={isSelected ? 'surface-sunken' : undefined}
+                        borderRadius
+                        minHeight="40px"
+                      >
+                        <IconLabel
+                          icon={icon}
+                          label={collapsed ? '' : label}
+                          weight={isSelected ? 'bold' : undefined}
+                          {...(!collapsed && { padding: true })}
+                        />
+                      </Row>
+                    </Focusable>
+                    <Tooltip placement="right">{label}</Tooltip>
+                  </TooltipTrigger>
+                </Link>
+              );
+            })}
+          </Column>
+        ))}
+      </Column>
       <Column
         flexGrow={collapsed ? 1 : undefined}
         justifyContent="flex-end"

src/app/share/[slug]/[[...path]]/SharePage.tsx

@@ -59,7 +59,14 @@ function getSharePath(pathname: string) {
 }
 
 export function SharePage() {
-  const [navCollapsed, setNavCollapsed] = useState(false);
+  const [navCollapsed, setNavCollapsed] = useState(
+    () => 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() {
         </MobileMenuButton>
       </Row>
       <Column display={{ base: 'none', lg: 'flex' }} marginRight="2">
-        <ShareNav collapsed={navCollapsed} onCollapse={setNavCollapsed} />
+        <ShareNav collapsed={navCollapsed} onCollapse={handleCollapse} />
       </Column>
       <PageBody gap>
         <WebsiteProvider websiteId={websiteId}>