initial commit

Base appearance of the website is done, now onto adding features

components/ui/Footer.vue

@@ -0,0 +1,34 @@
+<template>
+  <footer class="flex-none">
+    <div class="mx-auto max-w-7xl flex flex-col gap-1 my-2" aria-label="Footer">
+      <UDivider>
+        <UiLogo :avatar="true" />
+      </UDivider>
+      <div class="flex flex-col md:flex-row flex-wrap gap-2 items-center space-between p-6 md:px-8">
+        <div class="md:flex-1">
+          Propulsé par
+          <ULink
+            to="https://labs.phundrak.com/phundrak/gejdr-front"
+            class="px-1 text-accent-600 hover:text-accent-400 transition font-semibold"
+          >
+            GéJDR
+          </ULink>
+        </div>
+        <div class="flex text-base">
+          <UContainer>front&nbsp;: {{ config.public.frontVersion }}</UContainer>
+          <UDivider orientation="vertical" />
+          <UContainer>back&nbsp;: temp</UContainer>
+        </div>
+        <div class="md:text-base md:flex-1 md:flex md:justify-end">
+          Copyright &copy; Lucien Cartier-Tilet {{ year }}
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+const config = useRuntimeConfig();
+const date = new Date();
+const year = date.getFullYear();
+</script>

components/ui/Header.vue

@@ -0,0 +1,95 @@
+<template>
+  <header class="bg-background dark:bg-background shadow-md shadow-background-100 dark:shadow-background-50">
+    <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Menu global">
+      <div class="flex lg:flex-1">
+        <RouterLink to="/" class="-m-1.5 p-1.5">
+          <span class="sr-only">GéJDR</span>
+          <UiLogo class="h-10 w-auto" />
+        </RouterLink>
+      </div>
+      <!-- Mobile menu opener -->
+      <div class="flex lg:hidden">
+        <UButton
+          type="button"
+          class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5"
+          variant="ghost"
+          @click="openMenu"
+        >
+          <span class="sr-only">Ouvrir le menu principal</span>
+          <UiIconsMenu class="size-6 text-text-800" />
+        </UButton>
+      </div>
+      <div class="hidden lg:flex lg:gap-x-12">
+        <UiHeaderLink
+          v-for="url in urls"
+          :name="url.name"
+          :path="url.path"
+          :key="url.path"
+          class="rounded-md -m.2.5 p-2.5 transition"
+        />
+      </div>
+      <div class="hidden lg:flex lg:flex-1 lg:justify-end flex-row gap-8 place-items-center">
+        <RouterLink to="/login" class="font-semibold text-text-800 hover:text-text-600 transition">
+          Connexion <span aria-hidden="true">&rarr;</span>
+        </RouterLink>
+        <UiThemeSwitcher />
+      </div>
+    </nav>
+    <!-- Mobile menu -->
+    <div role="dialog" aria-modal="true" :class="{ hidden: menuHidden }" class="lg:hidden">
+      <div class="fixed inset-0 z-10"></div>
+      <div
+        class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+      >
+        <div class="flex items-center justify-between">
+          <RouterLink to="/" class="-m-1.5 p-1.5">
+            <span class="sr-only">GéJDR</span>
+            <UiLogo class="h-10 w-auto" />
+          </RouterLink>
+          <UButton variant="ghost" icon="i-mdi-close" color="text" size="md" @click="closeMenu">
+            <span class="sr-only">Fermer le menu</span>
+          </UButton>
+        </div>
+        <div class="mt-6 flow-root">
+          <UiHeaderLink
+            v-for="url in urls"
+            :name="url.name"
+            :path="url.path"
+            :key="url.path"
+            @click="closeMenu"
+            class="-mx-3 block rounded-lg px-3 my-1 py-2 text-xl/7 font-semibold text-text-800 hover:text-text-600 transition"
+          />
+        </div>
+        <div class="py-6 flex flex-row space-between place-items-center">
+          <div class="flex-1">
+            <RouterLink
+              to="/login"
+              class="-mx-3 block rounded-lg px-3 py-2 text-xl/7 font-semibold text-text-800 hover:text-text-600 transition"
+            >
+              Connexion <span aria-hidden="true">&rarr;</span>
+            </RouterLink>
+          </div>
+          <UiThemeSwitcher />
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+interface Url {
+  path: string;
+  name: string;
+}
+
+const urls: Url[] = [
+  { path: '/dashboard', name: 'Tableau de bord' },
+  { path: '/campaigns', name: 'Mes campagnes' },
+  { path: '/characters', name: 'Mes personnages' },
+  { path: '/about', name: 'À propos' },
+];
+
+const menuHidden = ref(true);
+const openMenu = () => (menuHidden.value = false);
+const closeMenu = () => (menuHidden.value = true);
+</script>

components/ui/Logo.vue

@@ -0,0 +1,13 @@
+<template>
+  <UAvatar v-if="avatar" :src="src" :alt="alt" />
+  <img v-else :alt="alt" :src="src" />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  avatar?: boolean;
+  src?: string;
+  alt?: string;
+}
+const { avatar = false, src = '/img/gege.png', alt = 'GéJDR' } = defineProps<Props>();
+</script>

components/ui/ThemeSwitcher.vue

@@ -0,0 +1,7 @@
+<template>
+  <UButton variant="ghost" :icon="switcher.icon" @click="next" :ui="{ rounded: 'rounded-full' }" class="h-8 w-auto" />
+</template>
+
+<script setup lang="ts">
+const { switcher, next } = useTheme();
+</script>

components/ui/header/Link.vue

@@ -0,0 +1,15 @@
+<template>
+  <RouterLink :to="props.path" :class="cssClass">
+    {{ props.name }}
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  path: string;
+  name: string;
+}>();
+
+const route = useRoute();
+const cssClass = computed((): string => (props.path === route.path ? 'bg-background-300' : 'bg-background'));
+</script>

components/ui/icons/Close.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+    ></path>
+  </svg>
+</template>

components/ui/icons/Menu.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"></path>
+  </svg>
+</template>