From 312ac7ab8540c752fc5341cdd64f537a71f64c86 Mon Sep 17 00:00:00 2001 From: Eric Lay Date: Wed, 11 Mar 2026 08:41:17 -0500 Subject: [PATCH] Add src/components/dashboard/TopBar.jsx --- src/components/dashboard/TopBar.jsx | 140 ++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 src/components/dashboard/TopBar.jsx diff --git a/src/components/dashboard/TopBar.jsx b/src/components/dashboard/TopBar.jsx new file mode 100644 index 0000000..e7c047c --- /dev/null +++ b/src/components/dashboard/TopBar.jsx @@ -0,0 +1,140 @@ +import React, { useState, useRef, useEffect } from "react"; +import { Search, Bell, ChevronDown, User, Mail, LogOut } from "lucide-react"; + +export default function TopBar({ breadcrumb, userData }) { + const [userMenuOpen, setUserMenuOpen] = useState(false); + const [notifOpen, setNotifOpen] = useState(false); + const userRef = useRef(null); + const notifRef = useRef(null); + + useEffect(() => { + const handleClick = (e) => { + if (userRef.current && !userRef.current.contains(e.target)) setUserMenuOpen(false); + if (notifRef.current && !notifRef.current.contains(e.target)) setNotifOpen(false); + }; + document.addEventListener("mousedown", handleClick); + return () => document.removeEventListener("mousedown", handleClick); + }, []); + + return ( +
+ {/* Left - Breadcrumb */} +
+ Homepage + / + {breadcrumb} +
+ + {/* Center - Search */} +
+
+ + +
+
+ + {/* Right - Notifications + User */} +
+ {/* Notifications */} +
+ + {notifOpen && ( +
+
+
+

Alerts

+ 6 unread +
+
+ + +
+
+
+
+
+
+ Bulletin + +
+ +
+

Now Available: PBC Marketing Toolbox

+

The Marketing Toolbox is the dedicated spot to find all kinds of materials, logos and resources.

+

Action Required

+
+
+
+
+ Bulletin + +
+ +
+

Now Available: Contact Us

+
+
+
+ )} +
+ + {/* User Menu */} +
+ + {userMenuOpen && ( +
+
+

{userData?.full_name || "Demo User"}

+

{userData?.email || "demo@example.com"}

+
+

Store ID: {userData?.store_id || "AA1112"}

+

Store Name: {userData?.store_name || "Demo Store"}

+
+
+
+ + +
+
+ +
+
+ )} +
+
+
+ ); +} \ No newline at end of file