react-better-html 1.1.183 → 1.1.185

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)"
                   }
                 )
@@ -9418,6 +9426,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
 });
 var SideMenuComponent = function SideMenu({
   items,
+  topSpace = 0,
   logoAssetName,
   logoUrl,
   logoText,
@@ -9442,8 +9451,10 @@ var SideMenuComponent = function SideMenu({
     {
       position: "fixed",
       width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
-      height: "100svh",
-      backgroundColor: theme2.colors.backgroundBase,
+      height: `calc(100svh - ${topSpace}px)`,
+      top: topSpace,
+      left: 0,
+      backgroundColor: theme2.colors.backgroundContent,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingInline: theme2.styles.space,
@@ -9497,7 +9508,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",
@@ -9524,7 +9535,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,
@@ -9574,8 +9585,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