<script setup lang="ts">
const layout = ref();
const toggled = ref(false);

</script>
<template>
  <div class="bg-light-0 dark:bg-dark-0">
    <div class="bg-light-0 dark:bg-dark-0 px-12 py-3 sticky top-0 z-40 w-full flex align-middle justify-between lg:z-50 border-b gap-12 border-light-30 dark:border-dark-30">
      <div class="flex flex-auto items-stretch gap-12">
        <NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
        <NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
        <NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
      </div>
      <div class="flex-auto"><SearchView /></div>
      <div class="flex flex-auto align-center gap-6 justify-end">
        <ThemeSwitch />
        <NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
      </div>
    </div>
    <NuxtLayout ref="layout">
      <template #mobile>
        <div class="">
          <NuxtLink class="" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
          <NuxtLink class="" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="">Projets</NuxtLink>
          <NuxtLink class="" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="">Editeur</NuxtLink>
        </div>
      </template>
      <NuxtPage/>
    </NuxtLayout>
    <div class="">
      <p>Copyright Peaceultime - 2024</p>
      <NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>
    </div>
  </div>
</template>
