293 lines
9.1 KiB
Vue
293 lines
9.1 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
sidebarCollapsed: boolean
|
|
brandTitle?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
toggleSidebar: []
|
|
refresh: []
|
|
}>()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const isHome = computed(() => route.path === '/')
|
|
const colorMode = useColorMode()
|
|
const isDark = computed({
|
|
get () {
|
|
return colorMode.value === 'dark'
|
|
},
|
|
set () {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
}
|
|
})
|
|
|
|
const userMenuOpen = ref(false)
|
|
const userMenuRoot = 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
|
|
}
|
|
}
|
|
|
|
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>
|
|
|
|
<!-- Theme toggle -->
|
|
<ClientOnly>
|
|
<UButton
|
|
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
|
color="gray"
|
|
variant="ghost"
|
|
aria-label="Theme"
|
|
@click="isDark = !isDark"
|
|
/>
|
|
<template #fallback>
|
|
<div class="w-8 h-8" />
|
|
</template>
|
|
</ClientOnly>
|
|
|
|
<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>
|