Mercury/ui/src/views/admin/Layout.vue

<template>
    <div class="admin-layout">
        <nav class="sidebar">
            <div class="sidebar-brand">
                <img src="/favicon.svg" class="brand-mark" alt="" />
                <span class="brand-name">Mercury</span>
            </div>

            <div class="sidebar-rule"></div>

            <ul class="nav-list">
                <li v-for="item in navItems" :key="item.to">
                    <RouterLink :to="item.to">
                        <span class="nav-icon">{{ item.icon }}</span>
                        {{ item.label }}
                    </RouterLink>
                </li>
            </ul>

            <div class="sidebar-footer">
                <div class="user-info">
                    <span class="user-avatar">{{ usernameInitial }}</span>
                    <span class="user-name">{{ auth.username }}</span>
                </div>
                <div class="footer-actions">
                    <button
                        class="icon-btn"
                        :title="isDark ? 'Light mode' : 'Dark mode'"
                        @click="toggleTheme"
                    >
                        {{ isDark ? "☀" : "☾" }}
                    </button>
                    <button
                        class="icon-btn danger-btn"
                        title="Sign out"
                        @click="handleLogout"
                    >
                        ⏻
                    </button>
                </div>
            </div>
        </nav>

        <main class="content">
            <div class="page-wrapper">
                <RouterView />
            </div>
        </main>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "../../stores/auth";
import { useTheme } from "../../stores/theme";

const auth = useAuthStore();
const router = useRouter();
const { theme, toggle: toggleTheme } = useTheme();
const isDark = computed(() => theme.value === "hades");

const usernameInitial = computed(() =>
    (auth.username?.[0] ?? "?").toUpperCase(),
);

const navItems = [
    { to: "/admin/queries", label: "Queries", icon: "⌗" },
    { to: "/admin/tables", label: "Tables", icon: "▦" },
    { to: "/admin/users", label: "Users", icon: "◉" },
    { to: "/admin/permissions", label: "Permissions", icon: "⬡" },
    { to: "/admin/blacklist", label: "Blacklist", icon: "⊘" },
    { to: "/admin/api-keys", label: "API Keys", icon: "⚿" },
    { to: "/admin/cache", label: "Cache", icon: "◈" },
];

function handleLogout() {
    auth.logout();
    router.push("/login");
}
</script>

<style scoped>
.admin-layout {
    display: flex;
    height: 100vh;
    background-color: var(--surface-0);
}

/* ── Sidebar ──────────────────────────────────────── */
.sidebar {
    width: 224px;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-1);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1.25rem 1.25rem;
}

.brand-mark {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    line-height: 1;
}

.sidebar-rule {
    height: 1px;
    margin: 0 1.25rem 0.75rem;
    background: linear-gradient(90deg, var(--border-lo), transparent);
}

/* ── Nav ──────────────────────────────────────────── */
.nav-list {
    list-style: none;
    padding: 0 0.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.nav-list li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 7px;
    color: var(--text-label);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        background-color 0.12s ease,
        color 0.12s ease;
    letter-spacing: 0.01em;
}

.nav-list li a:hover {
    background: var(--surface-2);
    color: var(--text-high);
    text-decoration: none;
}

.nav-list li a.router-link-active {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-1));
    color: var(--primary);
    font-weight: 600;
}

.nav-icon {
    font-size: 0.9rem;
    width: 1.1rem;
    text-align: center;
    opacity: 0.65;
    flex-shrink: 0;
}

.nav-list li a.router-link-active .nav-icon {
    opacity: 1;
}

/* ── Footer ───────────────────────────────────────── */
.sidebar-footer {
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--border-lo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.user-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 15%, var(--surface-2));
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-serif);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}

.user-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-sans);
}

.footer-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    transition:
        background-color 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease;
}

.icon-btn:hover {
    background: var(--surface-2);
    color: var(--text-high);
    border-color: var(--border-lo);
}

.danger-btn:hover {
    background: var(--danger-subtle);
    color: var(--danger);
    border-color: var(--danger-border);
}

/* ── Content ──────────────────────────────────────── */
.content {
    flex: 1;
    padding: 2.25rem 2.5rem;
    overflow-y: auto;
}
</style>