animation

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",
+  },
 };

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>
   );
 };
 

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%;