language dropdown

src/animations/language.animation.ts

@@ -0,0 +1,17 @@
+import { Variants } from "framer-motion";
+
+export const languageMotion: Variants = {
+  rest: {
+    maxHeight: "0",
+    pointerEvents: "none",
+    overflow: "hidden",
+    opacity: 0,
+  },
+
+  active: {
+    maxHeight: "20rem",
+    pointerEvents: "all",
+    overflow: "visible",
+    opacity: 1,
+  },
+};

src/components/header/LanguageSelect.tsx

@@ -1,11 +1,62 @@
+// Modules
+import { motion } from "framer-motion";
+import { v4 as uuidv4 } from "uuid";
+import { useState } from "react";
+
 // Icons
 import { ReactComponent as ArrowDownBlack } from "../../assets/icons/arrow-down-black.svg";
 
+// Animations
+import { languageMotion } from "../../animations/language.animation";
+
+interface ILanguage {
+  title: "RU" | "EN" | "TM";
+}
+
+const languages: ILanguage[] = [
+  {
+    title: "RU",
+  },
+  {
+    title: "EN",
+  },
+  {
+    title: "TM",
+  },
+];
+
 const LanguageSelect = () => {
+  const [dropdown, setDropdown] = useState<boolean>(false);
   return (
-    <div className="language">
+    <div className="language" onClick={() => setDropdown(!dropdown)}>
       <span>EN</span>
       <ArrowDownBlack />
+      <motion.ul
+        className="language-dropdown"
+        variants={languageMotion}
+        initial="rest"
+        animate={dropdown ? "active" : "rest"}
+      >
+        {languages.map((language: ILanguage) => {
+          return (
+            <li key={uuidv4()}>
+              <motion.button
+                type="button"
+                initial={{
+                  background: "#ffffff",
+                  type: "tween",
+                }}
+                whileHover={{
+                  background: "#f1f1f1",
+                  type: "spring",
+                }}
+              >
+                {language.title}
+              </motion.button>
+            </li>
+          );
+        })}
+      </motion.ul>
     </div>
   );
 };

src/styles/_nav.scss

@@ -58,6 +58,7 @@
 }
 
 .language {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 0.8rem;
@@ -66,6 +67,28 @@
   color: $black;
 }
 
+.language-dropdown {
+  position: absolute;
+  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;
+      font-size: 1.6rem;
+      background: $white;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+}
+
 .subnav-inner {
   padding: 1.6rem 0;
   width: 100%;