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

<template>
  <div class="drawer h-screen flex flex-col bg-base-100 overflow-hidden">
    <input id="nav-drawer" ref="drawerCheckboxRef" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content flex flex-col h-screen 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" />
        <!-- Desktop (md+): Login / connection + user dropdown -->
        <template v-if="!isLogin">
          <NuxtLink
            v-if="!me"
            to="/login"
            class="btn btn-ghost btn-sm btn-primary hidden md:inline-flex"
          >
            Login
          </NuxtLink>
          <div
            v-if="me"
            class="hidden md:flex items-center gap-2 shrink-0 min-h-9"
          >
            <div class="flex items-center shrink-0 min-h-9">
              <span
                class="inline-flex items-center gap-1.5 text-xs text-base-content/70 leading-none"
                :class="live ? 'text-success' : 'text-base-content/50'"
              >
                <span
                  class="size-2 rounded-full shrink-0"
                  :class="live ? 'bg-success animate-pulse' : 'bg-base-content/40'"
                  aria-hidden="true"
                />
                {{ live ? 'Live' : 'Offline' }}
              </span>
            </div>
            <div class="dropdown dropdown-end flex items-center">
              <details ref="userDropdownRef" class="dropdown group">
                <summary class="btn btn-ghost btn-sm gap-2 flex items-center min-h-9 h-9 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
                  <div class="avatar">
                    <div class="rounded-full w-8 h-8 overflow-hidden flex items-center justify-center">
                      <img
                        v-if="me.email && !gravatarErrorDesktop"
                        :src="useGravatarUrl(me.email, 32)"
                        alt=""
                        class="w-full h-full object-cover"
                        @error="gravatarErrorDesktop = true"
                      >
                      <div
                        v-else
                        class="bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center"
                      >
                        <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
                      </div>
                    </div>
                  </div>
                  <span class="max-w-[8rem] truncate font-medium">{{ 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>
          </div>
        </template>
        <!-- Mobile: hamburger to open drawer -->
        <label
          for="nav-drawer"
          class="btn btn-ghost btn-square md:hidden flex items-center justify-center min-h-[2.75rem] min-w-[2.75rem]"
          aria-label="Open menu"
        >
          <icons-icon-menu class="size-6" />
        </label>
      </header>
      <main class="flex-1 min-h-0 overflow-y-auto relative flex flex-col">
        <AdminBreadcrumbs v-if="route.path.startsWith('/admin') && route.path !== '/admin'" />
        <div class="flex-1 min-h-0">
          <slot />
        </div>
      </main>
      <ToastContainer />
    </div>
    <!-- Drawer sidebar (mobile menu) -->
    <div class="drawer-side z-[1100]">
      <label for="nav-drawer" aria-label="Close menu" class="drawer-overlay" />
      <aside class="bg-base-200/95 backdrop-blur-xl min-h-full w-72 p-4 flex flex-col">
        <!-- Mobile: user + live when logged in -->
        <div v-if="!isLogin && me" class="flex items-center gap-3 pb-4 mb-2 border-b border-base-300/50">
          <div class="avatar">
            <div class="rounded-full w-10 h-10 overflow-hidden flex items-center justify-center">
              <img
                v-if="me.email && !gravatarErrorDrawer"
                :src="useGravatarUrl(me.email, 40)"
                alt=""
                class="w-full h-full object-cover"
                @error="gravatarErrorDrawer = true"
              >
              <div
                v-else
                class="bg-primary text-primary-content rounded-full w-10 h-10 flex items-center justify-center"
              >
                <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
              </div>
            </div>
          </div>
          <div class="flex-1 min-w-0">
            <p class="font-medium truncate">{{ me.username }}</p>
            <p class="text-xs flex items-center gap-1.5" :class="live ? 'text-success' : 'text-base-content/60'">
              <span class="size-1.5 rounded-full" :class="live ? 'bg-success animate-pulse' : 'bg-base-content/40'" />
              {{ live ? 'Live' : 'Offline' }}
            </p>
          </div>
        </div>
        <ul class="menu p-0 flex-1 text-base">
          <li v-if="!me && !isLogin">
            <NuxtLink to="/login" class="min-h-12 touch-manipulation" @click="closeDrawer">
              Login
            </NuxtLink>
          </li>
          <template v-else>
            <li>
              <NuxtLink to="/" :class="route.path === '/' ? 'active' : ''" class="min-h-12 touch-manipulation" @click="closeDrawer">
                <icons-icon-map />
                Map
              </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/profile" :class="route.path === '/profile' ? 'active' : ''" class="min-h-12 touch-manipulation" @click="closeDrawer">
                <icons-icon-user />
                Profile
              </NuxtLink>
            </li>
            <li v-if="isAdmin">
              <NuxtLink to="/admin" :class="route.path.startsWith('/admin') ? 'active' : ''" class="min-h-12 touch-manipulation" @click="closeDrawer">
                <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 min-h-12">
              <label class="flex cursor-pointer items-center gap-3 py-3 px-2 rounded-lg hover:bg-base-300/50 w-full min-h-0 touch-manipulation">
                <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 min-h-12 touch-manipulation w-full justify-start" @click="doLogout">
                <icons-icon-logout />
                Logout
              </button>
            </li>
          </template>
        </ul>
      </aside>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MeResponse } from '~/types/api'

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 = useState<MeResponse | null>('me', () => null)
const gravatarErrorDesktop = ref(false)
const gravatarErrorDrawer = ref(false)
const userDropdownRef = ref<HTMLDetailsElement | null>(null)
const drawerCheckboxRef = ref<HTMLInputElement | null>(null)

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

function closeDrawer() {
  if (drawerCheckboxRef.value) drawerCheckboxRef.value.checked = false
}

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 }
)

watch(
  () => me.value?.email,
  () => {
    gravatarErrorDesktop.value = false
    gravatarErrorDrawer.value = false
  }
)

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()
  closeDrawer()
  await router.push('/login')
  me.value = null
}

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