From 08fa338abbdff3bb3f7cfc96bc328ecb4a49c584 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Sat, 10 Feb 2024 23:14:02 +0100
Subject: [PATCH] feat: add user avatar menu (#80)

---
 .../src/components/layout/header/user.tsx     |  9 ++-
 .../src/components/user-avatar-menu.tsx       | 61 +++++++++++++++++++
 packages/translation/src/lang/en.ts           |  9 +++
 3 files changed, 76 insertions(+), 3 deletions(-)
 create mode 100644 apps/nextjs/src/components/user-avatar-menu.tsx

diff --git a/apps/nextjs/src/components/layout/header/user.tsx b/apps/nextjs/src/components/layout/header/user.tsx
index 376b31e3d..7bbc7fee1 100644
--- a/apps/nextjs/src/components/layout/header/user.tsx
+++ b/apps/nextjs/src/components/layout/header/user.tsx
@@ -1,11 +1,14 @@
 import { UnstyledButton } from "@homarr/ui";
 
 import { UserAvatar } from "~/components/user-avatar";
+import { UserAvatarMenu } from "~/components/user-avatar-menu";
 
 export const UserButton = () => {
   return (
-    <UnstyledButton>
-      <UserAvatar size="md" />
-    </UnstyledButton>
+    <UserAvatarMenu>
+      <UnstyledButton>
+        <UserAvatar size="md" />
+      </UnstyledButton>
+    </UserAvatarMenu>
   );
 };
diff --git a/apps/nextjs/src/components/user-avatar-menu.tsx b/apps/nextjs/src/components/user-avatar-menu.tsx
new file mode 100644
index 000000000..1745eb847
--- /dev/null
+++ b/apps/nextjs/src/components/user-avatar-menu.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+import { useScopedI18n } from "@homarr/translation/client";
+import {
+  IconDashboard,
+  IconLogout,
+  IconMoon,
+  IconSun,
+  IconTool,
+  Menu,
+  useMantineColorScheme,
+} from "@homarr/ui";
+
+interface UserAvatarMenuProps {
+  children: ReactNode;
+}
+
+export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
+  const t = useScopedI18n("common.userAvatar.menu");
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  const ColorSchemeIcon = colorScheme === "dark" ? IconSun : IconMoon;
+
+  const colorSchemeText =
+    colorScheme === "dark" ? t("switchToLightMode") : t("switchToDarkMode");
+
+  return (
+    <Menu width={200} withArrow withinPortal>
+      <Menu.Dropdown>
+        <Menu.Item
+          onClick={toggleColorScheme}
+          leftSection={<ColorSchemeIcon size="1rem" />}
+        >
+          {colorSchemeText}
+        </Menu.Item>
+        <Menu.Item
+          component={Link}
+          href="/boards"
+          leftSection={<IconDashboard size="1rem" />}
+        >
+          {t("navigateDefaultBoard")}
+        </Menu.Item>
+        <Menu.Item
+          component={Link}
+          href="/manage"
+          leftSection={<IconTool size="1rem" />}
+        >
+          {t("management")}
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Item leftSection={<IconLogout size="1rem" />} color="red">
+          {t("logout")}
+        </Menu.Item>
+      </Menu.Dropdown>
+      <Menu.Target>{children}</Menu.Target>
+    </Menu>
+  );
+};
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 62acddd59..ea712acad 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -155,6 +155,15 @@ export default {
       placeholder: "Search for anything...",
       nothingFound: "Nothing found",
     },
+    userAvatar: {
+      menu: {
+        switchToDarkMode: "Switch to dark mode",
+        switchToLightMode: "Switch to light mode",
+        management: "Management",
+        logout: "Logout",
+        navigateDefaultBoard: "Navigate to default board",
+      },
+    },
     noResults: "No results found",
   },
   section: {