From 9e353ecc01a11ffb1055d587bd0a6f80bec219f6 Mon Sep 17 00:00:00 2001
From: Daniel Villatoro <57822891+DanielVillatoro@users.noreply.github.com>
Date: Sun, 26 Jan 2025 22:32:41 -0600
Subject: [PATCH] =?UTF-8?q?Developed=20User=20Menu=20with=20dynamic=20them?=
 =?UTF-8?q?e=20switching,=20language=20dropdown=20w=E2=80=A6=20(#115)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Developed User Menu with dynamic theme switching, language dropdown with flags, updated icons, and improved UI consistency.

-Integrated dynamic theme switching (Light/Dark mode) using next-themes with a Switch component and dynamic Sun/Moon icons.
-Added language dropdown with flags (en-flag.svg and es-flag.svg) for English and Spanish, displaying the selected language in the menu trigger.
-Replaced History icon with FileDollar for the Transactions option.
-Improved alignment, spacing, and transitions.
-Refactored imports logic for maintainability.

* Changes on DropdownMenuSubContent for languaje.
---
 .../shared/header/action-buttons.tsx          |   4 -
 .../components/shared/header/user-menu.tsx    | 106 ++++++++++++++++--
 2 files changed, 99 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/app/components/shared/header/action-buttons.tsx b/apps/frontend/app/components/shared/header/action-buttons.tsx
index 5a30930..13e27bf 100644
--- a/apps/frontend/app/components/shared/header/action-buttons.tsx
+++ b/apps/frontend/app/components/shared/header/action-buttons.tsx
@@ -3,7 +3,6 @@
 import { Bell, ShoppingCart, Wallet } from "lucide-react";
 
 import { Button } from "@/app/components/ui/button";
-import { ThemeToggle } from "../../ui/theme-toggle";
 import { UserMenu } from "./user-menu";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { ConnectWalletModal } from "./connect-wallet-modal";
@@ -47,9 +46,6 @@ export const ActionButtons = () => {
 				</Tooltip.Root>
 
 
-				<ThemeToggle />
-
-
 				<Tooltip.Root>
 					<Tooltip.Trigger asChild>
 						<Button variant="ghost" size="icon">
diff --git a/apps/frontend/app/components/shared/header/user-menu.tsx b/apps/frontend/app/components/shared/header/user-menu.tsx
index 4ecdaf7..22e289a 100644
--- a/apps/frontend/app/components/shared/header/user-menu.tsx
+++ b/apps/frontend/app/components/shared/header/user-menu.tsx
@@ -1,4 +1,8 @@
-import { History, List, Settings, User } from "lucide-react";
+"use client";
+
+import { List, Settings, User, Moon, Sun, Globe, Receipt } from "lucide-react";
+import { useState } from "react";
+import { useTheme } from "next-themes";
 
 import { Button } from "@/app/components/ui/button";
 import {
@@ -6,9 +10,17 @@ import {
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuTrigger,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
 } from "@/app/components/ui/dropdown-menu";
+import { Switch } from "@/app/components/ui/switch";
 
 export const UserMenu = () => {
+	const { theme, setTheme } = useTheme(); // Handles the light/dark mode logic
+	const isDarkMode = theme === "dark"; // Check current theme
+	const [language, setLanguage] = useState("EN");
+
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
@@ -16,23 +28,103 @@ export const UserMenu = () => {
 					<User className="!h-6 !w-6 transition-transform group-hover:scale-110" />
 				</Button>
 			</DropdownMenuTrigger>
-			<DropdownMenuContent className="w-48">
+			<DropdownMenuContent className="w-64">
+				{/* Profile Options */}
 				<DropdownMenuItem>
 					<User className="mr-2 h-4 w-4" />
-					Profile
+					<span>Profile</span>
 				</DropdownMenuItem>
 				<DropdownMenuItem>
 					<List className="mr-2 h-4 w-4" />
-					My Listings
+					<span>My Products</span>
 				</DropdownMenuItem>
 				<DropdownMenuItem>
-					<History className="mr-2 h-4 w-4" />
-					Transaction History
+					<Receipt className="mr-2 h-4 w-4" />
+					<span>Transactions</span>
 				</DropdownMenuItem>
 				<DropdownMenuItem>
 					<Settings className="mr-2 h-4 w-4" />
-					Settings
+					<span>Settings</span>
+				</DropdownMenuItem>
+
+				{/* Divider Line */}
+				<div className="my-2 h-px bg-gray-200" />
+
+				{/* Dark Mode Toggle */}
+				<DropdownMenuItem asChild>
+					<div className="flex items-center justify-between w-full">
+						<div className="flex items-center">
+							{isDarkMode ? (
+								<Moon className="mr-2 h-4 w-4" />
+							) : (
+								<Sun className="mr-2 h-4 w-4" />
+							)}
+							<span>{isDarkMode ? "Dark Mode" : "Light Mode"}</span>
+						</div>
+						<Switch
+							checked={isDarkMode}
+							onCheckedChange={(checked) =>
+								setTheme(checked ? "dark" : "light")
+							}
+							className="ml-2"
+						/>
+					</div>
 				</DropdownMenuItem>
+
+				{/* Language Dropdown */}
+				<DropdownMenuSub>
+					<DropdownMenuSubTrigger>
+						<div className="flex items-center justify-between w-full cursor-pointer">
+							<div className="flex items-center">
+								<Globe className="mr-2 h-4 w-4" />
+								<span>Language</span>
+							</div>
+							<div className="flex items-center">
+								<img
+									src={
+										language === "EN"
+											? "/images/en-flag.svg"
+											: "/images/es-flag.svg"
+									}
+									alt={language}
+									className="mr-1 h-4 w-4"
+								/>
+								<span>{language}</span>
+							</div>
+						</div>
+					</DropdownMenuSubTrigger>
+					{/* <DropdownMenuSubContent className="w-full mt-6 origin-top"> */}
+					{/* <DropdownMenuSubContent className="absolute mt-2 left-100 top-full w-full origin-top"> */}
+
+					<DropdownMenuSubContent
+  						className="w-full mt-6 left-0 top-0 transform translate-x-[240px] translate-y-[5px] min-w-max z-50">
+					{/* <DropdownMenuSubContent className="mt-2 w-full origin-top"> */}
+					
+
+
+
+						<DropdownMenuItem onClick={() => setLanguage("EN")}>
+							<div className="flex items-center">
+								<img
+									src="/images/en-flag.svg"
+									alt="English"
+									className="mr-2 h-4 w-4"
+								/>
+								<span>EN</span>
+							</div>
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => setLanguage("ES")}>
+							<div className="flex items-center">
+								<img
+									src="/images/es-flag.svg"
+									alt="Español"
+									className="mr-2 h-4 w-4"
+								/>
+								<span>ES</span>
+							</div>
+						</DropdownMenuItem>
+					</DropdownMenuSubContent>
+				</DropdownMenuSub>
 			</DropdownMenuContent>
 		</DropdownMenu>
 	);