Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamped main layout

Browse Source
This commit is contained in:
Alexis
2024-08-29 17:41:58 +02:00
parent 386b714f3c
commit 67aefb8bd9
7 changed files with 136 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/global/sidebar/Sidebar.vue
View File

@@ -15,7 +15,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</script>
<template>
<nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid grid-rows-[1fr_auto] justify-center">
<nav class="w-16 py-6 border-r-[1px] bg-indigo-700 dark:bg-black text-white dark:border-r-indigo-950 grid grid-rows-[1fr_auto] justify-center transition-colors">
<menu class="flex flex-col gap-4">
<li class="mb-12">
<UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log">
@@ -23,43 +23,39 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</UiButton>
</li>
<template v-if="!user">
<li>
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/">
<PhHouse size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Accueil</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
</template>
<li v-if="!user">
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/">
<PhHouse size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Accueil</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
<template v-else>
<li>
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/my">
<PhGlobeHemisphereWest size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Mondes</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
</template>
<li v-else>
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/my">
<PhGlobeHemisphereWest size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Mondes</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
<li v-for="(item, i) in currentMenu" :key="i">
<UiTooltipProvider :delay-duration="50">

35
components/global/user/CTA.vue
View File

@@ -1,10 +1,10 @@
<script lang="ts" setup>
import { computed } from "vue"
import { PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
import { PhCheckCircle, PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
import { cn } from "~/lib/utils";
const router = useRouter()
const { preference } = useColorMode()
const { auth } = useSupabaseClient()
const user = useSupabaseUser()
@@ -84,23 +84,38 @@ function pushRoute(to: AvailableRoutes) {
<UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none pointer-events-none">
<PhPalette size="20" weight="fill" />
<span>Apparence</span>
</UiDropdownMenuItem>
</UiDropdownMenuSubTrigger>
<UiDropdownMenuPortal>
<UiDropdownMenuSubContent>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'dark'">
<PhMoon size="20" />
<UiDropdownMenuItem
class="flex gap-[.5ch] items-center rounded-none"
:class="cn({ 'text-emerald-600': $colorMode.preference === 'dark' })"
@select.prevent="$colorMode.preference = 'dark'"
>
<PhCheckCircle v-if="$colorMode.preference === 'dark'" size="20" weight="fill" />
<PhMoon v-else size="20" />
<span>Sombre</span>
</UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'">
<PhSun size="20" />
<UiDropdownMenuItem
class="flex gap-[.5ch] items-center rounded-none"
:class="cn({ 'text-emerald-600': $colorMode.preference === 'light' })"
@select.prevent="$colorMode.preference = 'light'"
>
<PhCheckCircle v-if="$colorMode.preference === 'light'" size="20" weight="fill" />
<PhSun v-else size="20" />
<span>Clair</span>
</UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'">
<PhLaptop size="20" />
<UiDropdownMenuItem
class="flex gap-[.5ch] items-center rounded-none"
:class="cn({ 'text-emerald-600': $colorMode.preference === 'system' })"
@select.prevent="$colorMode.preference = 'system'"
>
<PhCheckCircle v-if="$colorMode.preference === 'system'" size="20" weight="fill" />
<PhLaptop v-else size="20" />
<span>Système</span>
</UiDropdownMenuItem>
</UiDropdownMenuSubContent>
@@ -109,7 +124,7 @@ function pushRoute(to: AvailableRoutes) {
<UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none pointer-events-none">
<PhTranslate size="20" />
<span>Langage</span>
</UiDropdownMenuItem>