cloudflare-domain-manager/apps/web/src/components/app-sidebar.tsx

import { Link, useRouterState } from '@tanstack/react-router'
import {
  LayoutDashboardIcon,
  GlobeIcon,
  FolderTreeIcon,
  ServerIcon,
  ShieldCheckIcon,
  SettingsIcon,
} from 'lucide-react'
import { AppSwitcher } from '@/components/app-switcher'
import { NavUser } from '@/components/nav-user'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@cfdm/ui/components/sidebar'

const infrastructureNav = [
  { to: '/', label: 'Панель управления', icon: LayoutDashboardIcon, exact: true },
  { to: '/domains', label: 'Домены', icon: GlobeIcon, exact: false },
] as const

const operationsNav = [
  { to: '/services', label: 'Сервисы', icon: ServerIcon, exact: false },
  { to: '/settings/appearance', label: 'Настройки', icon: SettingsIcon, exact: false, matchPrefix: '/settings' },
] as const

const secondaryNav = [
  { to: '/groups', label: 'Группы доменов', icon: FolderTreeIcon, exact: false },
  { to: '/certificates', label: 'Сертификаты', icon: ShieldCheckIcon, exact: false },
] as const

function isNavActive(
  pathname: string,
  to: string,
  exact: boolean,
  matchPrefix?: string,
) {
  if (matchPrefix) {
    return pathname === matchPrefix || pathname.startsWith(`${matchPrefix}/`)
  }
  if (exact) return pathname === to
  return pathname === to || pathname.startsWith(`${to}/`)
}

function NavSection({
  label,
  items,
  pathname,
}: {
  label: string
  items: readonly {
    to: string
    label: string
    icon: typeof GlobeIcon
    exact: boolean
    matchPrefix?: string
  }[]
  pathname: string
}) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>{label}</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          {items.map((item) => (
            <SidebarMenuItem key={item.to}>
              <SidebarMenuButton
                tooltip={item.label}
                isActive={isNavActive(
                  pathname,
                  item.to,
                  item.exact,
                  item.matchPrefix,
                )}
                render={
                  <Link
                    to={item.to}
                    activeOptions={{ exact: item.exact }}
                  />
                }
              >
                <item.icon className="size-4" />
                <span>{item.label}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}

export function AppSidebar() {
  const pathname = useRouterState({ select: (s) => s.location.pathname })

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <AppSwitcher />
      </SidebarHeader>
      <SidebarContent>
        <NavSection label="Инфраструктура" items={infrastructureNav} pathname={pathname} />
        <NavSection label="Операции" items={operationsNav} pathname={pathname} />
        <NavSection label="Прочее" items={secondaryNav} pathname={pathname} />
      </SidebarContent>
      <SidebarFooter>
        <NavUser />
      </SidebarFooter>
    </Sidebar>
  )
}