100 lines
3.0 KiB
Vue
100 lines
3.0 KiB
Vue
|
<script setup>
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|||
|
|
import { useAuthStore } from '@/stores/auth'
|
|||
|
|
import { useUiStore } from '@/stores/ui'
|
|||
|
|
|
|||
|
|
const auth = useAuthStore()
|
|||
|
|
const ui = useUiStore()
|
|||
|
|
const route = useRoute()
|
|||
|
|
// 가계부 섹션에 있을 때만 하위 메뉴 노출
|
|||
|
|
const inAccount = computed(() => route.path.startsWith('/account'))
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<aside class="app-sidebar">
|
|||
|
|
<div class="drawer-head">
|
|||
|
|
<span class="drawer-title">메뉴</span>
|
|||
|
|
<button class="drawer-close" type="button" aria-label="닫기" @click="ui.closeSidebar()">×</button>
|
|||
|
|
</div>
|
|||
|
|
<nav class="menu">
|
|||
|
|
<RouterLink to="/" class="menu-item">홈</RouterLink>
|
|||
|
|
<RouterLink v-if="auth.isAuthenticated" to="/board" class="menu-item">자유게시판</RouterLink>
|
|||
|
|
<RouterLink v-if="auth.isAuthenticated" to="/account" class="menu-item">가계부</RouterLink>
|
|||
|
|
<template v-if="auth.isAuthenticated && inAccount">
|
|||
|
|
<RouterLink to="/account/entries" class="menu-item sub">가계부 내역</RouterLink>
|
|||
|
|
<RouterLink to="/account/recurrings" class="menu-item sub">정기 거래</RouterLink>
|
|||
|
|
<RouterLink to="/account/wallets" class="menu-item sub">계좌 관리</RouterLink>
|
|||
|
|
<RouterLink to="/account/categories" class="menu-item sub">분류 관리</RouterLink>
|
|||
|
|
<RouterLink to="/account/budget" class="menu-item sub">예산 설정</RouterLink>
|
|||
|
|
<RouterLink to="/account/tags" class="menu-item sub">태그 관리</RouterLink>
|
|||
|
|
</template>
|
|||
|
|
<RouterLink v-if="auth.isAuthenticated" to="/users" class="menu-item">사용자 관리</RouterLink>
|
|||
|
|
<RouterLink v-if="auth.user?.role === 'ADMIN'" to="/admin/tags" class="menu-item">태그 관리</RouterLink>
|
|||
|
|
</nav>
|
|||
|
|
</aside>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.app-sidebar {
|
|||
|
|
background: var(--color-background-soft);
|
|||
|
|
border-right: 1px solid var(--color-border);
|
|||
|
|
padding: 1rem 0;
|
|||
|
|
}
|
|||
|
|
.drawer-head {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.app-sidebar {
|
|||
|
|
background: var(--color-background);
|
|||
|
|
min-height: 100%;
|
|||
|
|
}
|
|||
|
|
.drawer-head {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0.5rem 1rem 0.75rem;
|
|||
|
|
border-bottom: 1px solid var(--color-border);
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.drawer-title {
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.drawer-close {
|
|||
|
|
border: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--color-text);
|
|||
|
|
font-size: 1.6rem;
|
|||
|
|
line-height: 1;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.menu {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.menu-item {
|
|||
|
|
padding: 0.7rem 1.5rem;
|
|||
|
|
color: var(--color-text);
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
.menu-item.sub {
|
|||
|
|
padding: 0.5rem 1.5rem 0.5rem 2.6rem;
|
|||
|
|
font-size: 0.88rem;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.menu-item:hover {
|
|||
|
|
background: var(--color-background-mute);
|
|||
|
|
}
|
|||
|
|
.menu-item.router-link-exact-active {
|
|||
|
|
color: hsla(160, 100%, 37%, 1);
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-left: 3px solid hsla(160, 100%, 37%, 1);
|
|||
|
|
padding-left: calc(1.5rem - 3px);
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
.menu-item.sub.router-link-exact-active {
|
|||
|
|
padding-left: calc(2.6rem - 3px);
|
|||
|
|
}
|
|||
|
|
</style>
|