easy

0-don · Dec 20, 2023 · 55e4105 · 55e4105
1 parent ffa4469
commit 55e4105
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 56 deletions.
diff --git a/web/public/locales/de.json b/web/public/locales/de.json
@@ -30,14 +30,15 @@
     "REGISTER_BUTTON": "Registrieren",
     "HEADER": "Intelligente Technologie für Ihre Küche",
     "SUBHEADER": "Verwandeln Sie Ihre kulinarische Reise mit {brand}, wo Technologie auf Ernährung trifft."
-  }, 
-  "Dashboard": {
-
-  },
-  "User": {
-
   },
+  "Dashboard": {},
+  "User": {},
   "Navbar": {
-
+    "LOGIN": "Anmeldung",
+    "REGISTER": "Registrieren",
+    "LOGOUT": "Ausloggen",
+    "HOME": "Home",
+    "DASHBOARD": "Dashboard",
+    "PROFILE": "Profil"
   }
 }
diff --git a/web/public/locales/en.json b/web/public/locales/en.json
@@ -32,5 +32,12 @@
   },
   "Dashboard": {},
   "User": {},
-  "Navbar": {}
+  "Navbar": {
+    "LOGIN": "Login",
+    "REGISTER": "Register",
+    "LOGOUT": "Logout",
+    "HOME": "Home",
+    "DASHBOARD": "Dashboard",
+    "PROFILE": "Profile"
+  }
 }
diff --git a/web/src/components/container/navbar/Profile.tsx b/web/src/components/container/navbar/Profile.tsx
@@ -10,15 +10,54 @@ import {
 } from "@nextui-org/dropdown";
 import { User } from "@nextui-org/user";
 import { BiLogIn } from "@react-icons/all-files/bi/BiLogIn";
-import { BiLogOutCircle } from "@react-icons/all-files/bi/BiLogOutCircle";
 import { FaUser } from "@react-icons/all-files/fa/FaUser";
 import { SiWebauthn } from "@react-icons/all-files/si/SiWebauthn";
 import { useTranslations } from "next-intl";
 
 export const Profile = () => {
-  const t = useTranslations("Navbar");
+  const t = useTranslations<"Navbar">();
   const { me } = useMeHook();
-  console.log(me);
+
+  const Items = [
+    <DropdownItem key="profile" isReadOnly className="h-14 gap-2 opacity-100">
+      <User
+        name={me?.username}
+        description={me?.email}
+        classNames={{
+          name: "text-default-600",
+          description: "text-default-500",
+        }}
+      />
+    </DropdownItem>,
+    me && (
+      <DropdownItem
+        key="logout"
+        href="/logout"
+        endContent={<BiLogIn className="text-large" />}
+      >
+        {t("LOGOUT")}
+      </DropdownItem>
+    ),
+    !me && (
+      <DropdownItem
+        key="login"
+        href="/login"
+        endContent={<BiLogIn className="text-large" />}
+      >
+        {t("LOGIN")}
+      </DropdownItem>
+    ),
+    !me && (
+      <DropdownItem
+        key="register"
+        href="/register"
+        endContent={<SiWebauthn className="text-large" />}
+      >
+        {t("REGISTER")}
+      </DropdownItem>
+    ),
+  ].filter(Boolean) as JSX.Element[];
+
   return (
     <>
       <Dropdown
@@ -53,51 +92,7 @@ export const Profile = () => {
           }}
         >
           <DropdownSection aria-label="Profile & Actions">
-            <DropdownItem
-              isReadOnly
-              key="profile"
-              className="h-14 gap-2 opacity-100"
-            >
-              <User
-                name="Junior Garcia"
-                description="@jrgarciadev"
-                classNames={{
-                  name: "text-default-600",
-                  description: "text-default-500",
-                }}
-                avatarProps={{
-                  size: "sm",
-                  src: "https://avatars.githubusercontent.com/u/30373425?v=4",
-                }}
-              />
-            </DropdownItem>
-            <>
-              {me && (
-                <>
-                  <DropdownItem
-                    key="login"
-                    href="/login"
-                    endContent={<BiLogIn className="text-large" />}
-                  >
-                    Login
-                  </DropdownItem>
-                  <DropdownItem
-                    key="register"
-                    href="/register"
-                    endContent={<SiWebauthn className="text-large" />}
-                  >
-                    Register
-                  </DropdownItem>
-                </>
-              )}
-            </>
-            <DropdownItem
-              key="logout"
-              href="/logout"
-              endContent={<BiLogOutCircle className="text-large" />}
-            >
-              Log Out
-            </DropdownItem>
+            {Items}
           </DropdownSection>
         </DropdownMenu>
       </Dropdown>