hnh-map/frontend-nuxt/layouts/default.vue

<template>
  <div class="h-screen flex flex-col bg-base-100 overflow-hidden">
    <header class="navbar relative z-[1100] bg-base-100/80 backdrop-blur-xl border-b border-base-300/50 px-4 gap-2 shrink-0">
      <NuxtLink to="/" class="flex items-center gap-2 text-lg font-semibold hover:opacity-80 transition-all duration-200">
        <icons-icon-map class="size-6 text-primary shrink-0" aria-hidden="true" />
        <span>{{ title }}</span>
      </NuxtLink>
      <div class="flex-1" />
      <!-- When not logged in: show Login link (except on login page) -->
      <NuxtLink
        v-if="!me && !isLogin"
        to="/login"
        class="btn btn-ghost btn-sm btn-primary"
      >
        Login
      </NuxtLink>
      <!-- Connection status: pulsing dot + tooltip when logged in -->
      <div
        v-if="!isLogin && me"
        class="tooltip tooltip-bottom shrink-0"
        :data-tip="live ? 'Connected to live updates' : 'Disconnected'"
      >
        <span
          class="inline-flex items-center gap-1.5 text-xs text-base-content/70"
          :class="live ? 'text-success' : 'text-base-content/50'"
        >
          <span
            class="size-2 rounded-full"
            :class="live ? 'bg-success animate-pulse' : 'bg-base-content/40'"
            aria-hidden="true"
          />
          {{ live ? 'Live' : 'Offline' }}
        </span>
      </div>
      <!-- User dropdown when logged in: details/summary for reliable click-to-open -->
      <div v-if="!isLogin && me" class="dropdown dropdown-end">
        <details ref="userDropdownRef" class="dropdown group">
          <summary class="btn btn-ghost btn-sm gap-2 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
            <div class="avatar placeholder">
              <div class="bg-primary text-primary-content rounded-full w-8">
                <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
              </div>
            </div>
            <span class="max-w-[8rem] truncate font-medium hidden sm:inline">{{ me.username }}</span>
            <svg class="size-4 opacity-70 shrink-0 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </summary>
          <ul
            class="dropdown-content menu bg-base-200 rounded-box z-[1100] mt-2 w-52 border border-base-300/50 shadow-xl p-2"
          >
            <li>
              <NuxtLink to="/" :class="route.path === '/' ? 'active' : ''" @click="closeDropdown">
                <icons-icon-map />
                Map
              </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/profile" :class="route.path === '/profile' ? 'active' : ''" @click="closeDropdown">
                <icons-icon-user />
                Profile
              </NuxtLink>
            </li>
            <li v-if="isAdmin">
              <NuxtLink to="/admin" :class="route.path.startsWith('/admin') ? 'active' : ''" @click="closeDropdown">
                <icons-icon-shield />
                Admin
              </NuxtLink>
            </li>
            <li class="menu-divider my-1" />
            <li class="[&_.menu-item]:flex [&_.menu-item]:items-center [&_.menu-item]:gap-3">
              <label class="flex cursor-pointer items-center gap-3 py-2 px-2 rounded-lg hover:bg-base-300/50 w-full min-h-0">
                <icons-icon-sun v-if="!dark" class="size-4 shrink-0 opacity-80" />
                <icons-icon-moon v-else class="size-4 shrink-0 opacity-80" />
                <span class="flex-1 text-sm">Тёмная тема</span>
                <input
                  type="checkbox"
                  class="toggle toggle-sm toggle-primary shrink-0"
                  :checked="dark"
                  @change="onThemeToggle"
                />
              </label>
            </li>
            <li>
              <button type="button" class="text-error hover:bg-error/10 rounded-lg" @click="doLogout">
                <icons-icon-logout />
                Logout
              </button>
            </li>
          </ul>
        </details>
      </div>
    </header>
    <main class="flex-1 min-h-0 overflow-y-auto relative flex flex-col">
      <AdminBreadcrumbs v-if="route.path.startsWith('/admin')" />
      <div class="flex-1 min-h-0">
        <slot />
      </div>
    </main>
    <ToastContainer />
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const THEME_KEY = 'hnh-map-theme'

function getInitialDark(): boolean {
  if (import.meta.client) {
    const stored = localStorage.getItem(THEME_KEY)
    if (stored === 'dark') return true
    if (stored === 'light') return false
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }
  return false
}

const title = ref('HnH Map')
const dark = ref(false)
const live = ref(false)
const me = ref<{ username?: string; auths?: string[] } | null>(null)
const userDropdownRef = ref<HTMLDetailsElement | null>(null)

function closeDropdown() {
  userDropdownRef.value?.removeAttribute('open')
}

const { isLoginPath } = useAppPaths()
const isLogin = computed(() => isLoginPath(route.path))
const isAdmin = computed(() => !!me.value?.auths?.includes('admin'))

async function loadMe() {
  if (isLogin.value) return
  try {
    me.value = await useMapApi().me()
  } catch {
    me.value = null
  }
}

async function loadConfig() {
  if (isLogin.value) return
  try {
    const config = await useMapApi().getConfig()
    if (config?.title) title.value = config.title
  } catch (_) {}
}

onMounted(() => {
  dark.value = getInitialDark()
  applyTheme()
})

watch(
  () => route.path,
  (path) => {
    if (!isLoginPath(path)) loadMe().then(loadConfig)
  },
  { immediate: true }
)

function onThemeToggle() {
  dark.value = !dark.value
  applyTheme()
}

function applyTheme() {
  if (!import.meta.client) return
  const html = document.documentElement
  const theme = dark.value ? 'dark' : 'light'
  html.setAttribute('data-theme', theme)
  localStorage.setItem(THEME_KEY, theme)
}

async function doLogout() {
  await useMapApi().logout()
  await router.push('/login')
  me.value = null
}

defineExpose({ setLive: (v: boolean) => { live.value = v } })
</script>