ByungCheol
67aa635dd8
CI / build (push) Failing after 12m23s
- 사이드바: '가계부' 상위 메뉴 제거, 단일 레벨로(홈/가계부 내역/통계/정기거래/계좌/분류/예산/태그/자유게시판) - 자유게시판을 가계부 메뉴들 아래로 이동 - 홈(/)을 통합 대시보드로, 기존 가계부 대시보드 차트는 통계(/account/stats)로 이동 - /account → /account/entries 리다이렉트, 대시보드 제목 '통계'로 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<script setup>
|
||
import { RouterLink } from 'vue-router'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { useUiStore } from '@/stores/ui'
|
||
|
||
const auth = useAuthStore()
|
||
const ui = useUiStore()
|
||
</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>
|
||
<template v-if="auth.isAuthenticated">
|
||
<RouterLink to="/account/entries" class="menu-item">가계부 내역</RouterLink>
|
||
<RouterLink to="/account/stats" class="menu-item">통계</RouterLink>
|
||
<RouterLink to="/account/recurrings" class="menu-item">정기 거래</RouterLink>
|
||
<RouterLink to="/account/wallets" class="menu-item">계좌 관리</RouterLink>
|
||
<RouterLink to="/account/categories" class="menu-item">분류 관리</RouterLink>
|
||
<RouterLink to="/account/budget" class="menu-item">예산 설정</RouterLink>
|
||
<RouterLink to="/account/tags" class="menu-item">태그 관리</RouterLink>
|
||
<RouterLink to="/board" class="menu-item">자유게시판</RouterLink>
|
||
</template>
|
||
<RouterLink v-if="auth.user?.role === 'ADMIN'" 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>
|