Profile page and sidebar layouts

components/global/Heading.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1 class="text-2xl font-bold flex">
+    <slot />
+  </h1>
+</template>

components/global/Sidebar.vue

@@ -14,7 +14,7 @@ defineProps<SidebarProps>()
         </UiButton>
       </li>
 
-      <li>
+      <li v-if="!isHome">
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
             <UiTooltipTrigger as-child>

components/global/SidebarProps.ts

@@ -6,5 +6,6 @@ export interface MenuItem {
 }
 
 export interface SidebarProps {
-  menuItems: MenuItem[]
+  menuItems: MenuItem[],
+  isHome?: boolean
 }

components/global/user/CTA.vue

@@ -43,7 +43,7 @@ async function handleLogout() {
 }
 
 function gotoProfilePage() {
-  router.push({ path: '/profil' })
+  router.push({ path: '/profile' })
 }
 </script>
 

components/profile/Layout.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+const user = useSupabaseUser()
+</script>
+
+<template>
+  <div class="p-8">
+    <Heading>{{ user?.user_metadata.full_name }}</Heading>
+  </div>
+</template>

pages/index.vue

@@ -1,11 +1,18 @@
 <script lang="ts" setup>
+import type { MenuItem } from '~/components/global/SidebarProps';
+
 useHead({
   title: 'Dashboard'
 })
+
+const sidebarMenu: MenuItem[] = []
 </script>
 
 <template>
-  <main class="h-full grid place-items-center">
+  <main class="h-full grid grid-cols-[auto_1fr]">
+    <Sidebar :menu-items="sidebarMenu" is-home />
+
+    <div class="h-full grid place-items-center">
       <UiCard class="w-1/3 min-w-72" link="/calendar">
         <UiCardHeader>
           <UiCardTitle>Calendrier</UiCardTitle>
@@ -19,5 +26,6 @@ useHead({
           Chronologie complète de Léïm, rassemblant les évènements et personnages clés du monde
         </UiCardContent>
       </UiCard>
+    </div>
   </main>
 </template>

pages/profile.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { MenuItem } from '~/components/global/SidebarProps';
+
+useHead({
+  title: 'Profil'
+})
+
+const sidebarMenu: MenuItem[] = []
+</script>
+
+<template>
+  <main class="h-full grid grid-cols-[auto_1fr]">
+    <Sidebar :menu-items="sidebarMenu" />
+
+    <ProfileLayout />
+  </main>
+</template>