feat: add settings modal

public/locales/en/common.json

@@ -31,5 +31,9 @@
   "generic-error-description": "An error has occurred, if this happens again please <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">create an issue</a> with as much detail as possible.",
   "retry": "Retry",
   "privacy": "Privacy",
-  "terms": "Terms of use"
+  "terms": "Terms of use",
+  "language": {
+    "fr": "French",
+    "en": "English"
+  }
 }

public/locales/fr/common.json

@@ -31,5 +31,9 @@
   "generic-error-description": "Une erreur est survenue, si cela se reproduit merci de <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">créer une issue</a> avec le maximum de détails.",
   "retry": "Recommencer",
   "privacy": "Confidentialité",
-  "terms": "CGU"
+  "terms": "CGU",
+  "language": {
+    "fr": "Français",
+    "en": "Anglais"
+  }
 }

src/components/LangSelector.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 
 export default function LangSelector() {
   const router = useRouter();
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const onToggleLanguageClick = (newLocale: string) => {
     const { pathname, asPath, query } = router;
@@ -23,7 +23,7 @@ export default function LangSelector() {
     >
       {languages.map((lang) => (
         <option key={lang} value={lang}>
-          {lang}
+          {t(`common:language.${lang as "fr" | "en"}`)}
         </option>
       ))}
     </select>

src/components/Links/links.module.scss

@@ -16,7 +16,6 @@
     width: 100%;
     text-align: center;
     text-overflow: ellipsis;
-    text-align: center;
     white-space: nowrap;
     overflow: hidden;
   }

src/components/Settings/SettingsModal.tsx

@@ -0,0 +1,32 @@
+import { AnimatePresence } from "framer-motion";
+import useModal from "hooks/useModal";
+import Modal from "../Modal/Modal";
+import * as Keys from "constants/keys";
+import { useHotkeys } from "react-hotkeys-hook";
+import { IoSettingsOutline } from "react-icons/io5";
+import LangSelector from "../LangSelector";
+
+export default function SettingsModal() {
+  const modal = useModal();
+  useHotkeys(Keys.CLOSE_SEARCH_KEY, modal.close, {
+    enabled: modal.isShowing,
+    enableOnFormTags: ["INPUT"],
+  });
+
+  return (
+    <>
+      <button onClick={modal.open} className="reset" title="Settings">
+        <IoSettingsOutline size={24} />
+      </button>
+      <AnimatePresence>
+        {modal.isShowing && (
+          <Modal title="Settings" close={modal.close}>
+            <LangSelector />
+            <p>about tab with all links related to MyLinks</p>
+            <button>disconnect</button>
+          </Modal>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

src/components/SideMenu/UserCard/UserCard.tsx

@@ -1,10 +1,9 @@
-import PATHS from "constants/paths";
+import { useSession } from "next-auth/react";
-import { signOut, useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import Image from "next/image";
-import { FiLogOut } from "react-icons/fi";
 import { TFunctionParam } from "types/i18next";
 import styles from "./user-card.module.scss";
+import SettingsModal from "components/Settings/SettingsModal";
 
 export default function UserCard() {
   const { data } = useSession({ required: true });
@@ -25,13 +24,7 @@ export default function UserCard() {
         />
         {data.user.name}
       </div>
-      <button
+      <SettingsModal />
-        onClick={() => signOut({ callbackUrl: PATHS.LOGIN })}
-        className="reset"
-        title={t("common:logout")}
-      >
-        <FiLogOut size={24} />
-      </button>
     </div>
   );
 }

src/pages/index.tsx

@@ -138,7 +138,11 @@ export default function HomePage(props: HomePageProps) {
   );
 
   return (
-    <PageTransition className="App">
+    <PageTransition
+      className="App"
+      style={{ flexDirection: "row" }}
+      hideLangageSelector
+    >
       {isMobile ? (
         <>
           <span