41 lines
2.5 KiB
Vue
41 lines
2.5 KiB
Vue
<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>
|