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

</script>
<template>
  <div class="published-container" :class="{'has-navigation': layout?.layoutRef?.navigation ?? false}">
    <div class="site-nav-bar">
      <div>
        <div class="gapx-3 flex align-stretch">
          <NuxtLink class="site-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
        </div>
      </div>
      <div class="mobile-bigger"><SearchView /></div>
      <div class="ps-1 gapx-1 flex align-center">
        <ThemeSwitch class="mobile-hidden" />
        <NuxtLink class="site-login" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
      </div>
    </div>
    <NuxtLayout ref="layout">
      <template #mobile>
        <div class="mobile-nav-bar">
          <NuxtLink class="mobile-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
          <NuxtLink class="mobile-nav-bar-text" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
          <NuxtLink class="mobile-nav-bar-text" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
        </div>
      </template>
      <NuxtPage/>
    </NuxtLayout>
    <div class="site-footer">
      <p>Copyright Peaceultime - 2024</p>
      <NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>
    </div>
  </div>
</template>
