340 lines
12 KiB
Vue
340 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import type { AppThemeId } from '~/types/app-theme'
|
|
import { APP_THEME_OPTIONS } from '~/types/app-theme'
|
|
|
|
defineProps<{
|
|
sidebarCollapsed: boolean
|
|
brandTitle?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
toggleSidebar: []
|
|
refresh: []
|
|
}>()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const isHome = computed(() => route.path === '/')
|
|
const { themeId, applyTheme } = useAppTheme()
|
|
|
|
const themeIcons: Record<string, string> = {
|
|
light: 'i-heroicons-sun',
|
|
purple: 'i-heroicons-sparkles',
|
|
dark: 'i-heroicons-moon',
|
|
'dark-purple': 'i-heroicons-star',
|
|
}
|
|
|
|
const userMenuOpen = ref(false)
|
|
const userMenuRoot = ref<HTMLElement | null>(null)
|
|
const themeMenuOpen = ref(false)
|
|
const themeMenuRoot = ref<HTMLElement | null>(null)
|
|
|
|
function closeUserMenu() {
|
|
userMenuOpen.value = false
|
|
}
|
|
|
|
function onDocClick(e: MouseEvent) {
|
|
const userEl = userMenuRoot.value
|
|
if (userEl && userMenuOpen.value && !userEl.contains(e.target as Node)) {
|
|
userMenuOpen.value = false
|
|
}
|
|
const themeEl = themeMenuRoot.value
|
|
if (themeEl && themeMenuOpen.value && !themeEl.contains(e.target as Node)) {
|
|
themeMenuOpen.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => document.addEventListener('click', onDocClick))
|
|
onUnmounted(() => document.removeEventListener('click', onDocClick))
|
|
</script>
|
|
|
|
<template>
|
|
<header class="app-topbar">
|
|
<!-- Left: sidebar toggle + brand -->
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="app-topbar-icon-btn"
|
|
title="Show / hide sidebar"
|
|
aria-label="Toggle sidebar"
|
|
@click="emit('toggleSidebar')"
|
|
>
|
|
<UIcon :name="sidebarCollapsed ? 'i-heroicons-bars-3' : 'i-heroicons-chevron-double-left'" style="width: 16px; height: 16px;" />
|
|
</button>
|
|
<NuxtLink to="/" class="flex items-center gap-1.5 rounded-lg px-1.5 py-1 transition hover:opacity-80">
|
|
<span class="text-[12px] font-medium tracking-tight text-[#a0a09c]">{{ brandTitle || 'Segur-OS' }}</span>
|
|
<span class="rounded-sm px-0.5 py-px text-[8px] font-medium uppercase tracking-wider text-[#c0c0bc]">Beta</span>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Center: search (absolutely centered) -->
|
|
<div class="app-topbar-search-wrap">
|
|
<LayoutAppCommandSearch />
|
|
</div>
|
|
|
|
<!-- Center-right: contextual actions (home page) -->
|
|
<div v-if="isHome" class="ml-auto mr-1 hidden items-center gap-1.5 sm:flex">
|
|
<NuxtLink to="/onboarding">
|
|
<button type="button" class="app-topbar-action-btn">
|
|
<UIcon name="i-heroicons-arrow-trending-up" style="width: 13px; height: 13px;" />
|
|
Pipeline
|
|
</button>
|
|
</NuxtLink>
|
|
<NuxtLink to="/sales/quick-lead">
|
|
<button type="button" class="app-topbar-action-btn">
|
|
<UIcon name="i-heroicons-bolt" style="width: 13px; height: 13px;" />
|
|
Quick Lead
|
|
</button>
|
|
</NuxtLink>
|
|
<NuxtLink to="/quotes">
|
|
<button type="button" class="app-topbar-action-btn app-topbar-action-primary">
|
|
<UIcon name="i-heroicons-document-text" style="width: 13px; height: 13px;" />
|
|
New quote
|
|
</button>
|
|
</NuxtLink>
|
|
<span class="mx-0.5 h-3 w-px" style="background: rgba(0,0,0,0.06);" />
|
|
</div>
|
|
|
|
<!-- Right: actions -->
|
|
<div class="flex shrink-0 items-center gap-1" :class="isHome ? '' : 'ml-auto'">
|
|
<button
|
|
type="button"
|
|
class="app-topbar-icon-btn hidden sm:inline-flex"
|
|
title="Refresh data"
|
|
aria-label="Refresh"
|
|
@click="emit('refresh')"
|
|
>
|
|
<UIcon name="i-heroicons-arrow-path" style="width: 16px; height: 16px;" />
|
|
</button>
|
|
|
|
<!-- Quick theme switcher -->
|
|
<div ref="themeMenuRoot" class="relative">
|
|
<button
|
|
type="button"
|
|
class="app-topbar-icon-btn"
|
|
title="Switch theme"
|
|
aria-label="Theme"
|
|
@click.stop="themeMenuOpen = !themeMenuOpen"
|
|
>
|
|
<UIcon :name="themeIcons[themeId] ?? 'i-heroicons-swatch'" style="width: 16px; height: 16px;" />
|
|
</button>
|
|
<Transition
|
|
enter-active-class="transition duration-150 ease-out"
|
|
enter-from-class="opacity-0 scale-95 translate-y-1"
|
|
enter-to-class="opacity-100 scale-100 translate-y-0"
|
|
leave-active-class="transition duration-100 ease-in"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0 scale-95"
|
|
>
|
|
<div
|
|
v-show="themeMenuOpen"
|
|
class="absolute right-0 top-[calc(100%+8px)] z-50 w-52 overflow-hidden rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] py-1.5 shadow-xl ring-1 ring-black/5"
|
|
>
|
|
<p class="px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Theme</p>
|
|
<button
|
|
v-for="opt in APP_THEME_OPTIONS"
|
|
:key="opt.id"
|
|
type="button"
|
|
class="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition hover:bg-[var(--brand-faint)]"
|
|
:class="themeId === opt.id ? 'text-[var(--brand)] font-medium' : 'text-[var(--text-primary)]'"
|
|
@click="applyTheme(opt.id as AppThemeId); themeMenuOpen = false"
|
|
>
|
|
<UIcon :name="themeIcons[opt.id]" class="h-4 w-4 shrink-0" :class="themeId === opt.id ? 'text-[var(--brand)]' : 'opacity-60'" />
|
|
<span class="flex-1">{{ opt.label }}</span>
|
|
<UIcon
|
|
v-if="themeId === opt.id"
|
|
name="i-heroicons-check"
|
|
class="h-3.5 w-3.5 text-[var(--brand)]"
|
|
/>
|
|
</button>
|
|
<div class="mx-3 my-1.5 border-t border-[var(--sidebar-border)]" />
|
|
<NuxtLink
|
|
to="/account"
|
|
class="flex items-center gap-2.5 px-3 py-1.5 text-xs text-[var(--text-muted)] transition hover:text-[var(--brand)]"
|
|
@click="themeMenuOpen = false"
|
|
>
|
|
<UIcon name="i-heroicons-cog-6-tooth" class="h-3.5 w-3.5" />
|
|
All appearance settings
|
|
</NuxtLink>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<NuxtLink to="/settings" class="inline-flex" title="Software settings">
|
|
<span class="app-topbar-icon-btn">
|
|
<UIcon name="i-heroicons-cog-6-tooth" style="width: 16px; height: 16px;" />
|
|
</span>
|
|
</NuxtLink>
|
|
|
|
<span class="mx-0.5 h-3 w-px" style="background: rgba(0,0,0,0.06);" />
|
|
|
|
<!-- User / Account -->
|
|
<div ref="userMenuRoot" class="relative">
|
|
<button
|
|
type="button"
|
|
class="inline-flex w-auto items-center gap-1 rounded-md px-1.5 py-0.5 text-[#a0a09c] transition hover:bg-[rgba(0,0,0,0.04)] hover:text-[#6b6b68]"
|
|
aria-label="Account menu"
|
|
:aria-expanded="userMenuOpen"
|
|
@click.stop="userMenuOpen = !userMenuOpen"
|
|
>
|
|
<UIcon name="i-heroicons-user-circle" style="width: 15px; height: 15px;" />
|
|
<span class="hidden text-[11px] font-medium lg:inline">Account</span>
|
|
<UIcon name="i-heroicons-chevron-down" style="width: 8px; height: 8px; opacity: 0.35;" />
|
|
</button>
|
|
<Transition
|
|
enter-active-class="transition duration-150 ease-out"
|
|
enter-from-class="opacity-0 scale-95"
|
|
enter-to-class="opacity-100 scale-100"
|
|
leave-active-class="transition duration-100 ease-in"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div
|
|
v-show="userMenuOpen"
|
|
class="absolute right-0 top-[calc(100%+8px)] z-50 w-56 overflow-hidden rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] py-1 shadow-xl ring-1 ring-black/5"
|
|
>
|
|
<NuxtLink
|
|
to="/account"
|
|
class="flex items-center gap-2 px-3 py-2.5 text-sm text-[var(--text-primary)] transition hover:bg-[var(--brand-faint)]"
|
|
@click="closeUserMenu"
|
|
>
|
|
<UIcon name="i-heroicons-user-circle" class="h-4 w-4 opacity-70" />
|
|
My account
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/settings"
|
|
class="flex items-center gap-2 px-3 py-2.5 text-sm text-[var(--text-primary)] transition hover:bg-[var(--brand-faint)]"
|
|
@click="closeUserMenu"
|
|
>
|
|
<UIcon name="i-heroicons-cog-6-tooth" class="h-4 w-4 opacity-70" />
|
|
Software settings
|
|
</NuxtLink>
|
|
<div class="my-1 border-t border-[var(--sidebar-border)]" />
|
|
<div class="px-3 py-1.5">
|
|
<p class="text-[12px] font-medium text-[var(--text-primary)]">Session (mock)</p>
|
|
<p class="text-[11px] text-[var(--text-muted)]">broker@demo.com</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text-muted)] opacity-50 cursor-not-allowed"
|
|
disabled
|
|
>
|
|
<UIcon name="i-heroicons-arrow-right-on-rectangle" class="h-4 w-4" />
|
|
Sign out (soon)
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
height: 2.5rem;
|
|
padding: 0 0.75rem;
|
|
border-bottom: none;
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
|
|
background: var(--topbar-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
@media (min-width: 768px) {
|
|
.app-topbar { padding: 0 1rem; }
|
|
}
|
|
|
|
.app-topbar-icon-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.625rem;
|
|
height: 1.625rem;
|
|
border-radius: 6px;
|
|
color: #a0a09c;
|
|
transition: color 150ms ease, background 150ms ease;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.app-topbar-icon-btn:hover {
|
|
color: #6b6b68;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* ---- Contextual action buttons (home) ---- */
|
|
.app-topbar-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 3px 10px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #8a8a86;
|
|
background: transparent;
|
|
border: 1px solid rgba(0,0,0,0.06);
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
white-space: nowrap;
|
|
}
|
|
.app-topbar-action-btn:hover {
|
|
color: var(--text-primary);
|
|
background: rgba(0,0,0,0.03);
|
|
border-color: rgba(0,0,0,0.1);
|
|
}
|
|
.app-topbar-action-primary {
|
|
color: #ffffff;
|
|
background: #01696f;
|
|
border-color: #01696f;
|
|
}
|
|
.app-topbar-action-primary:hover {
|
|
color: #ffffff;
|
|
background: #015b60;
|
|
border-color: #015b60;
|
|
}
|
|
|
|
/* ---- Centered search bar ---- */
|
|
.app-topbar-search-wrap {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
max-width: 380px;
|
|
display: none;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.app-topbar-search-wrap { display: block; }
|
|
}
|
|
|
|
/* Search input — quiet at rest, reveals on focus */
|
|
.app-topbar-search-wrap :deep(input) {
|
|
border-radius: 8px !important;
|
|
padding-left: 2rem !important;
|
|
padding-right: 0.75rem !important;
|
|
height: 1.75rem;
|
|
font-size: 0.6875rem;
|
|
background: transparent !important;
|
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
|
color: var(--text-secondary) !important;
|
|
transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
.app-topbar-search-wrap :deep(input):focus {
|
|
background: var(--surface) !important;
|
|
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
|
|
}
|
|
/* Round the input wrapper/container */
|
|
.app-topbar-search-wrap :deep(.relative) {
|
|
border-radius: 8px;
|
|
}
|
|
.app-topbar-search-wrap :deep(> div) {
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|