From 67aefb8bd91c62c495febb30e68f367f053354f0 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 29 Aug 2024 17:41:58 +0200
Subject: [PATCH] Revamped main layout

---
 app.vue                               | 12 ++++-
 assets/main.css                       | 18 +++----
 components/global/sidebar/Sidebar.vue | 70 +++++++++++++--------------
 components/global/user/CTA.vue        | 35 ++++++++++----
 pages/my/index.vue                    | 28 ++++++++++-
 public/images/galaxy.svg              | 28 +++++++++++
 tailwind.config.js                    |  4 ++
 7 files changed, 136 insertions(+), 59 deletions(-)
 create mode 100644 public/images/galaxy.svg

diff --git a/app.vue b/app.vue
index f3eb9f3..4d46a85 100644
--- a/app.vue
+++ b/app.vue
@@ -38,12 +38,20 @@ const useIdFunction = () => useId()
 
     <NuxtLayout>
       <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 />
 
-          <NuxtPage/>
+          <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
+            <NuxtPage />
+          </div>
         </div>
       </ConfigProvider>
     </NuxtLayout>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.wrapper > * {
+  height: 100%;
+}
+</style>
diff --git a/assets/main.css b/assets/main.css
index 381e89a..ae68938 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -37,28 +37,28 @@
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 180 0 4.9%;
     --foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
+    --muted: 250 40% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
 
-    --popover: 222.2 84% 4.9%;
+    --popover: 180 0 4.9%;
     --popover-foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
+    --card: 180 0 4.9%;
     --card-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+    --border: 217 0 10%;
+    --input: 250 40% 17.5%;
 
     --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%;
 
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 250 40% 17.5%;
     --accent-foreground: 210 40% 98%;
 
     --destructive: 0 62.8% 30.6%;
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index 8b62724..2485eb8 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -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">
diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index e3f2062..18a6325 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -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>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 79db25e..9a2473b 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -85,7 +85,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <main class="p-8">
+    <main class="p-8 after:fill-red-400">
     <Heading>{{ user?.user_metadata.full_name }}</Heading>
 
     <section v-if="worlds" class="mt-4">
@@ -133,3 +133,29 @@ onUnmounted(() => {
     </section>
   </main>
 </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>
diff --git a/public/images/galaxy.svg b/public/images/galaxy.svg
new file mode 100644
index 0000000..9f7e863
--- /dev/null
+++ b/public/images/galaxy.svg
@@ -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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9567927..230188b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -58,6 +58,10 @@ module.exports = {
           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: {
       	xl: "calc(var(--radius) + 4px)",
         lg: "var(--radius)",