react-better-html 1.1.182 → 1.1.184

package/dist/index.mjs

@@ -9418,6 +9418,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
 });
 var SideMenuComponent = function SideMenu({
   items,
+  topSpace = 0,
   logoAssetName,
   logoUrl,
   logoText,
@@ -9442,7 +9443,9 @@ var SideMenuComponent = function SideMenu({
     {
       position: "fixed",
       width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
-      height: "100svh",
+      height: `calc(100svh - ${topSpace}px)`,
+      top: topSpace,
+      left: 0,
       backgroundColor: theme2.colors.backgroundBase,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
@@ -9554,19 +9557,23 @@ var SideMenuComponent = function SideMenu({
     }
   );
 };
-SideMenuComponent.pageHolder = function SideMenuPageHolder({ ...props }) {
+SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, ...props }) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs22(
     Div_default,
     {
+      position: "relative",
       width: "100%",
       paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
       transition: theme2.styles.transition,
-      children: /* @__PURE__ */ jsx26(PageHolder_default, { ...props })
+      children: [
+        outsideComponent,
+        /* @__PURE__ */ jsx26(PageHolder_default, { ...props })
+      ]
     }
   );
 };