<script setup lang="ts">
import { RouterLink } from 'vue-router'
import type { NavigationEntry, NavigationSection } from './navigationCatalog'

const props = withDefaults(defineProps<{
  sections: NavigationSection[]
  favorites?: NavigationEntry[]
  activePath?: string
  collapsed?: boolean
}>(), { favorites: () => [], activePath: '', collapsed: false })
const emit = defineEmits<{ toggleCollapsed: [] }>()
</script>

<template>
  <aside class="ks-side-nav" :class="{ 'ks-side-nav--collapsed': props.collapsed }" aria-label="주요 메뉴">
    <button type="button" class="ks-side-nav__toggle" :aria-expanded="!props.collapsed" @click="emit('toggleCollapsed')">
      {{ props.collapsed ? '»' : '« 접기' }}
    </button>
    <template v-if="!props.collapsed">
      <section v-if="favorites.length" class="ks-side-nav__section">
        <h2>즐겨찾기</h2>
        <RouterLink v-for="entry in favorites" :key="entry.screenId" :to="entry.path" :class="{ active: entry.path === activePath }">★ {{ entry.title }}</RouterLink>
      </section>
      <section v-for="section in sections" :key="section.module" class="ks-side-nav__section">
        <h2>{{ section.module }}</h2>
        <RouterLink v-for="entry in section.entries" :key="entry.screenId" :to="entry.path" :class="{ active: entry.path === activePath }">{{ entry.title }}</RouterLink>
      </section>
    </template>
  </aside>
</template>

<style scoped>
.ks-side-nav { width: var(--ks-shell-sidenav-width); flex-shrink: 0; display: grid; gap: var(--ks-space-3); align-content: start; padding: var(--ks-space-3) var(--ks-space-2); border-right: 1px solid var(--ks-color-border); background: var(--ks-color-surface); overflow-y: auto; }
.ks-side-nav--collapsed { width: var(--ks-shell-sidenav-collapsed); padding: var(--ks-space-3) var(--ks-space-1); }
.ks-side-nav__toggle { justify-self: end; border: 0; background: transparent; color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); cursor: pointer; }
.ks-side-nav__section { display: grid; gap: var(--ks-space-1); }
.ks-side-nav__section h2 { margin: 0 var(--ks-space-2); font-size: var(--ks-font-caption); font-weight: 600; color: var(--ks-color-text-muted); text-transform: uppercase; }
.ks-side-nav__section a { padding: var(--ks-space-2) var(--ks-space-2); border-radius: var(--ks-radius-sm); text-decoration: none; color: var(--ks-color-text); font-size: var(--ks-font-body); }
.ks-side-nav__section a.active, .ks-side-nav__section a.router-link-active { background: var(--ks-color-neutral-100); font-weight: 700; }
</style>
