nexus/frontend/src/components/layout/AppSidebar.vue

<script setup lang="ts">
import { computed } from 'vue'
import {
  Activity, Bot, Boxes, Command, FileText,
  LayoutDashboard, ListTodo, LogOut, MessageSquareText, Settings,
  Shield, SlidersHorizontal, Sparkles, BookOpen,
  AlertTriangle, Calendar,
} from '@lucide/vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/auth'

const props = defineProps<{
  activeView: string
  mobileNavOpen: boolean
  queuedTasks: number
  incidents: number
}>()

const emit = defineEmits<{
  navigate: [label: string]
}>()

const auth = useAuthStore()
const router = useRouter()

const ownerInitials = computed(() => auth.user?.displayName.split(' ').map(part => part[0]).join('').slice(0, 2).toUpperCase() ?? 'OW')

const navigation = [
  { label: 'Dashboard', icon: LayoutDashboard },
  { label: 'Memory', icon: FileText },
  { label: 'Docs', icon: BookOpen },
  { label: 'Security', icon: Shield },
  { label: 'Projects', icon: Boxes },
  { label: 'Task Board', icon: ListTodo },
  { label: 'Incidents', icon: AlertTriangle },
  { separator: true },
  { label: 'Calendar', icon: Calendar },
  { label: 'Agents', icon: Bot },
  { label: 'Models', icon: SlidersHorizontal },
  { label: 'Activity', icon: Activity },
  { label: 'Mobile Chat', icon: MessageSquareText },
]

function onNavigate(label: string) {
  emit('navigate', label)
}

async function logout() {
  await auth.logout()
  await router.replace('/login')
}
</script>

<template>
  <aside :class="['sidebar', { open: mobileNavOpen }]">
    <div class="brand">
      <div class="brand-mark"><Command :size="18" /></div>
      <div>
        <strong>NEXUS</strong>
        <span>Noveria Operations</span>
      </div>
    </div>

    <nav class="nav">
      <template v-for="item in navigation" :key="item.label ?? 'sep'">
        <div v-if="item.separator" class="nav-separator"></div>
        <button
          v-else
          :class="{ active: activeView === item.label }"
          @click="onNavigate(item.label)"
        >
          <component :is="item.icon" :size="17" />
          <span>{{ item.label }}</span>
          <i v-if="item.label === 'Task Board'">{{ queuedTasks }}</i>
          <i v-if="item.label === 'Incidents'">{{ incidents }}</i>
        </button>
      </template>
    </nav>

    <div class="sidebar-bottom">
      <button :class="{ active: activeView === 'Settings' }" @click="onNavigate('Settings')"><Settings :size="17" /> Settings</button>
      <button class="owner" type="button" title="Sign out" @click="logout">
        <div class="avatar">{{ ownerInitials }}</div>
        <div><strong>{{ auth.user?.displayName ?? 'Owner' }}</strong><span>{{ auth.user?.role ?? 'owner' }}</span></div>
        <LogOut :size="15" />
      </button>
    </div>
  </aside>
</template>

<style scoped>
.sidebar {
  width: 210px;
  display: flex;
  flex-direction: column;
  background: var(--panel, #11141b);
  border-right: 1px solid var(--line, #1f2330);
  flex-shrink: 0;
  padding: 0 8px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 12px;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent, #7b6ef2);
  color: #fff;
}
.brand div strong { display: block; font-size: 10px; letter-spacing: .08em; }
.brand div span { font-size: 8px; color: var(--text-dim, #6f7889); }
.nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
  overflow-y: auto;
}
.nav button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #9ea5b3;
  font-size: 10.5px;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nav button:hover { background: var(--accent-soft, rgba(123,110,242,.08)); color: #d8dbe3; }
.nav button.active { background: var(--accent-soft, rgba(123,110,242,.08)); color: var(--accent, #7b6ef2); font-weight: 600; }
.nav button i {
  margin-left: auto;
  background: var(--accent, #7b6ef2);
  color: #fff;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 5px;
  line-height: 1.4;
}
.nav-separator {
  height: 1px;
  margin: 6px 10px;
  background: var(--nx-line, #1f2330);
}
.sidebar-bottom { padding: 8px 0; border-top: 1px solid var(--nx-line, #1f2330); }
.sidebar-bottom > button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #9ea5b3;
  font-size: 10.5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-bottom > button:hover { background: var(--nx-accent-soft, rgba(123,110,242,.08)); color: #d8dbe3; }
.sidebar-bottom > button.active { background: var(--nx-accent-soft, rgba(123,110,242,.08)); color: var(--nx-accent, #7b6ef2); font-weight: 600; }
.owner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.owner div strong { display: block; font-size: 9px; }
.owner div span { font-size: 7.5px; color: var(--text-dim, #6f7889); text-transform: capitalize; }
.owner > svg:last-child { margin-left: auto; opacity: .4; transition: opacity .15s; }
.owner:hover > svg:last-child { opacity: 1; }
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--accent, #7b6ef2);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .sidebar { position: fixed; inset: 0; z-index: 100; transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
}
</style>