umami/src/app/(main)/SideNav.tsx

import Link from 'next/link';
import {
  Sidebar,
  SidebarSection,
  SidebarItem,
  SidebarHeader,
  Row,
  SidebarProps,
  ThemeButton,
} from '@umami/react-zen';
import { Globe, LinkIcon, LogoSvg, Grid2x2, PanelLeft } from '@/components/icons';
import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
import { TeamsButton } from '@/components/input/TeamsButton';
import { PanelButton } from '@/components/input/PanelButton';
import { Key } from 'react';
import { SettingsButton } from '@/components/input/SettingsButton';

export function SideNav(props: SidebarProps) {
  const { formatMessage, labels } = useMessages();
  const { pathname, renderUrl, websiteId, router } = useNavigation();
  const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');

  const hasNav = !!(websiteId || pathname.startsWith('/admin') || pathname.includes('/settings'));

  const links = [
    {
      id: 'websites',
      label: formatMessage(labels.websites),
      path: '/websites',
      icon: <Globe />,
    },
    {
      id: 'links',
      label: formatMessage(labels.links),
      path: '/links',
      icon: <LinkIcon />,
    },
    {
      id: 'pixels',
      label: formatMessage(labels.pixels),
      path: '/pixels',
      icon: <Grid2x2 />,
    },
  ];

  const handleSelect = (id: Key) => {
    router.push(id === 'user' ? '/websites' : `/teams/${id}/websites`);
  };

  return (
    <Row height="100%" backgroundColor border="right">
      <Sidebar {...props} isCollapsed={isCollapsed || hasNav} muteItems={false} showBorder={false}>
        <SidebarSection onClick={() => setIsCollapsed(false)}>
          <SidebarHeader
            label="umami"
            icon={isCollapsed && !hasNav ? <PanelLeft /> : <LogoSvg />}
            style={{ maxHeight: 40 }}
          >
            {!isCollapsed && !hasNav && <PanelButton />}
          </SidebarHeader>
        </SidebarSection>
        <SidebarSection paddingTop="0" paddingBottom="0" justifyContent="center">
          <TeamsButton showText={!hasNav && !isCollapsed} onAction={handleSelect} />
        </SidebarSection>
        <SidebarSection flexGrow={1}>
          {links.map(({ id, path, label, icon }) => {
            return (
              <Link key={id} href={renderUrl(path, false)} role="button">
                <SidebarItem
                  label={label}
                  icon={icon}
                  isSelected={pathname.endsWith(path)}
                  role="button"
                />
              </Link>
            );
          })}
        </SidebarSection>
        <SidebarSection justifyContent="flex-start">
          <Row>
            <SettingsButton />
            {!isCollapsed && !hasNav && <ThemeButton />}
          </Row>
        </SidebarSection>
      </Sidebar>
    </Row>
  );
}