From cd5822def4b92567859e6b4b7bc83c8d87896f77 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 14 May 2024 11:53:20 +0200
Subject: [PATCH] Profile page and sidebar layouts

---
 components/global/Heading.vue     |  5 +++++
 components/global/Sidebar.vue     |  2 +-
 components/global/SidebarProps.ts |  3 ++-
 components/global/user/CTA.vue    |  2 +-
 components/profile/Layout.vue     |  9 ++++++++
 pages/index.vue                   | 36 +++++++++++++++++++------------
 pages/profile.vue                 | 17 +++++++++++++++
 7 files changed, 57 insertions(+), 17 deletions(-)
 create mode 100644 components/global/Heading.vue
 create mode 100644 components/profile/Layout.vue
 create mode 100644 pages/profile.vue

diff --git a/components/global/Heading.vue b/components/global/Heading.vue
new file mode 100644
index 0000000..2726bcc
--- /dev/null
+++ b/components/global/Heading.vue
@@ -0,0 +1,5 @@
+<template>
+  <h1 class="text-2xl font-bold flex">
+    <slot />
+  </h1>
+</template>
diff --git a/components/global/Sidebar.vue b/components/global/Sidebar.vue
index cbf174f..56142fb 100644
--- a/components/global/Sidebar.vue
+++ b/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>
diff --git a/components/global/SidebarProps.ts b/components/global/SidebarProps.ts
index fa40d08..adcfce0 100644
--- a/components/global/SidebarProps.ts
+++ b/components/global/SidebarProps.ts
@@ -6,5 +6,6 @@ export interface MenuItem {
 }
 
 export interface SidebarProps {
-  menuItems: MenuItem[]
+  menuItems: MenuItem[],
+  isHome?: boolean
 }
diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index da3558d..72b76ee 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -43,7 +43,7 @@ async function handleLogout() {
 }
 
 function gotoProfilePage() {
-  router.push({ path: '/profil' })
+  router.push({ path: '/profile' })
 }
 </script>
 
diff --git a/components/profile/Layout.vue b/components/profile/Layout.vue
new file mode 100644
index 0000000..623d0a6
--- /dev/null
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index e0c8f83..f4eb51d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,23 +1,31 @@
 <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">
-    <UiCard class="w-1/3 min-w-72" link="/calendar">
-      <UiCardHeader>
-        <UiCardTitle>Calendrier</UiCardTitle>
-        <UiCardDescription>
-          <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
-            chronologie
-          </UiBadge>
-        </UiCardDescription>
-      </UiCardHeader>
-      <UiCardContent>
-        Chronologie complète de Léïm, rassemblant les évènements et personnages clés du monde
-      </UiCardContent>
-    </UiCard>
+  <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>
+          <UiCardDescription>
+            <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
+              chronologie
+            </UiBadge>
+          </UiCardDescription>
+        </UiCardHeader>
+        <UiCardContent>
+          Chronologie complète de Léïm, rassemblant les évènements et personnages clés du monde
+        </UiCardContent>
+      </UiCard>
+    </div>
   </main>
 </template>
diff --git a/pages/profile.vue b/pages/profile.vue
new file mode 100644
index 0000000..54b45e8
--- /dev/null
+++ b/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>