react-better-html 1.1.283 → 1.1.284

package/dist/index.mjs

@@ -8346,9 +8346,10 @@ var SideMenuComponent = function SideMenu({
       setActiveItem,
       items: itemsState,
       bottomItems: bottomItemsState,
-      position
+      position,
+      withSideBar: sideBar !== void 0
     }),
-    [activeItem, itemsState, bottomItemsState, position]
+    [activeItem, itemsState, bottomItemsState, position, sideBar]
   );
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
@@ -8395,8 +8396,8 @@ var SideMenuComponent = function SideMenu({
       gap: theme2.styles.gap / 2,
       marginTop: "auto",
       paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
-      paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
-      paddingBottom: !renderItemsHolder ? !isCollapsable ? theme2.styles.space : void 0 : void 0,
+      paddingInline: !renderBottomItemsHolder ? theme2.styles.space : void 0,
+      paddingBottom: !renderBottomItemsHolder ? !isCollapsable ? mediaQuery.size1000 && bottomItemsAdditionalComponent ? 0 : theme2.styles.space : void 0 : void 0,
       children: readyBottomItems?.map((item) => /* @__PURE__ */ jsx28(
         MenuItemComponent,
         {
@@ -8443,7 +8444,7 @@ var SideMenuComponent = function SideMenu({
           /* @__PURE__ */ jsxs24(
             Div_default.column,
             {
-              width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
+              width: mediaQuery.size1000 ? `calc(100% - ${sideBar ? sideBarWidth : 0}px)` : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
               height: "100%",
               borderRight: position === "left" ? readyBorder : void 0,
               borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
@@ -8582,10 +8583,11 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
   const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
-  const { position } = useSideMenuContext();
+  const { position, withSideBar } = useSideMenuContext();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
-  const sideSpace = !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0;
+  const sideBarWidth = components.sideMenu?.width ?? defaultSideBarWidth;
+  const sideSpace = !mediaQuery.size1000 ? (!sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth) + (withSideBar ? sideBarWidth : 0) : void 0;
   return /* @__PURE__ */ jsxs24(
     Div_default,
     {