120 lines
5.4 KiB
Vue
120 lines
5.4 KiB
Vue
<script setup>
|
|
/**
|
|
* 관리자 설정 화면 내비게이션
|
|
* @property {string} searchValue - 검색 입력 표시값
|
|
* @property {Array} filteredGroups - 검색 결과가 반영된 내비 그룹
|
|
* @property {Array} groups - 전체 내비 그룹
|
|
* @property {string} activeSectionId - 현재 활성 섹션 id
|
|
*/
|
|
defineProps({
|
|
searchValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
filteredGroups: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
groups: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
activeSectionId: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'search-input',
|
|
'search-composition-end',
|
|
'navigate'
|
|
])
|
|
|
|
/**
|
|
* 모바일 구역 선택 변경을 부모 내비게이션 요청으로 전달한다.
|
|
* @param {Event} event - change 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const onMobileNavChange = (event) => {
|
|
const target = event.target
|
|
if (!(target instanceof HTMLSelectElement) || !target.value) {
|
|
return
|
|
}
|
|
|
|
emit('navigate', target.value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="admin-settings-navigation admin-settings-screen__nav-column w-full shrink-0 border-b border-[#e6e8eb] bg-[#f7f8fa] lg:w-72 lg:max-w-[320px] lg:flex-none lg:border-b-0 lg:border-r lg:border-[#e6e8eb]">
|
|
<div class="admin-settings-navigation__inner admin-settings-screen__nav-inner max-h-[40vh] overflow-y-auto p-4 lg:max-h-none lg:h-full lg:overflow-y-auto lg:p-5">
|
|
<label class="admin-settings-navigation__search admin-settings-screen__search relative mb-4 block">
|
|
<span class="sr-only">설정 검색</span>
|
|
<svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa3ad]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
<input
|
|
:value="searchValue"
|
|
class="admin-settings-navigation__search-input admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="search"
|
|
autocomplete="off"
|
|
placeholder="설정 검색"
|
|
@input="$emit('search-input', $event)"
|
|
@compositionupdate="$emit('search-input', $event)"
|
|
@compositionend="$emit('search-composition-end', $event)"
|
|
>
|
|
</label>
|
|
|
|
<p
|
|
v-if="filteredGroups.length === 0"
|
|
class="admin-settings-navigation__empty admin-settings-screen__nav-empty rounded-md border border-dashed border-[#dce0e5] px-3 py-4 text-center text-xs text-[#657080]"
|
|
>
|
|
검색과 일치하는 설정 항목이 없습니다.
|
|
</p>
|
|
<nav v-else class="admin-settings-navigation__list admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
|
|
<template v-for="(group, gi) in filteredGroups" :key="group.heading">
|
|
<div v-if="gi > 0" class="admin-settings-navigation__separator admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
|
|
<div class="admin-settings-navigation__group admin-settings-screen__nav-group">
|
|
<p class="admin-settings-navigation__heading admin-settings-screen__nav-heading mb-2 px-2 text-xs font-semibold tracking-wide text-[#9aa3ad] uppercase">
|
|
{{ group.heading }}
|
|
</p>
|
|
<ul class="admin-settings-navigation__items admin-settings-screen__nav-list grid gap-0.5">
|
|
<li v-for="item in group.items" :key="item.id">
|
|
<button
|
|
class="admin-settings-navigation__item admin-settings-screen__nav-item flex w-full items-center gap-2 rounded-md px-2 py-2 text-left font-medium text-[#5d6673] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
:class="activeSectionId === item.id ? 'bg-[#e9ecef] text-[#15171a]' : ''"
|
|
type="button"
|
|
@click="$emit('navigate', item.id)"
|
|
>
|
|
<AdminSettingsNavIcon :icon-id="item.iconId" />
|
|
<span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</nav>
|
|
|
|
<label class="admin-settings-navigation__jump admin-settings-screen__nav-jump mt-4 grid gap-1 lg:hidden">
|
|
<span class="mb-1 block text-xs font-medium text-[#657080]">구역 이동</span>
|
|
<span class="relative">
|
|
<select
|
|
class="w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-2 py-2 pr-10 text-sm"
|
|
:value="activeSectionId"
|
|
@change="onMobileNavChange"
|
|
>
|
|
<optgroup v-for="group in groups" :key="group.heading" :label="group.heading">
|
|
<option v-for="item in group.items" :key="item.id" :value="item.id">
|
|
{{ item.label }}
|
|
</option>
|
|
</optgroup>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</aside>
|
|
</template>
|