I18n Better Experience

components/common/I18nWidget/I18nWidget.module.css

@@ -6,6 +6,10 @@
   @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
 }
 
+.button:hover {
+  @apply border-accents-4 shadow-sm;
+}
+
 .button:focus {
   @apply outline-none;
 }
@@ -18,6 +22,12 @@
   }
 }
 
+.closeButton {
+  @screen md {
+    @apply hidden;
+  }
+}
+
 .item {
   @apply flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
   text-transform: capitalize;
@@ -26,3 +36,7 @@
 .item:hover {
   @apply bg-accents-1;
 }
+
+.icon {
+  transform: rotate(180deg);
+}

components/common/I18nWidget/I18nWidget.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
-import { Cross } from '@components/icons'
+import { Cross, ChevronUp } from '@components/icons'
 interface LOCALE_DATA {
   name: string
   img: {
@@ -43,29 +43,21 @@ const I18nWidget: FC = () => {
   return (
     <nav className={s.root}>
       <div className="flex items-center relative">
-        <button className={s.button} aria-label="Language selector" />
-        <img
-          className="block mr-2 w-5"
-          src={`/${LOCALES_MAP[currentLocale].img.filename}`}
-          alt={LOCALES_MAP[currentLocale].img.alt}
-        />
-        {options && (
-          <span className="cursor-pointer" onClick={() => setDisplay(!display)}>
-            <svg
-              viewBox="0 0 24 24"
-              width="24"
-              height="24"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-              shapeRendering="geometricPrecision"
+        <button className={s.button} aria-label="Language selector">
+          <img
+            className="block mr-2 w-5"
+            src={`/${LOCALES_MAP[currentLocale].img.filename}`}
+            alt={LOCALES_MAP[currentLocale].img.alt}
+          />
+          {options && (
+            <span
+              className="cursor-pointer"
+              onClick={() => setDisplay(!display)}
             >
-              <path d="M6 9l6 6 6-6" />
-            </svg>
-          </span>
-        )}
+              <ChevronUp className={cn({ [s.icon]: display })} />
+            </span>
+          )}
+        </button>
       </div>
       <div className="absolute top-0 right-0">
         {options?.length && display ? (

components/icons/ChevronUp.tsx

@@ -0,0 +1,20 @@
+const ChevronUp = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M18 15l-6-6-6 6" />
+    </svg>
+  )
+}
+
+export default ChevronUp

components/icons/index.ts

@@ -12,3 +12,4 @@ export { default as Github } from './Github'
 export { default as DoubleChevron } from './DoubleChevron'
 export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
+export { default as ChevronUp } from './ChevronUp'