feat: Initial Nuxt app

wp-content/themes/ccat/app/components/auth/LoginForm.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { loginSchema, loginFields, onLoginSubmit } = useLogin();
+</script>
+
+<template>
+  <UAuthForm
+    :schema="loginSchema"
+    :fields="loginFields"
+    title="Connexion"
+    description="Veuillez vous identifier."
+    icon="i-lucide-user"
+    loading-auto
+    @submit="onLoginSubmit"
+  />
+</template>

wp-content/themes/ccat/app/components/auth/LoginLogoutButton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { loggedIn } = useUserSession();
+defineProps<{ showLabels: boolean }>();
+</script>
+
+<template>
+  <AuthState>
+    <UButton
+      :icon="loggedIn ? 'i-lucide-log-out' : 'i-lucide-log-in'"
+      color="neutral"
+      to="/auth"
+      :label="showLabels ? (loggedIn ? 'Déconnexion' : 'Connexion') : undefined"
+    />
+  </AuthState>
+</template>

wp-content/themes/ccat/app/components/auth/LogoutForm.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { onLogoutClick } = useLogout();
+</script>
+
+<template>
+  <div class="w-full space-y-6">
+    <div class="flex flex-col text-center">
+      <div class="text-xl text-pretty font-semibold text-highlighted">
+        Déconnexion
+      </div>
+      <div class="mt-1 text-base text-pretty text-muted">
+        Veuillez confirmer la déconnexion.
+      </div>
+    </div>
+    <UButton
+      icon="i-lucide-log-out"
+      block
+      loading-auto
+      to="/auth"
+      label="Déconnexion"
+      @click="onLogoutClick"
+    />
+  </div>
+</template>

wp-content/themes/ccat/app/components/auth/SignUpButton.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ showLabels: boolean }>();
+</script>
+
+<template>
+  <UButton
+    icon="i-lucide-user"
+    color="primary"
+    to="#"
+    :label="showLabels ? 'Devenir membre' : undefined"
+  />
+</template>

wp-content/themes/ccat/app/components/site/SiteFooter.vue

@@ -0,0 +1,5 @@
+<template>
+  <UFooter>
+    TODO
+  </UFooter>
+</template>

wp-content/themes/ccat/app/components/site/SiteFooterBottom.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="container-fluid flex flex-col lg:flex-row justify-between items-center gap-x-6 gap-y-3 py-3 text-muted text-sm text-center">
+    <p class="flex-break-words">
+      © {{ new Date().getFullYear() }} Conseil de la culture de l'Abitibi-Témiscamingue.
+    </p>
+    <p class="flex items-center gap-1">
+      Fait avec <UIcon name="i-lucide-heart" /> par
+      <ULink href="https://websimple.com" target="_blank" external title="Site web développé par Websimple">Websimple</ULink>
+    </p>
+  </div>
+</template>

wp-content/themes/ccat/app/components/site/SiteHeader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { menuItems } = await useMenuItems("MAIN");
+</script>
+
+<template>
+  <UHeader title="CCAT" mode="slideover">
+    <template #left>
+      <NuxtLink to="/">
+        <SvgLogoCcat class="h-12 w-auto shrink-0" />
+      </NuxtLink>
+    </template>
+    <template #right>
+      <UNavigationMenu :items="menuItems" variant="link" content-orientation="vertical" class="hidden lg:block" :ui="{ list: '-mx-2.5', link: 'text-base', childLink: 'text-base' }" />
+    </template>
+    <template #body>
+      <UNavigationMenu :items="menuItems" orientation="vertical" />
+    </template>
+  </UHeader>
+</template>

wp-content/themes/ccat/app/components/site/SiteHeaderTop.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { profiles } = await useSiteOptions();
+const { menuItems } = await useMenuItems("TOP");
+const { breakpoints } = useResponsive();
+const showLabels = breakpoints.greaterOrEqual("sm");
+</script>
+
+<template>
+  <UContainer class="flex items-center gap-1.5">
+    <UiSocialProfiles :profiles="profiles" class="mr-auto" />
+    <UNavigationMenu :items="menuItems" variant="link" content-orientation="vertical" />
+    <LoginLogoutButton :show-labels="showLabels" />
+    <SignUpButton :show-labels="showLabels" />
+  </UContainer>
+</template>

wp-content/themes/ccat/app/components/ui/UiSocialProfiles.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SiteOptionsFragment } from "#graphql-operations";
+
+defineProps<{ profiles: SiteOptionsFragment["profiles"] }>();
+
+const socialIconMap = {
+  "facebook.com": "i-cib-facebook-f",
+  "twitter.com": "i-cib-twitter",
+  "x.com": "i-cib-twitter",
+  "instagram.com": "i-cib-instagram",
+  "youtube.com": "i-cib-youtube",
+  "linkedin.com": "i-cib-linkedin",
+  "tiktok.com": "i-cib-tiktok",
+};
+
+function getIconFromUrl(url: string): string {
+  try {
+    const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
+    return socialIconMap[domain as keyof typeof socialIconMap] || "i-lucide-globe";
+  }
+  catch {
+    return "i-lucide-globe";
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-1">
+    <UButton
+      v-for="(profile, key) in profiles" :key="key"
+      :icon="getIconFromUrl(profile!.url)"
+      :to="profile!.url"
+      variant="link"
+      color="neutral"
+      external
+      target="_blank"
+    />
+  </div>
+</template>