<script>
  // 시안 B — 글로벌 네비 슬림 아이콘 레일 (분류 사이드바 접힘 상태). 앱 토큰 사용.
  import { page } from '$app/stores';
  import { Home, FolderTree, Newspaper, StickyNote, Hash, GraduationCap, MessageCircle, Inbox, CalendarCheck } from 'lucide-svelte';

  const items = [
    { href: '/', icon: Home, label: '홈', exact: true },
    { href: '/library', icon: FolderTree, label: '문서' },
    { href: '/news', icon: Newspaper, label: '뉴스' },
    { href: '/memos', icon: StickyNote, label: '메모' },
    { href: '/clause', icon: Hash, label: '절' },
    { href: '/events', icon: CalendarCheck, label: '일정' },
    { href: '/study', icon: GraduationCap, label: '공부' },
    { href: '/chat', icon: MessageCircle, label: '이드' },
    { href: '/inbox', icon: Inbox, label: '편지함' },
  ];
  let path = $derived($page.url.pathname);
  const active = (it) => (it.exact ? path === it.href : path.startsWith(it.href));
</script>

<nav class="flex flex-col items-center gap-1 py-2 h-full overflow-y-auto bg-sidebar">
  {#each items as it (it.href)}
    {@const Icon = it.icon}
    <a
      href={it.href}
      title={it.label}
      class="flex flex-col items-center justify-center gap-0.5 w-12 h-[46px] rounded-lg text-dim hover:bg-surface-hover hover:text-accent transition-colors {active(it) ? 'bg-surface-active text-accent font-semibold' : ''}"
    >
      <Icon size={17} strokeWidth={1.75} />
      <span class="text-[8.5px] leading-none tracking-tight">{it.label}</span>
    </a>
  {/each}
</nav>
