curo1305
cb41753605
- StorageBrowser.vue: replace 8 inline SVGs (plus, folder x2, pencil, trash, share, folderMove, document) - AppSidebar.vue: replace 8 inline SVGs (tag, inbox, chevronRight x2, folder, cloud, shield, cog dual-path, logout) - AdminSidebar.vue: replace 6 inline SVGs (home, users, chartBar, lightBulb, clipboardList, logout) - TreeItem.vue: replace 1 inline SVG (chevronRight expand/collapse)
95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
<template>
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full shrink-0">
|
|
<div class="px-6 py-5 border-b border-gray-100">
|
|
<h1 class="text-lg font-bold text-indigo-600 tracking-tight">DocuVault</h1>
|
|
<p class="text-xs text-indigo-500 font-semibold mt-0.5">Admin</p>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-3 py-4 overflow-y-auto">
|
|
<router-link
|
|
to="/admin"
|
|
class="nav-link"
|
|
:class="{ 'nav-link-active': $route.path === '/admin' }"
|
|
>
|
|
<AppIcon name="home" class="w-4 h-4 mr-2 shrink-0" />
|
|
Overview
|
|
</router-link>
|
|
|
|
<router-link
|
|
to="/admin/users"
|
|
class="nav-link"
|
|
:class="{ 'nav-link-active': $route.path.startsWith('/admin/users') }"
|
|
>
|
|
<AppIcon name="users" class="w-4 h-4 mr-2 shrink-0" />
|
|
Users
|
|
</router-link>
|
|
|
|
<router-link
|
|
to="/admin/quotas"
|
|
class="nav-link"
|
|
:class="{ 'nav-link-active': $route.path.startsWith('/admin/quotas') }"
|
|
>
|
|
<AppIcon name="chartBar" class="w-4 h-4 mr-2 shrink-0" />
|
|
Quotas
|
|
</router-link>
|
|
|
|
<router-link
|
|
to="/admin/ai"
|
|
class="nav-link"
|
|
:class="{ 'nav-link-active': $route.path.startsWith('/admin/ai') }"
|
|
>
|
|
<AppIcon name="lightBulb" class="w-4 h-4 mr-2 shrink-0" />
|
|
AI Config
|
|
</router-link>
|
|
|
|
<router-link
|
|
to="/admin/audit"
|
|
class="nav-link"
|
|
:class="{ 'nav-link-active': $route.path.startsWith('/admin/audit') }"
|
|
>
|
|
<AppIcon name="clipboardList" class="w-4 h-4 mr-2 shrink-0" />
|
|
Audit Log
|
|
</router-link>
|
|
</nav>
|
|
|
|
<div class="px-3 py-4 border-t border-gray-100">
|
|
<div v-if="authStore.user" class="flex items-center gap-3 px-4 py-3 border-t border-gray-100 mt-2 -mx-3">
|
|
<div class="bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-full w-8 h-8 flex items-center justify-center shrink-0">
|
|
{{ authStore.user.email ? authStore.user.email[0].toUpperCase() : '?' }}
|
|
</div>
|
|
<span class="text-xs text-gray-600 truncate flex-1">{{ authStore.user.email }}</span>
|
|
<button
|
|
@click="signOut"
|
|
aria-label="Sign out"
|
|
class="text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
<AppIcon name="logout" class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuthStore } from '../../stores/auth.js'
|
|
import AppIcon from '../ui/AppIcon.vue'
|
|
|
|
const authStore = useAuthStore()
|
|
const router = useRouter()
|
|
|
|
async function signOut() {
|
|
await authStore.logout()
|
|
router.push('/login')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nav-link {
|
|
@apply flex items-center px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors text-sm font-medium;
|
|
}
|
|
.nav-link-active {
|
|
@apply bg-indigo-50 text-indigo-700;
|
|
}
|
|
</style>
|