sb-front/src/components/layout/AppSidebar.vue

<script setup>
import { RouterLink } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { BOARDS } from '@/constants/boards'

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">
        <hr class="menu-divider" />
        <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>

        <!-- 게시판 영역 -->
        <hr class="menu-divider" />
        <RouterLink
          v-for="b in BOARDS"
          :key="b.key"
          :to="`/board/${b.key}`"
          class="menu-item"
        >{{ b.label }}</RouterLink>
      </template>

      <!-- 관리자 영역 -->
      <template v-if="auth.user?.role === 'ADMIN'">
        <hr class="menu-divider" />
        <RouterLink to="/users" class="menu-item">회원 관리</RouterLink>
        <RouterLink to="/admin/tags" class="menu-item">태그 관리(관리자)</RouterLink>
      </template>
    </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-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0.5rem 1.5rem;
}
.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;
}
</style>