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

12
app.vue
View File

@@ -38,12 +38,20 @@ const useIdFunction = () => useId()
<NuxtLayout> <NuxtLayout>
<ConfigProvider :use-id="useIdFunction"> <ConfigProvider :use-id="useIdFunction">
<div class="h-full grid grid-cols-[auto_1fr]"> <div class="h-full grid grid-cols-[auto_1fr] dark:bg-black transition-colors">
<Sidebar /> <Sidebar />
<NuxtPage/> <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
<NuxtPage />
</div>
</div> </div>
</ConfigProvider> </ConfigProvider>
</NuxtLayout> </NuxtLayout>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.wrapper > * {
height: 100%;
}
</style>

18
assets/main.css
View File

@@ -37,28 +37,28 @@
} }
.dark { .dark {
--background: 222.2 84% 4.9%; --background: 180 0 4.9%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%; --muted: 250 40% 17.5%;
--muted-foreground: 215 20.2% 65.1%; --muted-foreground: 215 20.2% 65.1%;
--popover: 222.2 84% 4.9%; --popover: 180 0 4.9%;
--popover-foreground: 210 40% 98%; --popover-foreground: 210 40% 98%;
--card: 222.2 84% 4.9%; --card: 180 0 4.9%;
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%; --border: 217 0 10%;
--input: 217.2 32.6% 17.5%; --input: 250 40% 17.5%;
--primary: 210 40% 98%; --primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%; --primary-foreground: 180 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%; --secondary: 250 40% 17.5%;
--secondary-foreground: 210 40% 98%; --secondary-foreground: 210 40% 98%;
--accent: 217.2 32.6% 17.5%; --accent: 250 40% 17.5%;
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;

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

@@ -15,7 +15,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</script> </script>
<template> <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"> <menu class="flex flex-col gap-4">
<li class="mb-12"> <li class="mb-12">
<UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log"> <UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log">
@@ -23,43 +23,39 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</UiButton> </UiButton>
</li> </li>
<template v-if="!user"> <li v-if="!user">
<li> <UiTooltipProvider :delay-duration="50">
<UiTooltipProvider :delay-duration="50"> <UiTooltip>
<UiTooltip> <UiTooltipTrigger as-child>
<UiTooltipTrigger as-child> <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child> <RouterLink to="/">
<RouterLink to="/"> <PhHouse size="24" weight="fill" />
<PhHouse size="24" weight="fill" /> </RouterLink>
</RouterLink> </UiButton>
</UiButton> </UiTooltipTrigger>
</UiTooltipTrigger> <UiTooltipContent :side="'right'" :side-offset="6">
<UiTooltipContent :side="'right'" :side-offset="6"> <p>Accueil</p>
<p>Accueil</p> </UiTooltipContent>
</UiTooltipContent> </UiTooltip>
</UiTooltip> </UiTooltipProvider>
</UiTooltipProvider> </li>
</li>
</template>
<template v-else> <li v-else>
<li> <UiTooltipProvider :delay-duration="50">
<UiTooltipProvider :delay-duration="50"> <UiTooltip>
<UiTooltip> <UiTooltipTrigger as-child>
<UiTooltipTrigger as-child> <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child> <RouterLink to="/my">
<RouterLink to="/my"> <PhGlobeHemisphereWest size="24" weight="fill" />
<PhGlobeHemisphereWest size="24" weight="fill" /> </RouterLink>
</RouterLink> </UiButton>
</UiButton> </UiTooltipTrigger>
</UiTooltipTrigger> <UiTooltipContent :side="'right'" :side-offset="6">
<UiTooltipContent :side="'right'" :side-offset="6"> <p>Mondes</p>
<p>Mondes</p> </UiTooltipContent>
</UiTooltipContent> </UiTooltip>
</UiTooltip> </UiTooltipProvider>
</UiTooltipProvider> </li>
</li>
</template>
<li v-for="(item, i) in currentMenu" :key="i"> <li v-for="(item, i) in currentMenu" :key="i">
<UiTooltipProvider :delay-duration="50"> <UiTooltipProvider :delay-duration="50">

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

@@ -1,10 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue" 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 router = useRouter()
const { preference } = useColorMode()
const { auth } = useSupabaseClient() const { auth } = useSupabaseClient()
const user = useSupabaseUser() const user = useSupabaseUser()
@@ -84,23 +84,38 @@ function pushRoute(to: AvailableRoutes) {
<UiDropdownMenuSub> <UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0"> <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" /> <PhPalette size="20" weight="fill" />
<span>Apparence</span> <span>Apparence</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
</UiDropdownMenuSubTrigger> </UiDropdownMenuSubTrigger>
<UiDropdownMenuPortal> <UiDropdownMenuPortal>
<UiDropdownMenuSubContent> <UiDropdownMenuSubContent>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'dark'"> <UiDropdownMenuItem
<PhMoon size="20" /> 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> <span>Sombre</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'"> <UiDropdownMenuItem
<PhSun size="20" /> 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> <span>Clair</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'"> <UiDropdownMenuItem
<PhLaptop size="20" /> 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> <span>Système</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
</UiDropdownMenuSubContent> </UiDropdownMenuSubContent>
@@ -109,7 +124,7 @@ function pushRoute(to: AvailableRoutes) {
<UiDropdownMenuSub> <UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0"> <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" /> <PhTranslate size="20" />
<span>Langage</span> <span>Langage</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>

28
pages/my/index.vue
View File

@@ -85,7 +85,7 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<main class="p-8"> <main class="p-8 after:fill-red-400">
<Heading>{{ user?.user_metadata.full_name }}</Heading> <Heading>{{ user?.user_metadata.full_name }}</Heading>
<section v-if="worlds" class="mt-4"> <section v-if="worlds" class="mt-4">
@@ -133,3 +133,29 @@ onUnmounted(() => {
</section> </section>
</main> </main>
</template> </template>
<style lang="scss" scoped>
main {
position: relative;
isolation: isolate;
overflow: clip;
&::after {
display: block;
content: '';
position: absolute;
right: -2.4rem;
bottom: -10%;
height: 75%;
width: 100%;
background-image: url('/images/galaxy.svg');
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: right;
z-index: -1;
mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
opacity: .3;
}
}
</style>

28
public/images/galaxy.svg Normal file
View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#6366f1" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 611.999 611.999" xml:space="preserve">
<g>
<path d="M611.502,203.367c-3.889-53.216-30.921-100.838-93.276-125.006c-69.361-26.884-151.96-13.033-216.77,16.813
c-67.784,31.216-151.313,93.935-171.682,171.605c-7.962,30.357-5.303,63.94,10.093,91.288
c19.789,35.152,59.002,56.863,99.094,61.324c55.248,6.147,112.773-16.493,155.435-50.741c24.317-19.521,46.5-44.992,58.997-73.774
c11.212-25.821,13.864-56.419,1.925-81.911c-16.243-34.679-54.683-49.835-91.121-44.132c-4.787,0.735-9.337,1.776-13.657,3.016
c-4.322,1.234-8.419,2.662-12.295,4.256c-7.765,3.148-14.653,6.919-20.773,10.925c-6.109,4.03-11.447,8.348-16.022,12.747
c-1.037,1.043-2.056,2.067-3.054,3.071c-1.08,1.074-2.021,2.094-2.964,3.1c-1.877,2.012-3.588,3.995-5.207,5.882
c-3.208,3.799-5.955,7.307-8.307,10.499c-4.731,6.35-8.047,11.323-10.284,14.671c-1.1,1.684-1.934,2.961-2.494,3.817
c-0.55,0.863-0.829,1.301-0.829,1.301c-0.92,1.449-0.97,3.367,0.036,4.894c1.366,2.076,4.157,2.652,6.233,1.285
c0,0,0.433-0.285,1.288-0.846c0.846-0.567,2.108-1.413,3.772-2.529c3.307-2.238,8.187-5.589,14.48-9.753
c6.333-4.129,14.012-9.048,23.248-13.695c2.175-1.069,4.431-2.096,6.846-3.028c2.399-0.946,4.893-1.86,7.522-2.638
c5.229-1.598,10.883-2.863,16.803-3.589c2.961-0.352,5.978-0.597,9.027-0.671c3.05-0.067,6.128,0.03,9.183,0.299
c10.759,1.003,24.149,4.372,30.659,13.714c4.245,6.092,4.815,14.123,3.391,21.409c-2.471,12.644-10.28,23.585-18.883,33.174
c-30.278,33.744-74.119,56.946-119.526,60.718c-37.814,2.947-73.075-14.422-78.121-55.732
c-3.607-29.523,10.253-58.809,29.349-81.612c26.954-32.186,60.518-59.114,98.754-76.011c14.09-6.227,28.7-11.46,43.667-15.311
c39.803-10.321,86.856-13.345,125.381,3.353c36.924,16.004,60.458,52.144,59.714,92.483c-0.223,11.808-2.412,23.851-6.114,35.878
c-3.66,12.037-8.996,24.017-15.499,35.56c-6.539,11.542-14.238,22.664-22.764,33.124C454.222,364.819,387.62,404.605,326.223,430.7
c-74.109,31.498-215.664,68.734-268.588-17.843c-27.588-45.131-17.468-102.863-2.502-150.461c0.541-1.722,0.006-3.684-1.497-4.867
c-1.942-1.528-4.754-1.193-6.282,0.748c0,0-1.277,1.622-3.752,4.764c-0.624,0.768-1.287,1.718-2.039,2.741
c-0.746,1.027-1.563,2.153-2.451,3.375C17.106,299.452,2.396,336.089,0.264,373.622c-1.962,34.546,6.992,69.97,26.952,98.236
c23.939,33.9,62.223,55.79,102.375,66.286c63.644,16.637,134.014,11.022,196.48-7.885c14.716-4.454,29.379-9.645,43.893-15.61
c14.505-5.984,28.826-12.8,42.955-20.315c51.202-27.233,99.882-64.099,136.409-109.452
C588.79,335.885,616.063,265.779,611.502,203.367z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

4
tailwind.config.js
View File

@@ -58,6 +58,10 @@ module.exports = {
foreground: "hsl(var(--card-foreground))", foreground: "hsl(var(--card-foreground))",
}, },
}, },
boxShadow: {
"body-dark": "hsla(250, 50%, 10%, 0.75) 0 0 32px 2px inset",
"body-light": "hsl(250, 60%, 85%) 0 0 18px 3px inset",
},
borderRadius: { borderRadius: {
xl: "calc(var(--radius) + 4px)", xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)", lg: "var(--radius)",