policy-ui/app/components/layout/AppTopBar.vue

<script setup lang="ts">
defineProps<{
  sidebarCollapsed: boolean
  brandTitle?: string
}>()

const emit = defineEmits<{
  toggleSidebar: []
  refresh: []
}>()

const route = useRoute()
const router = useRouter()
const { data: session, status, signOut } = useAuth()
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)

const user = computed(() => session.value?.user)
const userEmail = computed(() => user.value?.email || 'user@example.com')
const userName = computed(() => user.value?.name || 'User')
const isAuthenticated = computed(() => status.value === 'authenticated')

function closeUserMenu() {
  userMenuOpen.value = false
}

async function handleLogout() {
  try {
    userMenuOpen.value = false
    await signOut({ callbackUrl: '/login', redirect: true })
  } catch (error) {
    console.error('Logout failed:', error)
    await navigateTo('/login')
  }
}

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/new">
        <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>

      <LayoutOrgSelector />

      <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"
          >
            <div class="px-3 py-2 border-b border-[var(--sidebar-border)]">
              <p class="text-sm font-medium text-[var(--text-primary)]">{{ userName }}</p>
              <p class="text-xs text-[var(--text-muted)]">{{ userEmail }}</p>
            </div>
            <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)]" />
            <button
              type="button"
              class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text-muted)] hover:bg-[var(--brand-faint)] hover:text-[var(--text-primary)] transition"
              @click="handleLogout"
            >
              <UIcon name="i-heroicons-arrow-right-on-rectangle" class="h-4 w-4" />
              Sign out
            </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>