feat(animatin): imported gsap and implemented some animations

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@types/node": "^14.18.34",
     "clipboard": "^2.0.11",
+    "gsap": "^3.12.2",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "prismjs": "^1.29.0",

src/components/GgSubMenu.vue

@@ -0,0 +1,83 @@
+<template>
+  <span ref="main"
+      class="gl-sub-menu"
+      tabindex="4"
+      @click="toggleLangMenu()"
+  >
+      <slot name="content"></slot>
+      <ul id="items" style="transform-origin: top;">
+        <slot name="items" />
+      </ul>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import gsap from 'gsap';
+import { onMounted, reactive, ref } from 'vue';
+
+const main = ref();
+const visible = reactive({
+  value: true
+});
+let ctx;
+
+const renderMenu = (visible: boolean, ul) => {
+    if (visible) {
+        gsap.set(ul, {
+            scaleY: 1,
+            opacity: 1
+        })
+    } else {
+        gsap.to(ul, {
+            scaleY: 0,
+            opacity: 0,
+            duration: .3,
+            ease: 'power4.out'
+        })
+    }
+}
+const toggleLangMenu = () => {
+    gsap.context(self => {
+        const ul = self.selector?.('ul')
+        renderMenu(visible.value, ul)
+    }, main.value)
+    visible.value = !visible.value;
+}
+</script>
+
+<style lang="less">
+@primary-color: #5352ed;
+@font-color: darken(@primary-color, 20%);
+
+.gl-sub-menu {
+  position: relative;
+  display: inline-blocks;
+  cursor: pointer;
+
+  &>ul {
+      display: block;
+      position: absolute;
+      top: calc(100%);
+      right: 0;
+      min-width: 100px;
+      padding: 10px;
+      border: 1px solid white;
+      border-radius: 10px;
+      background: rgba(255, 255, 255, .8);
+      color: @primary-color;
+
+      &>li {
+          padding: 5px;
+          border-radius: 5px;
+          cursor: pointer;
+          &:hover {
+              color: @font-color;
+              background: white;
+          }
+      }
+  }
+  &:hover ul {
+      // display: block;
+  }
+}
+</style>

src/views/global/GlHeader.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Global header -->
-    <header>
+    <header ref="main">
         <router-link to="/" tabindex="1" id="logo">
             <img src="/logo.png" alt="Logo">
         </router-link>
@@ -12,16 +12,28 @@
                 class="gl-menu"
                 tabindex="3">{{$t('nav.about')}}</router-link>
             <!-- this might be an single component future -->
-            <span class="gl-sub-menu"
-                tabindex="4">
+            <!-- <span class="gl-sub-menu"
+                tabindex="4"
+                @click="toggleLangMenu()">
                 <i class="fa-solid fa-globe" />
                 <ul>
                     <li v-for="lang in langs"
                         @click="toggleLang(lang.value)">
                         {{ lang.name }}
                     </li>
                 </ul>
-            </span>
+            </span> -->
+            <gg-sub-menu>
+                <template v-slot:content>
+                    <i class="fa-solid fa-language" />
+                </template>
+                <template v-slot:items>
+                    <li v-for="lang in langs"
+                        @click="toggleLang(lang.value)">
+                        {{ lang.name }}
+                    </li>
+                </template>
+            </gg-sub-menu>
             <a href="https://github.com/ZenkieBear/glassmorphism"
                 class="gl-menu"
                 tabindex="5">
@@ -33,7 +45,8 @@
 
 
 <script lang="ts" setup>
-import i18n, { langs } from '@assets/lang/index.ts';
+import GgSubMenu from '@/components/GgSubMenu.vue'
+import i18n, { langs } from '@/assets/lang/index';
 
 const toggleLang = (lang: string) => {
     i18n.global.locale = lang;
@@ -62,6 +75,7 @@ header {
     left: 0;
     z-index: 2;
     transition: @transition-eased2s;
+
     #logo {
         &:focus {
             outline: none;
@@ -116,7 +130,7 @@ header {
                 }
             }
             &:hover ul {
-                display: block;
+                // display: block;
             }
         }
     }