react-better-html 1.1.183 → 1.1.185

package/dist/index.d.mts

@@ -942,6 +942,7 @@ type MenuItem = {
 };
 type SideMenuProps = {
     items: MenuItem[];
+    topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;
     logoText?: string;
@@ -952,6 +953,7 @@ type SideMenuProps = {
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;
     pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
+    burgerButton: () => React.ReactElement;
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
@@ -959,6 +961,7 @@ type SideMenuPageHolderProps = PageHolderProps & {
 };
 declare const SideMenu: typeof SideMenuComponent & {
     pageHolder: typeof SideMenuComponent.pageHolder;
+    burgerButton: typeof SideMenuComponent.burgerButton;
 };
 
 type AppConfig = {
@@ -1058,8 +1061,10 @@ declare const alertControls: {
 declare const sideMenuControls: {
     expand: () => void;
     collapse: () => void;
+    toggleExpanded: () => void;
     open: () => void;
     close: () => void;
+    toggleOpened: () => void;
 };
 declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;

package/dist/index.d.ts

@@ -942,6 +942,7 @@ type MenuItem = {
 };
 type SideMenuProps = {
     items: MenuItem[];
+    topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;
     logoText?: string;
@@ -952,6 +953,7 @@ type SideMenuProps = {
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;
     pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
+    burgerButton: () => React.ReactElement;
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
@@ -959,6 +961,7 @@ type SideMenuPageHolderProps = PageHolderProps & {
 };
 declare const SideMenu: typeof SideMenuComponent & {
     pageHolder: typeof SideMenuComponent.pageHolder;
+    burgerButton: typeof SideMenuComponent.burgerButton;
 };
 
 type AppConfig = {
@@ -1058,8 +1061,10 @@ declare const alertControls: {
 declare const sideMenuControls: {
     expand: () => void;
     collapse: () => void;
+    toggleExpanded: () => void;
     open: () => void;
     close: () => void;
+    toggleOpened: () => void;
 };
 declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;

package/dist/index.js

@@ -5605,6 +5605,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();
@@ -5612,6 +5616,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 = {
@@ -9401,7 +9409,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       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,
@@ -9488,9 +9496,9 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
                     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)"
                   }
                 )
@@ -9504,6 +9512,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
 });
 var SideMenuComponent = function SideMenu({
   items,
+  topSpace = 0,
   logoAssetName,
   logoUrl,
   logoText,
@@ -9528,8 +9537,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,
@@ -9583,7 +9594,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",
@@ -9610,7 +9621,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,
@@ -9660,8 +9671,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__ */ (0, import_jsx_runtime27.jsxs)(
+    Div_default,
+    {
+      position: "relative",
+      width: 32,
+      height: 20,
+      cursor: "pointer",
+      onMouseOver: setIsHovered.setTrue,
+      onMouseLeave: setIsHovered.setFalse,
+      onMouseOut: setIsHovered.setFalse,
+      onClick: setSideMenuIsOpenMobile.toggle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          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__ */ (0, import_jsx_runtime27.jsx)(
+          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__ */ (0, import_jsx_runtime27.jsx)(
+          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 = (0, import_react29.memo)(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
+SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
 
 // src/utils/localStorage.ts