fix a bug that could prevent user to selet their payment methods

frontend/src/components/Navbar/index.tsx

@@ -4,9 +4,12 @@ import "./index.css";
 import { Group, Loader } from "@mantine/core";
 import { Config } from "@/config/config";
 import { useAuth } from "@/services/auth/AuthProvider";
+import { useMediaQuery } from "@mantine/hooks";
+import { IconHome, IconLogin, IconLogout, IconSettings } from "@tabler/icons-react";
 
 export function Navbar() {
     const { loggedUser: user, isLoading } = useAuth();
+    const isPhone = useMediaQuery("(max-width: 760px");
 
     if (!user && isLoading) {
         return (
@@ -20,11 +23,11 @@ export function Navbar() {
         <nav>
             <Group>
                 <NavLink className={"navLink"} aria-label={t("home")} to="/">
-                    {t("home", { capfirst: true })}
+                    {isPhone ? <IconHome/> : t("home", { capfirst: true })}
                 </NavLink>
                 {user?.logged ? (
                     <NavLink className={"navLink"} aria-label={t("dashboard")} to="/dashboard/help">
-                        {t("dashboard", { capfirst: true })}
+                        {isPhone ? <IconSettings/> : t("dashboard", { capfirst: true })}
                     </NavLink>
                 ) : null}
             </Group>
@@ -34,7 +37,7 @@ export function Navbar() {
                     className={"navLink"}
                     aria-label={t("login with keycloak", { capfirst: true })}
                 >
-                    {t("login with keycloak", { capfirst: true })}
+                    {isPhone ? <IconLogin/> : t("login with keycloak", { capfirst: true })}
                 </a>
             ) : (
                 <a
@@ -42,7 +45,7 @@ export function Navbar() {
                     className={"navLink"}
                     aria-label={t("logout", { capfirst: true })}
                 >
-                    {t("logout", { capfirst: true })}
+                    {isPhone ? <IconLogout/> : t("logout", { capfirst: true })}
                 </a>
             )}
         </nav>