aranroig.com/frontend/app/components/parts/AdminSidebar.vue

<script setup lang="ts">
const auth = useAuth()
const route = useRoute()
const localePath = useLocalePath()

const orderCount = useState<number | null>('admin-order-count', () => null)

const navItems = [
  { key: 'dashboard', to: '/admin', label: 'admin.sidebar.nav_dashboard' },
  { key: 'orders', to: '/admin/orders', label: 'admin.sidebar.nav_orders' }
]

const isActive = (key: string) =>
  key === 'dashboard'
    ? route.path === '/admin' || route.path === '/admin/'
    : route.path.startsWith('/admin/orders')

const onLogout = () => {
  auth.logout()
  navigateTo('/admin/login')
}
</script>

<template>
  <aside class="admin-sidebar">
    <div class="sidebar-head">
      <span class="sidebar-title">{{ $t('admin.sidebar.title') }}</span>
    </div>

    <span class="sidebar-rule" aria-hidden="true">══════════════════</span>

    <nav class="sidebar-nav">
      <NuxtLink
        v-for="item in navItems"
        :key="item.key"
        :to="item.to"
        class="nav-item"
        :class="{ 'nav-item-active': isActive(item.key) }"
      >
        <span class="nav-sep" aria-hidden="true">{{ item.key === 'dashboard' ? '▸' : '├' }}</span>
        <span class="nav-label">{{ $t(item.label) }}</span>
        <span v-if="item.key === 'orders' && orderCount !== null" class="nav-badge">[{{ orderCount }}]</span>
      </NuxtLink>
    </nav>

    <div class="sidebar-bottom">
      <span class="sidebar-rule" aria-hidden="true">══════════════════</span>
      <NuxtLink :to="localePath('index')" class="nav-item nav-item-site">
        <span class="nav-sep" aria-hidden="true">←</span>
        <span class="nav-label">{{ $t('admin.sidebar.back_site') }}</span>
      </NuxtLink>
      <button class="sidebar-logout" @click="onLogout">&gt;_ {{ $t('admin.dashboard.logout') }}</button>
    </div>
  </aside>
</template>

<style lang="scss" scoped>
.admin-sidebar {
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  padding: 16px 12px;
  background: var(--color-background-fore);
  border-right: 1px solid var(--color-border-color);
  box-shadow: inset -2px 0 0 0 var(--color-container-shadow);
}

.sidebar-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 6px 8px;
}

.sidebar-title {
  font-family: 'Hurmit', monospace;
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--color-text);
}

.sidebar-rule {
  display: block;
  font-family: 'Hurmit', monospace;
  font-size: 8px;
  line-height: 1;
  color: var(--color-border-color);
  white-space: nowrap;
  overflow: hidden;
  margin: 4px 0 12px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: 'Hurmit', monospace;
  font-size: 0.85rem;
  color: var(--color-text);
  text-decoration: none;
  text-shadow: none;
  border: 1px solid transparent;
  transition: all 120ms steps(3);

  .nav-sep {
    color: var(--color-text);
    opacity: 0.35;
    font-size: 0.75rem;
  }

  &:hover {
    background-color: var(--color-hover);
    border-color: var(--color-border-color);

    .nav-sep {
      color: var(--color-link);
      opacity: 1;
    }
  }
}

.nav-item-active {
  color: var(--color-link);
  border-color: var(--color-link);

  .nav-sep,
  .nav-badge {
    color: var(--color-link);
    opacity: 1;
  }
}

.nav-badge {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--color-link);
  opacity: 0.7;
}

.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-logout {
  font-family: 'Hurmit', monospace;
  font-size: 0.85rem;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-color);
  padding: 6px 14px;
  margin-top: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 120ms steps(3);

  &:hover {
    color: var(--color-link);
    border-color: var(--color-link);
  }
}

@media screen and (max-width: 900px) {
  .admin-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 1px solid var(--color-border-color);
    box-shadow: inset 0 -2px 0 0 var(--color-container-shadow);
  }

  .sidebar-head {
    padding: 0;
    flex-shrink: 0;
  }

  .sidebar-rule {
    display: none;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .sidebar-bottom {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .sidebar-logout {
    margin-top: 0;
    white-space: nowrap;
  }
}

@media screen and (max-width: 600px) {
  .nav-item {
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  .sidebar-logout {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
}
</style>