Revamped main layout

2024-08-29 17:41:58 +02:00
parent 386b714f3c
commit 67aefb8bd9
7 changed files with 136 additions and 59 deletions
--- 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 />

+          <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>
--- 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%;
--- 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,8 +23,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
        </UiButton>
      </li>

-      <template v-if="!user">
-        <li>
+      <li v-if="!user">
        <UiTooltipProvider :delay-duration="50">
          <UiTooltip>
            <UiTooltipTrigger as-child>
@@ -40,10 +39,8 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
          </UiTooltip>
        </UiTooltipProvider>
      </li>
-      </template>

-      <template v-else>
-        <li>
+      <li v-else>
        <UiTooltipProvider :delay-duration="50">
          <UiTooltip>
            <UiTooltipTrigger as-child>
@@ -59,7 +56,6 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
          </UiTooltip>
        </UiTooltipProvider>
      </li>
-      </template>

      <li v-for="(item, i) in currentMenu" :key="i">
        <UiTooltipProvider :delay-duration="50">
--- 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>
--- 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>
--- a/public/images/galaxy.svg
+++ 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>
--- 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)",