From 2d1222b1f478d79ae63b6425d9feeec13b919f51 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 1 Feb 2023 02:39:27 +0500
Subject: [PATCH] animation

---
 src/animations/language.animation.ts     | 16 ++++++++++++++++
 src/components/header/LanguageSelect.tsx | 19 ++++++++++++++++---
 src/styles/_nav.scss                     | 11 ++++++++++-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/animations/language.animation.ts b/src/animations/language.animation.ts
index 6c877e9..208abfe 100644
--- a/src/animations/language.animation.ts
+++ b/src/animations/language.animation.ts
@@ -14,4 +14,20 @@ export const languageMotion: Variants = {
     overflow: "visible",
     opacity: 1,
   },
+
+  arrowRest: {
+    transform: "rotateX(0deg)",
+  },
+
+  arrowActive: {
+    transform: "rotateX(180deg)",
+  },
+
+  wrapperRest: {
+    background: "rgba(255, 255, 255, 0)",
+  },
+
+  wrapperActive: {
+    background: "#f1f1f1",
+  },
 };
diff --git a/src/components/header/LanguageSelect.tsx b/src/components/header/LanguageSelect.tsx
index 400b9c9..0534624 100644
--- a/src/components/header/LanguageSelect.tsx
+++ b/src/components/header/LanguageSelect.tsx
@@ -40,9 +40,22 @@ const LanguageSelect = () => {
     dispatch(setLanguage(title));
   };
   return (
-    <div className="language" onClick={() => setDropdown(!dropdown)}>
+    <motion.div
+      className="language"
+      onClick={() => setDropdown(!dropdown)}
+      initial={"wrapperRest"}
+      animate={dropdown ? "wrapperActive" : "wrapperRest"}
+      variants={languageMotion}
+    >
       <span>{activeLanguage}</span>
-      <ArrowDownBlack />
+      <motion.div
+        className="icon-wrapper"
+        initial={"arrowRest"}
+        animate={dropdown ? "arrowActive" : "arrowRest"}
+        variants={languageMotion}
+      >
+        <ArrowDownBlack />
+      </motion.div>
       <motion.ul
         className="language-dropdown"
         variants={languageMotion}
@@ -70,7 +83,7 @@ const LanguageSelect = () => {
           );
         })}
       </motion.ul>
-    </div>
+    </motion.div>
   );
 };
 
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index fd52f79..0496c41 100644
--- a/src/styles/_nav.scss
+++ b/src/styles/_nav.scss
@@ -58,6 +58,7 @@
 }
 
 .language {
+  padding: 1rem;
   position: relative;
   display: flex;
   align-items: center;
@@ -65,6 +66,7 @@
   font-size: 1.8rem;
   cursor: pointer;
   color: $black;
+  border-radius: 0.5rem;
 }
 
 .language-dropdown {
@@ -72,12 +74,12 @@
   top: calc(100% + 1rem);
   left: 0;
   width: 100%;
-  // height: 100%;
   background: $white;
   display: flex;
   flex-direction: column;
   border-radius: 0.5rem;
   border: 0.1rem solid $gray;
+
   li {
     button {
       padding: 1.4rem 1rem;
@@ -93,6 +95,13 @@
     0rem -0.1rem 0.02rem rgba(0, 0, 0, 0.1);
 }
 
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+}
+
 .subnav-inner {
   padding: 1.6rem 0;
   width: 100%;