react-better-html 1.1.184 → 1.1.186

package/dist/index.mjs

@@ -5509,6 +5509,10 @@ var sideMenuControls = {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
     externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
   },
+  toggleExpanded: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
+  },
   open: () => {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
     externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
@@ -5516,6 +5520,10 @@ var sideMenuControls = {
   close: () => {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
     externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
+  },
+  toggleOpened: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
   }
 };
 var colorThemeControls = {
@@ -9315,7 +9323,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
       alignItems: "center",
       gap: iconGap,
       whiteSpace: "nowrap",
-      backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundBase,
+      backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : theme2.colors.backgroundContent,
       borderRadius: theme2.styles.borderRadius,
       paddingBlock,
       paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
@@ -9402,9 +9410,9 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
                     left: 0,
                     border: `${lineWidth}px solid ${theme2.colors.border}`,
                     borderRadius: 999,
-                    borderTopColor: theme2.colors.backgroundBase,
-                    borderLeftColor: theme2.colors.backgroundBase,
-                    borderRightColor: theme2.colors.backgroundBase,
+                    borderTopColor: theme2.colors.backgroundContent,
+                    borderLeftColor: theme2.colors.backgroundContent,
+                    borderRightColor: theme2.colors.backgroundContent,
                     transform: "rotate(45deg)"
                   }
                 )
@@ -9424,6 +9432,7 @@ var SideMenuComponent = function SideMenu({
   logoText,
   logoFontFamily,
   collapsable,
+  withCloseButton,
   widthMobileHandle
 }) {
   const theme2 = useTheme();
@@ -9446,7 +9455,7 @@ var SideMenuComponent = function SideMenu({
       height: `calc(100svh - ${topSpace}px)`,
       top: topSpace,
       left: 0,
-      backgroundColor: theme2.colors.backgroundBase,
+      backgroundColor: theme2.colors.backgroundContent,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingInline: theme2.styles.space,
@@ -9457,7 +9466,7 @@ var SideMenuComponent = function SideMenu({
       zIndex: 11,
       children: [
         /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || mediaQuery.size1000) && /* @__PURE__ */ jsxs22(Div_default.row, { alignItems: "center", children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs22(Div_default.row, { alignItems: "center", children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ jsx26(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs22(
               Div_default.row,
               {
@@ -9492,7 +9501,7 @@ var SideMenuComponent = function SideMenu({
                 ]
               }
             ) }),
-            mediaQuery.size1000 && /* @__PURE__ */ jsx26(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx26(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
           /* @__PURE__ */ jsx26(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) }),
           collapsable && !mediaQuery.size1000 && /* @__PURE__ */ jsx26(
@@ -9500,7 +9509,7 @@ var SideMenuComponent = function SideMenu({
             {
               alignItems: "center",
               justifyContent: "center",
-              backgroundColor: theme2.colors.backgroundBase,
+              backgroundColor: theme2.colors.backgroundContent,
               borderRadius: theme2.styles.borderRadius,
               marginTop: "auto",
               cursor: "pointer",
@@ -9527,7 +9536,7 @@ var SideMenuComponent = function SideMenu({
             position: "absolute",
             top: theme2.styles.space,
             left: "100%",
-            backgroundColor: theme2.colors.backgroundBase,
+            backgroundColor: theme2.colors.backgroundContent,
             border: `solid 1px ${theme2.colors.border}`,
             borderLeft: "none",
             borderTopRightRadius: theme2.styles.borderRadius,
@@ -9577,8 +9586,73 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
     }
   );
 };
+SideMenuComponent.burgerButton = function BurgerButton() {
+  const theme2 = useTheme();
+  const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
+  const [isHovered, setIsHovered] = useBooleanState();
+  const width = 2;
+  return /* @__PURE__ */ jsxs22(
+    Div_default,
+    {
+      position: "relative",
+      width: 32,
+      height: 20,
+      cursor: "pointer",
+      onMouseOver: setIsHovered.setTrue,
+      onMouseLeave: setIsHovered.setFalse,
+      onMouseOut: setIsHovered.setFalse,
+      onClick: setSideMenuIsOpenMobile.toggle,
+      children: [
+        /* @__PURE__ */ jsx26(
+          Div_default,
+          {
+            position: "absolute",
+            width: isHovered || sideMenuIsOpenMobile ? "100%" : "50%",
+            height: width,
+            top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
+            left: 0,
+            backgroundColor: theme2.colors.border,
+            borderRadius: 999,
+            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : void 0,
+            transition: theme2.styles.transition
+          }
+        ),
+        /* @__PURE__ */ jsx26(
+          Div_default,
+          {
+            position: "absolute",
+            width: isHovered ? "100%" : "100%",
+            height: width,
+            top: "50%",
+            left: 0,
+            backgroundColor: theme2.colors.border,
+            borderRadius: 999,
+            transform: "translateY(-50%)",
+            opacity: sideMenuIsOpenMobile ? 0 : void 0,
+            transition: theme2.styles.transition
+          }
+        ),
+        /* @__PURE__ */ jsx26(
+          Div_default,
+          {
+            position: "absolute",
+            width: isHovered || sideMenuIsOpenMobile ? "100%" : "75%",
+            height: width,
+            bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
+            left: 0,
+            backgroundColor: theme2.colors.border,
+            borderRadius: 999,
+            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : void 0,
+            transition: theme2.styles.transition
+          }
+        )
+      ]
+    }
+  );
+};
 var SideMenu2 = memo26(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
+SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
 
 // src/utils/localStorage.ts