Profile page and sidebar layouts

This commit is contained in:
Alexis
2024-05-14 11:53:20 +02:00
parent 4034104c9e
commit cd5822def4
7 changed files with 57 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>

View File

@@ -1,23 +1,31 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { MenuItem } from '~/components/global/SidebarProps';
useHead({ useHead({
title: 'Dashboard' title: 'Dashboard'
}) })
const sidebarMenu: MenuItem[] = []
</script> </script>
<template> <template>
<main class="h-full grid place-items-center"> <main class="h-full grid grid-cols-[auto_1fr]">
<UiCard class="w-1/3 min-w-72" link="/calendar"> <Sidebar :menu-items="sidebarMenu" is-home />
<UiCardHeader>
<UiCardTitle>Calendrier</UiCardTitle> <div class="h-full grid place-items-center">
<UiCardDescription> <UiCard class="w-1/3 min-w-72" link="/calendar">
<UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary"> <UiCardHeader>
chronologie <UiCardTitle>Calendrier</UiCardTitle>
</UiBadge> <UiCardDescription>
</UiCardDescription> <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
</UiCardHeader> chronologie
<UiCardContent> </UiBadge>
Chronologie complète de Léïm, rassemblant les évènements et personnages clés du monde </UiCardDescription>
</UiCardContent> </UiCardHeader>
</UiCard> <UiCardContent>
Chronologie complète de Léïm, rassemblant les évènements et personnages clés du monde
</UiCardContent>
</UiCard>
</div>
</main> </main>
</template> </template>

17
pages/profile.vue Normal file
View File

@@ -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>