feat(header): use nextui dropdown (#789)

raspiblitz · Nov 10, 2024 · 03d8509 · 03d8509
1 parent e52ce18
commit 03d8509
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 68 deletions.
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
@@ -200,6 +200,7 @@
       "back": "Back",
       "dark_mode": "Dark Mode",
       "display_sats": "Display SATS",
+      "display_btc": "Display BTC",
       "home": "Home",
       "logout": "Log out",
       "settings": "Settings"

diff --git a/src/layouts/DropdownMenu.tsx b/src/layouts/DropdownMenu.tsx
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
@@ -1,36 +1,37 @@
-import DropdownMenu from "./DropdownMenu";
 import RaspiBlitzMobileLogo from "@/assets/RaspiBlitz_Logo_Icon.svg?react";
 import RaspiBlitzLogoDark from "@/assets/RaspiBlitz_Logo_Main_Negative.svg?react";
+import { AppContext, Unit } from "@/context/app-context";
 import { SSEContext } from "@/context/sse-context";
+import {
+  SatoshiV1Icon,
+  BitcoinCircleIcon,
+} from "@bitcoin-design/bitcoin-icons-react/filled";
 import { Bars3Icon } from "@heroicons/react/24/outline";
-import { useContext, useEffect, useRef, useState } from "react";
+import { ArrowRightStartOnRectangleIcon } from "@heroicons/react/24/outline";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@nextui-org/react";
+import { type Key, useContext } from "react";
+import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router-dom";
 
 export default function Header() {
+  const { t } = useTranslation();
   const { systemInfo } = useContext(SSEContext);
-  const dropdown = useRef<HTMLDivElement>(null);
-  const menu = useRef<SVGSVGElement>(null);
-  const [showDropdown, setShowDropdown] = useState(false);
-
-  useEffect(() => {
-    document.addEventListener("mousedown", clickOutsideHandler);
-    return () => {
-      document.removeEventListener("mousedown", clickOutsideHandler);
-    };
-  }, [dropdown]);
-
-  const showDropdownHandler = () => {
-    setShowDropdown((prev) => !prev);
-  };
+  const { unit, logout, toggleUnit } = useContext(AppContext);
+
+  const unitActive = unit === Unit.SAT;
+
+  const handleDropDownAction = (key: Key) => {
+    if (key === "logout") {
+      logout();
+    }
 
-  const clickOutsideHandler = (event: MouseEvent) => {
-    if (
-      menu.current &&
-      dropdown.current &&
-      !dropdown.current.contains(event.target as Node) &&
-      !menu.current.contains(event.target as Node)
-    ) {
-      setShowDropdown(false);
+    if (key === "toggle_sats") {
+      toggleUnit();
     }
   };
 
@@ -40,14 +41,45 @@ export default function Header() {
         <RaspiBlitzMobileLogo className="h-8 w-8 text-white md:hidden" />
         <RaspiBlitzLogoDark className="hidden h-8 md:block" />
       </NavLink>
+
       <div className="text-xl font-bold">{systemInfo.alias}</div>
+
       <div className="flex items-center">
-        <Bars3Icon
-          ref={menu}
-          onClick={showDropdownHandler}
-          className="h-8 w-8 cursor-pointer hover:text-yellow-400"
-        />
-        {showDropdown && <DropdownMenu ref={dropdown} />}
+        <Dropdown placement="bottom-end">
+          <DropdownTrigger>
+            <Bars3Icon className="h-8 w-8 cursor-pointer hover:text-yellow-400" />
+          </DropdownTrigger>
+
+          <DropdownMenu
+            aria-label="Header Actions"
+            variant="flat"
+            onAction={(key) => handleDropDownAction(key)}
+          >
+            <DropdownItem
+              key="toggle_sats"
+              startContent={
+                unitActive ? (
+                  <BitcoinCircleIcon className="inline h-4 w-4" />
+                ) : (
+                  <SatoshiV1Icon className="inline h-4 w-4" />
+                )
+              }
+            >
+              {unitActive
+                ? t("navigation.display_btc")
+                : t("navigation.display_sats")}
+            </DropdownItem>
+            <DropdownItem
+              key="logout"
+              color="danger"
+              startContent={
+                <ArrowRightStartOnRectangleIcon className="inline h-4 w-4" />
+              }
+            >
+              {t("navigation.logout")}
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
       </div>
     </header>
   );