draft dropdown

Author: i30101

frontend/components/navbar/NavbarActions.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Bell, Plus, Menu, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { UserProfileDropdown } from "./UserProfileDropdown";
 
 interface Props {
   createNewText: string;
@@ -20,16 +21,44 @@ export const NavbarActions = ({
   onToggleMobileMenu,
 }: Props) => {
   const [hasUnreadNotifications, setHasUnreadNotifications] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const handleNotificationClick = () => {
     // TODO
     setHasUnreadNotifications(false);
   };
 
   const handleAvatarClick = () => {
-    // TODO
+    setIsDropdownOpen(!isDropdownOpen);
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isDropdownOpen]);
+
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [isDropdownOpen]);
+
   return (
     <div className="flex items-center gap-2 sm:gap-3">
       {/* desktop only new listing button */}
@@ -78,21 +107,26 @@ export const NavbarActions = ({
       </Button>
 
       {/* user avatar */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="overflow-hidden rounded-full p-0 transition-opacity hover:opacity-80"
-        onClick={handleAvatarClick}
-        aria-label="User menu"
-      >
-        <Image
-          src="/images/default-avatar.png"
-          alt="User avatar"
-          width={40}
-          height={40}
-          className="rounded-full object-cover"
-        />
-      </Button>
+      <div className="relative" ref={containerRef}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="overflow-hidden rounded-full p-0 transition-opacity hover:opacity-80"
+          onClick={handleAvatarClick}
+          aria-label="User menu"
+          aria-expanded={isDropdownOpen}
+        >
+          <Image
+            src="/images/default-avatar.png"
+            alt="User avatar"
+            width={40}
+            height={40}
+            className="rounded-full object-cover"
+          />
+        </Button>
+
+        <UserProfileDropdown isOpen={isDropdownOpen} onClose={() => setIsDropdownOpen(false)} />
+      </div>
 
       {/* mobile only menu toggle */}
       {mobileShowHamburger && (

frontend/components/navbar/UserProfileDropdown.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import Link from "next/link";
+import { UserCircle, ClipboardList, Bookmark } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface UserProfileDropdownProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+// TODO update hrefs once user pages are created
+export function UserProfileDropdown({ isOpen, onClose }: UserProfileDropdownProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute top-full right-0 z-50 mt-1 min-w-[200px]",
+        "bg-popover rounded-md border shadow-md",
+        "animate-in fade-in-0 zoom-in-95"
+      )}
+      role="menu"
+    >
+      <Link
+        href="/"
+        onClick={onClose}
+        className={cn(
+          "flex items-center gap-3 px-3 py-3 text-sm",
+          "hover:bg-accent hover:text-accent-foreground transition-colors"
+        )}
+        role="menuitem"
+      >
+        <UserCircle className="h-5 w-5" />
+        <span>My Profile</span>
+      </Link>
+
+      <div className="text-foreground mt-1 px-3 py-1 text-xs font-bold">Selling</div>
+      <Link
+        href="/"
+        onClick={onClose}
+        className={cn(
+          "flex items-center gap-3 px-3 py-3 text-sm",
+          "hover:bg-accent hover:text-accent-foreground transition-colors"
+        )}
+        role="menuitem"
+      >
+        <ClipboardList className="h-5 w-5" />
+        <span>My Listings</span>
+      </Link>
+
+      <div className="text-foreground mt-1 px-3 py-1 text-xs font-bold">Buying</div>
+      <Link
+        href="/"
+        onClick={onClose}
+        className={cn(
+          "flex items-center gap-3 px-3 py-3 text-sm",
+          "hover:bg-accent hover:text-accent-foreground transition-colors"
+        )}
+        role="menuitem"
+      >
+        <Bookmark className="h-5 w-5" />
+        <span>Saved Listings</span>
+      </Link>
+
+      <Link
+        href="/"
+        onClick={onClose}
+        className={cn(
+          "flex items-center gap-3 px-3 py-3 text-sm",
+          "hover:bg-accent hover:text-accent-foreground transition-colors"
+        )}
+        role="menuitem"
+      >
+        <ClipboardList className="h-5 w-5" />
+        <span>My Purchases</span>
+      </Link>
+    </div>
+  );
+}