website / Fix mobile navigation

alpsify · Nov 11, 2024 · c656c81 · c656c81
1 parent 348dfe1
commit c656c81
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 33 deletions.
diff --git a/libs/ui-components/sheet/LychenSheetContent.vue b/libs/ui-components/sheet/LychenSheetContent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  DialogClose,
   DialogContent,
   type DialogContentEmits,
   type DialogContentProps,

diff --git a/libs/ui-components/sheet/index.ts b/libs/ui-components/sheet/index.ts
@@ -19,7 +19,7 @@ export const sheetVariants = cva(
           'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0',
         left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0  h-full w-3/4 sm:max-w-sm',
         right:
-          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm',
+          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm overflow-y-scroll',
       },
     },
     defaultVariants: {

diff --git a/libs/ui-layouts/website/LayoutWebsiteNavigation.vue b/libs/ui-layouts/website/LayoutWebsiteNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="z-50 flex h-[70px] w-full">
     <div
-      class="bg-surface-container/50 text-surface-container-on container flex flex-row items-stretch gap-4 rounded-full px-6 py-2 shadow-lg backdrop-blur-md"
+      class="bg-surface-container/70 text-surface-container-on container flex flex-row items-stretch gap-4 rounded-full px-6 py-2 shadow-lg backdrop-blur-lg"
     >
       <slot></slot>
 
@@ -17,7 +17,7 @@
             />
           </LychenSheetTrigger>
           <LychenSheetContent
-            class="bg-surface-container/50 text-surface-container-on w-full backdrop-blur-md"
+            class="bg-surface-container/70 text-surface-container-on w-full backdrop-blur-lg"
             @click="closeDialog"
           >
             <slot name="mobile"></slot>

diff --git a/projects/website/src/layouts/main/LayoutMainNavigation.vue b/projects/website/src/layouts/main/LayoutMainNavigation.vue
@@ -71,17 +71,15 @@
     </div>
 
     <div class="flex flex-row items-center gap-4">
-      <a href="https://github.com/alpsify/lychen">
+      <a
+        href="https://github.com/alpsify/lychen"
+        trget="_blank"
+      >
         <LychenIcon
           icon="github"
           :fashion="LYCHEN_ICON_FASHION.Brands"
         />
       </a>
-      <LychenButton
-        size="xs"
-        variant="secondary"
-        >{{ t(`${TRANSLATION_KEY}.navigation.soon`) }}
-      </LychenButton>
     </div>
   </div>
 </template>

diff --git a/projects/website/src/layouts/main/LayoutMainNavigationMobile.vue b/projects/website/src/layouts/main/LayoutMainNavigationMobile.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="mt-4 flex w-full flex-col items-stretch justify-start gap-4">
-    <RouterLink
-      :to="{ name: RouteViewHome.name }"
-      class="flex h-10 flex-row items-stretch"
-    >
-      <LychenLogo
-    /></RouterLink>
+  <div class="mt-4 flex w-full flex-col items-stretch justify-start gap-2">
+    <div class="flex flex-row items-stretch mb-5">
+      <LychenLogo />
+    </div>
+
+    <div class="text-lg font-bold">
+      <RouterLink :to="{ name: RouteViewHome.name }"
+        >{{ t(`${TRANSLATION_KEY}.navigation.home.title`) }}
+      </RouterLink>
+    </div>
     <div class="text-lg font-bold opacity-50">
       {{ t(`${TRANSLATION_KEY}.navigation.app.title`) }}
     </div>
 
-    <ul class="flex flex-col gap-2">
+    <ul class="flex flex-col gap-1">
       <li
         v-for="application in applicationsList"
         :key="application.title"
@@ -19,28 +22,21 @@
           <div
             :href="application.link"
             target="_blank"
-            class="flex select-none flex-row items-center gap-2 space-y-1 rounded-md bg-surface-container-high/50 p-2 leading-none no-underline outline-none transition-colors hover:bg-surface-container-high hover:text-surface-container-high-on focus:bg-surface-container-high focus:text-surface-container-high-on"
+            class="select-none bg-surface-container/40 flex flex-col gap-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-surface-container-high hover:text-surface-container-high-on focus:bg-surface-container-high focus:text-surface-container-high-on"
           >
-            <img
-              :src="`/logos/${application.logo}`"
-              class="size-8"
-            />
-            <div class="flex flex-col gap-1">
-              <p class="flex flex-row items-center gap-2 text-sm font-bold leading-none">
+            <div class="flex flex-row gap-2 justify-between items-center">
+              <p class="text-md font-black font-lexend leading-none tracking-wide lowercase">
                 {{ application.title }}
-                <LychenBadge variant="tertiary"
-                  >{{ t(`${TRANSLATION_KEY}.navigation.app.state.${application.state}`) }}
-                </LychenBadge>
-              </p>
-              <p class="line-clamp-3 text-xs leading-snug text-surface-container-on/70">
-                {{ application.description }}
               </p>
             </div>
+            <p class="line-clamp-3 text-xs leading-snug text-surface-container-on/70">
+              {{ application.description }}
+            </p>
           </div>
         </LychenNavigationMenuLink>
       </li>
     </ul>
-    <div class="font-bold">
+    <div class="text-lg font-bold">
       <RouterLink :to="{ name: RouteViewPrice.name }"
         >{{ t(`${TRANSLATION_KEY}.navigation.price.title`) }}
       </RouterLink>
@@ -56,8 +52,10 @@ import { TRANSLATION_KEY, useTranslations } from './i18n';
 import { RouteViewPrice } from '@/views/price';
 import { RouteViewHome } from '@/views/home';
 import { defineAsyncComponent } from 'vue';
+import { DialogClose } from 'radix-vue';
 
 const LychenLogo = defineAsyncComponent(() => import('@lychen/ui-components/logo/LychenLogo.vue'));
+const LychenIcon = defineAsyncComponent(() => import('@lychen/ui-components/icon/LychenIcon.vue'));
 
 const { t } = useTranslations();
 

diff --git a/projects/website/src/layouts/main/i18n/fr-FR.ts b/projects/website/src/layouts/main/i18n/fr-FR.ts
@@ -1,5 +1,8 @@
 export default {
   navigation: {
+    home: {
+      title: 'Accueil',
+    },
     app: {
       title: 'Applications',
       state: {

diff --git a/projects/website/tailwind.config.ts b/projects/website/tailwind.config.ts
@@ -7,7 +7,6 @@ import animate from 'tailwindcss-animate';
 import { contentConfig } from '@lychen/ui-css/tailwind/contentConfig';
 
 export default {
-  //darkMode: ['selector'],
   safelist: ['dark'],
   prefix: '',