sionrui/frontend/app/web-gold/src/components/SidebarNav.vue

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { navConfig, navIcons } from '@/router'

const route = useRoute()
const userStore = useUserStore()

function filterVisibleGroups(config, isLoggedIn) {
  return config
    .filter(group => !group.requiresAuth || isLoggedIn)
    .map(group => ({
      ...group,
      items: group.items.filter(item => !item.requiresAuth || isLoggedIn)
    }))
    .filter(group => group.items.length > 0)
}

const visibleNavConfig = computed(() => {
  return filterVisibleGroups(navConfig, userStore.isLoggedIn)
})
</script>

<template>
  <aside class="sidebar">
    <nav class="sidebar__nav">
      <div v-for="group in visibleNavConfig" :key="group.group" class="nav-group">
        <div class="nav-group__title">{{ group.group }}</div>
        <router-link
          v-for="item in group.items"
          :key="item.name"
          :to="{ name: item.name, ...(item.params && { params: item.params }) }"
          class="nav-item"
          :class="{ 'is-active': route.name === item.name }"
          custom
          v-slot="{ navigate }"
        >
          <button class="nav-item" @click="navigate">
            <span class="nav-item__icon" v-html="navIcons[item.icon]"></span>
            <span class="nav-item__label">{{ item.name }}</span>
          </button>
        </router-link>
      </div>
    </nav>
  </aside>
</template>

<style scoped>
.sidebar {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  width: 220px;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow-y: auto;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 6px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-group__title {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: var(--font-small-size);
  color: var(--color-text-secondary);
  letter-spacing: .06em;
}

.nav-item {
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--color-slate-600);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}

.nav-item:hover {
  background: var(--color-slate-50);
  color: var(--color-slate-700);
}

.nav-item.is-active {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
  border-color: transparent;
}

.nav-item.is-active:hover {
  background: var(--color-blue-100);
  color: var(--color-blue-800);
}

.nav-item__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-item__label {
  font-size: 14px;
}
</style>