V13-FE-011: finalize search list layout slice

2026-08-09 02:57:26 +09:00
parent 9efd202e76
commit 6422cb2b13
984 changed files with 120811 additions and 1498 deletions
@@ -0,0 +1,40 @@
+<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>