diff --git a/builder-frontend/src/components/homeScreen/HomeScreen.tsx b/builder-frontend/src/components/homeScreen/HomeScreen.tsx index 039fd79d..66ff7e71 100644 --- a/builder-frontend/src/components/homeScreen/HomeScreen.tsx +++ b/builder-frontend/src/components/homeScreen/HomeScreen.tsx @@ -20,14 +20,18 @@ const HomeScreen = () => { label: "Screeners", onClick: () => setScreenMode("screeners"), }, - { - key: "checks", - label: "Eligibility checks", - onClick: () => setScreenMode("checks"), - }, ], activeTabKey: () => screenMode(), titleDef: null, + menuDef: { + items: [ + { + key: "checks", + label: "Eligibility Checks", + onClick: () => setScreenMode("checks"), + }, + ], + }, }; }; diff --git a/builder-frontend/src/components/shared/BdtNavbar.tsx b/builder-frontend/src/components/shared/BdtNavbar.tsx index 14e72d27..0ef1d2cd 100644 --- a/builder-frontend/src/components/shared/BdtNavbar.tsx +++ b/builder-frontend/src/components/shared/BdtNavbar.tsx @@ -1,9 +1,11 @@ -import { Accessor, Show } from "solid-js"; +import { Accessor, createSignal, For, onCleanup, Show } from "solid-js"; +import MenuIcon from "@/components/icon/MenuIcon"; export interface NavbarProps { tabDefs: NavbarButtonDef[]; activeTabKey: Accessor; titleDef: NavbarTitleDef | null; + menuDef?: NavbarMenuDef; } interface NavbarTitleDef { label: string; @@ -12,9 +14,29 @@ interface NavbarButtonDef { key: string; label: string; onClick: () => void; -}; +} +interface NavbarMenuDef { + items: NavbarMenuItem[]; +} +interface NavbarMenuItem { + key: string; + label: string; + onClick: () => void; +} + +const BdtNavbar = ({ navProps }: { navProps: Accessor }) => { + const [menuOpen, setMenuOpen] = createSignal(false); + + const handleOutsideClick = (e: MouseEvent) => { + const target = e.target as HTMLElement; + if (!target.closest("[data-navbar-menu]")) { + setMenuOpen(false); + } + }; + + document.addEventListener("click", handleOutsideClick); + onCleanup(() => document.removeEventListener("click", handleOutsideClick)); -const BdtNavbar = ({navProps}: {navProps: Accessor}) => { return (
@@ -22,20 +44,53 @@ const BdtNavbar = ({navProps}: {navProps: Accessor}) => { {navProps().titleDef!.label}
- {navProps().tabDefs.map((tab) => ( - - ))} + + {(tab) => ( + + )} + + +
+ + +
+ + {(item) => ( + + )} + +
+
+
+
); -} +}; export default BdtNavbar;