fix all nav bar animations and langs

Hetari · Sep 5, 2024 · 20d8236 · 20d8236
1 parent 979530f
commit 20d8236
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 94 deletions.
diff --git a/src/animations/index.ts b/src/animations/index.ts
@@ -2,7 +2,7 @@ import gsap from 'gsap';
 import MotionPathHelper from 'gsap/MotionPathPlugin';
 import ScrollTrigger from 'gsap/ScrollTrigger';
 import { Ref } from 'vue';
-import { lenis } from '@/main';
+import { i18n, lenis } from '@/main';
 
 gsap.registerPlugin(ScrollTrigger);
 gsap.registerPlugin(MotionPathHelper);
@@ -208,11 +208,12 @@ const navbarEnter = (id: string) => {
 };
 
 const navbarLeave = (id: string) => {
+  const x = i18n.global.locale == 'ar' ? '-100%' : '100%';
   gsap.to(id, {
     opacity: 0,
     onComplete: () => {
       gsap.set(id, {
-        x: '100%',
+        x: x,
       });
     },
   });
@@ -398,6 +399,7 @@ export {
   resetMagneto,
   animateNavbarEnter,
   animateNavbarLeave,
+  navbarLeave,
   animateLoadingPath,
   animateLoadingText,
   animateLoadingTextContainer,

diff --git a/src/components/BurgerMenuBtn.vue b/src/components/BurgerMenuBtn.vue
@@ -1,6 +1,10 @@
 <template>
   <MagneticEffect divId="magneto" textId="magnetoText">
-    <div v-bind="$attrs" class="fixed right-7 top-7 z-[20]">
+    <div
+      v-bind="$attrs"
+      class="fixed top-7 z-[20]"
+      :class="i18n.global.locale == 'en' ? 'right-7' : 'left-7'"
+    >
       <div
         id="magneto"
         class="flex-center size-14 cursor-pointer rounded-full bg-flax-smoke-300 brightness-90 ease-in-out lg:size-[4.5rem]"
@@ -15,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+  import { i18n } from '@/main';
   import MagneticEffect from './MagneticEffect.vue';
 </script>
 

diff --git a/src/components/common/Nav.vue b/src/components/common/Nav.vue
@@ -14,59 +14,81 @@
   <div
     tabindex="0"
     id="navbar"
-    @keydown.esc="esc()"
-    class="fixed right-0 top-[1dvh] z-[9998] h-[98dvh] w-full translate-x-full select-none rounded-s-lg bg-flax-smoke-950 p-5 will-change-transform focus:outline-none max-md:w-[98%] sm:p-10 md:w-3/5 md:px-20 lg:w-2/5"
+    @keydown.esc="toggleBtnClickAnimation()"
+    class="fixed top-[1dvh] z-[9998] h-[98dvh] w-full select-none rounded-s-lg bg-flax-smoke-950 p-5 will-change-transform focus:outline-none max-md:w-[98%] sm:p-10 md:w-3/5 md:px-20 lg:w-2/5"
+    :class="
+      i18n.global.locale == 'en'
+        ? 'right-0 translate-x-full'
+        : 'left-0 -translate-x-full'
+    "
   >
     <Circles id="circles" class="absolute right-0 top-0 opacity-25" />
     <div class="flex h-full flex-col items-center justify-between">
       <div class="relative z-[19] w-full">
-        <ul class="mt-12 font-bold text-flax-smoke-50 md:mt-24" id="navLinks">
+        <svg
+          @click="
+            () => {
+              toggleBtnClickAnimation();
+              toggleLocalLang();
+            }
+          "
+          class="size-12 cursor-pointer fill-none text-flax-smoke-50"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            d="M7 8.37931H11.5M17 8.37931H14.5M11.5 8.37931H14.5M11.5 8.37931V7M14.5 8.37931C13.9725 10.2656 12.8679 12.0487 11.6071 13.6158M8.39286 17C9.41205 16.0628 10.5631 14.9134 11.6071 13.6158M11.6071 13.6158C10.9643 12.8621 10.0643 11.6426 9.80714 11.0909M11.6071 13.6158L13.5357 15.6207"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
+            stroke="currentColor"
+            stroke-width="1.5"
+          />
+        </svg>
+        <ul
+          class="heading-2 mt-12 font-bold text-flax-smoke-50 md:mt-24"
+          id="navLinks"
+        >
           <li
             class="overflow-y-clip"
+            :class="{ 'h-[2ch]': i18n.global.locale == 'ar' }"
             v-for="l in navbarLinks"
             :key="l.label"
             :id="l.label"
           >
             <a
               :href="l.url"
               @click="gotoSection(l.url)"
-              class="group my-2 flex w-fit translate-y-full cursor-pointer items-center justify-start leading-none"
+              class="group my-2 flex h-full w-fit translate-y-full cursor-pointer items-center justify-start leading-none"
             >
               <span
                 class="h-4 w-4 scale-0 rounded-full bg-flax-smoke-50 opacity-0 transition-all duration-300 ease-in-out group-hover:scale-100 group-hover:opacity-100"
               ></span>
               <p
-                class="-translate-x-5 font-fancy transition-all duration-300 ease-in-out group-hover:translate-x-5"
+                class="font-fancy -translate-x-5 transition-all duration-300 ease-in-out"
+                :class="
+                  i18n.global.locale == 'en'
+                    ? 'group-hover:translate-x-5'
+                    : 'group-hover:-translate-x-10'
+                "
               >
                 {{ l.label }}
               </p>
             </a>
           </li>
         </ul>
-        <ul class="mt-12 font-bold text-flax-smoke-50 md:mt-24" id="navLinks">
-        <li >
-            <p
-              class="group my-2 flex w-fit translate-y-full cursor-pointer items-center justify-start leading-none"
-            >
-              <span
-                class="h-4 w-4 scale-0 rounded-full bg-flax-smoke-50 opacity-0 transition-all duration-300 ease-in-out group-hover:scale-100 group-hover:opacity-100"
-              ></span>
-              <p
-                class="-translate-x-5 font-fancy transition-all duration-300 ease-in-out group-hover:translate-x-5"
-              >
-                {{ i18n.global.locale == 'en' ? 'Language: English' : 'اللغة: العربية' }}
-              </p>
-            </p>
-          </li>
-        </ul>
-
       </div>
 
       <div class="w-full">
         <div class="mt-2 h-full font-normal text-flax-smoke-50">
           <p class="text-left text-sm font-bold uppercase">Email address</p>
           <Link
-            class="h-6 font-medium tracking-wider"
+            class="!h-6 font-medium tracking-wider"
             tag="p"
             label="[email protected]"
             url="mailto:[email protected]"
@@ -99,12 +121,11 @@
         <div id="name-container" class="group -m-10 h-fit cursor-pointer p-10">
           <h1
             id="name"
-            class="flex items-start font-fancy text-xl font-extrabold uppercase md:text-3xl"
-
+            class="font-fancy flex items-start text-xl font-extrabold uppercase md:text-3xl"
           >
             {{ $t('common.hetari') }}
-          <span
-              class="!inline !origin-center font-fancy text-xl transition-transform duration-500 ease-in-out group-hover:rotate-[360deg]"
+            <span
+              class="font-fancy !inline !origin-center text-xl transition-transform duration-500 ease-in-out group-hover:rotate-[360deg]"
               >&copy;</span
             >
           </h1>
@@ -113,9 +134,11 @@
 
       <div class="flex justify-start">
         <p
-          class="heading-6 hidden select-none font-fancy font-bold uppercase text-flax-smoke-400 md:block"
+          class="heading-6 font-fancy hidden select-none font-bold uppercase text-flax-smoke-400 md:block"
         >
-          {{ $t('nav.available') }} {{ $t('nav.forFreelancer') }} <br /> {{ $t('nav.workAndCollaboration') }}</p>
+          {{ $t('nav.available') }} {{ $t('nav.forFreelancer') }} <br />
+          {{ $t('nav.workAndCollaboration') }}
+        </p>
       </div>
       <div class="flex">
         <ul
@@ -125,36 +148,36 @@
             v-for="(l, index) in navLinks"
             :key="l.label"
             tag="li"
-            :label="l.label + (index !== navLinks.length - 1 ? $t('common.comma') : '')"
+            :label="
+              l.label +
+              (index !== navLinks.length - 1 ? $t('common.comma') : '')
+            "
             :url="l.url"
             class=""
           />
         </ul>
-        <div
-        @click="toggleLocalLang()"
-        >
+        <div @click="toggleLocalLang()">
           <svg
-          class="ms-5 size-7 cursor-pointer xl:size-9"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          color="#000000"
-          fill="none"
-        >
-          <path
-            d="M7 8.37931H11.5M17 8.37931H14.5M11.5 8.37931H14.5M11.5 8.37931V7M14.5 8.37931C13.9725 10.2656 12.8679 12.0487 11.6071 13.6158M8.39286 17C9.41205 16.0628 10.5631 14.9134 11.6071 13.6158M11.6071 13.6158C10.9643 12.8621 10.0643 11.6426 9.80714 11.0909M11.6071 13.6158L13.5357 15.6207"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
-            stroke="currentColor"
-            stroke-width="1.5"
-          />
-        </svg>
+            class="ms-5 size-7 cursor-pointer xl:size-9"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color="#000000"
+            fill="none"
+          >
+            <path
+              d="M7 8.37931H11.5M17 8.37931H14.5M11.5 8.37931H14.5M11.5 8.37931V7M14.5 8.37931C13.9725 10.2656 12.8679 12.0487 11.6071 13.6158M8.39286 17C9.41205 16.0628 10.5631 14.9134 11.6071 13.6158M11.6071 13.6158C10.9643 12.8621 10.0643 11.6426 9.80714 11.0909M11.6071 13.6158L13.5357 15.6207"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+            />
+          </svg>
         </div>
-
       </div>
     </nav>
   </header>
@@ -170,15 +193,19 @@
     animateNavbarEnter,
     animateNavbarLeave,
     navbarScale,
+    navbarLeave,
   } from '@/animations';
-  import { navbarLinks, navLinkType, socialLinks } from '@/data';
+  import { navLinkType, socialLinks } from '@/data';
   import { i18n, lenis } from '@/main';
 
   const isNavbarOpen = ref(false);
   const currentLocaleIndex = ref(0);
   const navLinks: ComputedRef<navLinkType[]> = computed(() => {
     return i18n.global.messages[i18n.global.locale].nav.links;
-  })
+  });
+  const navbarLinks: ComputedRef<navLinkType[]> = computed(() => {
+    return i18n.global.messages[i18n.global.locale].nav.navbar;
+  });
 
   const toggleBtnClickAnimation = () => {
     isNavbarOpen.value = !isNavbarOpen.value;
@@ -208,7 +235,6 @@
       (currentLocaleIndex.value + 1) % i18n.global.availableLocales.length;
     const newLocale = i18n.global.availableLocales[currentLocaleIndex.value];
     i18n.global.locale = newLocale;
-    
 
     togglePageDirection();
   };
@@ -217,41 +243,37 @@
     if (i18n.global.locale == 'en') {
       document.body.style.direction = 'ltr';
       toggleFontFamily('en');
-    }
-    else if (i18n.global.locale == 'ar') {
+    } else if (i18n.global.locale == 'ar') {
       document.body.style.direction = 'rtl';
-    toggleFontFamily('ar');
+      toggleFontFamily('ar');
     }
-  }
+    navbarLeave('#navbar');
+  };
   const toggleFontFamily = (lang: 'ar' | 'en') => {
     if (lang === 'ar') {
-    document.documentElement.style.setProperty('--font-fancy', '"Readex Pro"');
-  }
-  else{
-    document.documentElement.style.setProperty('--font-fancy', '"Bricolage Grotesque"');
-  }
-  }
+      document.documentElement.style.setProperty(
+        '--font-fancy',
+        '"Readex Pro"',
+      );
+    } else {
+      document.documentElement.style.setProperty(
+        '--font-fancy',
+        '"Bricolage Grotesque"',
+      );
+    }
+  };
 
   // Animation on component mount
   onMounted(() => {
-     const currentLocale = i18n.global.locale;
-  currentLocaleIndex.value = i18n.global.availableLocales.indexOf(currentLocale);
+    const currentLocale = i18n.global.locale;
+    currentLocaleIndex.value =
+      i18n.global.availableLocales.indexOf(currentLocale);
     // togglePageDirection()
     navbarScale('#burger', '#hero');
   });
 
-  const esc = () => {
-    toggleBtnClickAnimation();
-  };
-
   const emit = defineEmits(['isLocked']);
   watch(isNavbarOpen, (newVal) => {
     emit('isLocked', newVal);
   });
 </script>
-
-<style scoped>
-  #navLinks {
-    font-size: calc(clamp(3.25em, 5vw, 4em));
-  }
-</style>
diff --git a/src/components/design/Footer.vue b/src/components/design/Footer.vue
@@ -117,15 +117,18 @@
 </template>
 
 <script setup lang="ts">
-  import { navbarLinks, resourceLinks, socialLinks } from '@/data';
+  import { navLinkType, resourceLinks, socialLinks } from '@/data';
   import { Link } from '..';
-  import { onMounted, ref } from 'vue';
-  import { lenis } from '@/main';
+  import { ComputedRef, computed, onMounted, ref } from 'vue';
+  import { i18n, lenis } from '@/main';
   import MagneticEffect from '../MagneticEffect.vue';
   import moment from 'moment-timezone';
 
   const myLocalTime = ref('');
   const userLocalTime = ref('');
+  const navbarLinks: ComputedRef<navLinkType[]> = computed(() => {
+    return i18n.global.messages[i18n.global.locale].nav.navbar;
+  });
 
   onMounted(() => {
     // Yemen Time (local to you)

diff --git a/src/data.ts b/src/data.ts
@@ -4,8 +4,6 @@ export type navLinkType = {
   url: string;
 };
 
-const navbarLinks = [{ label: 'Home', url: 'body' }];
-
 const socialLinks = [
   {
     label: 'Twitter',
@@ -82,11 +80,4 @@ const locationCountry = 'Yemen, Sanaa';
 //   },
 // ];
 
-export {
-  navbarLinks,
-  socialLinks,
-  resourceLinks,
-  heroText,
-  locationPlace,
-  locationCountry,
-};
+export { socialLinks, resourceLinks, heroText, locationPlace, locationCountry };