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 (
-
setDropdown(!dropdown)}>
+
setDropdown(!dropdown)}
+ initial={"wrapperRest"}
+ animate={dropdown ? "wrapperActive" : "wrapperRest"}
+ variants={languageMotion}
+ >
{activeLanguage}
-
+
+
+
{
);
})}
-
+
);
};
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%;