From cb5eb252126fbbaa83a20d897c996c01713e41d6 Mon Sep 17 00:00:00 2001
From: Anton Pawlik <anton.pawlik@hivemq.com>
Date: Fri, 19 Jul 2024 11:46:56 +0200
Subject: [PATCH] make header menu button close icon dynamic

---
 src/modules/Header/HeaderMenuButton.tsx | 70 +++++++++++++------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/modules/Header/HeaderMenuButton.tsx b/src/modules/Header/HeaderMenuButton.tsx
index 5d7ecf2..18e89e5 100644
--- a/src/modules/Header/HeaderMenuButton.tsx
+++ b/src/modules/Header/HeaderMenuButton.tsx
@@ -1,45 +1,49 @@
 import { Icon, MenuButton, forwardRef, useMenuContext } from "@chakra-ui/react";
-import { XIcon, type LucideIcon } from "lucide-react";
+import { type LucideIcon, XIcon } from "lucide-react";
 
 export type HeaderMenuButtonProps = {
   icon: LucideIcon;
+  closeIcon?: LucideIcon;
 };
 
 const OPEN_MARGIN_IN_PIXEL = 4;
 const BORDER_WIDTH_IN_PIXEL = 2;
 const MAX_CONTAINER_SIZE_IN_PIXEL = 56;
 
-export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>(({ icon, as, ...props }, ref) => {
-  const { isOpen } = useMenuContext();
+export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, "button">(
+  (props, ref) => {
+    const { as, icon, closeIcon = XIcon } = props;
+    const { isOpen } = useMenuContext();
 
-  const containerSize = isOpen
-    ? MAX_CONTAINER_SIZE_IN_PIXEL -
-    OPEN_MARGIN_IN_PIXEL * 2 -
-    BORDER_WIDTH_IN_PIXEL
-    : MAX_CONTAINER_SIZE_IN_PIXEL - BORDER_WIDTH_IN_PIXEL;
+    const containerSize = isOpen
+      ? MAX_CONTAINER_SIZE_IN_PIXEL -
+        OPEN_MARGIN_IN_PIXEL * 2 -
+        BORDER_WIDTH_IN_PIXEL
+      : MAX_CONTAINER_SIZE_IN_PIXEL - BORDER_WIDTH_IN_PIXEL;
 
-  return (
-    <MenuButton
-      _hover={{
-        backgroundColor: "surface.800",
-      }}
-      _focusVisible={{
-        backgroundColor: "surface.800",
-      }}
-      lineHeight={1}
-      sx={{
-        width: containerSize,
-        height: containerSize,
-        border: `${BORDER_WIDTH_IN_PIXEL}px solid`,
-        borderColor: isOpen ? "surface.400" : "transparent",
-        margin: isOpen ? `${OPEN_MARGIN_IN_PIXEL}px` : "0px",
-        borderRadius: "2px",
-      }}
-      as={as}
-      ref={ref}
-      {...props}
-    >
-      <Icon w={6} height={6} as={isOpen ? XIcon : icon} color="white" />
-    </MenuButton>
-  );
-})
+    return (
+      <MenuButton
+        _hover={{
+          backgroundColor: "surface.800",
+        }}
+        _focusVisible={{
+          backgroundColor: "surface.800",
+        }}
+        lineHeight={1}
+        sx={{
+          width: containerSize,
+          height: containerSize,
+          border: `${BORDER_WIDTH_IN_PIXEL}px solid`,
+          borderColor: isOpen ? "surface.400" : "transparent",
+          margin: isOpen ? `${OPEN_MARGIN_IN_PIXEL}px` : "0px",
+          borderRadius: "2px",
+        }}
+        as={as}
+        ref={ref}
+        {...props}
+      >
+        <Icon w={6} height={6} as={isOpen ? closeIcon : icon} color="white" />
+      </MenuButton>
+    );
+  },
+);