react-better-html 1.1.185 → 1.1.187

package/dist/index.mjs

@@ -9426,12 +9426,14 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
 });
 var SideMenuComponent = function SideMenu({
   items,
+  bottomItems,
   topSpace = 0,
   logoAssetName,
   logoUrl,
   logoText,
   logoFontFamily,
   collapsable,
+  withCloseButton,
   widthMobileHandle
 }) {
   const theme2 = useTheme();
@@ -9441,6 +9443,8 @@ var SideMenuComponent = function SideMenu({
     setSideMenuIsOpenMobile.setFalse();
   }, []);
   const readyItems = useMemo11(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = useMemo11(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
@@ -9457,15 +9461,13 @@ var SideMenuComponent = function SideMenu({
       backgroundColor: theme2.colors.backgroundContent,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
-      paddingInline: theme2.styles.space,
       paddingTop: logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space,
-      paddingBottom: theme2.styles.space,
       transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
       userSelect: "none",
-      zIndex: 11,
+      zIndex: 10,
       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", paddingInline: theme2.styles.space, children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ jsx26(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs22(
               Div_default.row,
               {
@@ -9500,30 +9502,60 @@ 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(
-            Div_default.row,
+          /* @__PURE__ */ jsx26(
+            Div_default.column,
             {
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: theme2.colors.backgroundContent,
-              borderRadius: theme2.styles.borderRadius,
+              width: "100%",
+              height: "100%",
+              overflowY: "auto",
+              paddingInline: theme2.styles.space,
+              paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
+              children: /* @__PURE__ */ jsx26(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) })
+            }
+          ),
+          readyBottomItems && /* @__PURE__ */ jsx26(
+            Div_default.column,
+            {
+              borderTop: `solid 1px ${theme2.colors.border}`,
+              gap: theme2.styles.gap / 2,
               marginTop: "auto",
-              cursor: "pointer",
-              filterHover: filterHover().z1,
-              paddingBlock: theme2.styles.gap,
-              isTabAccessed: true,
-              onClick: setSideMenuIsCollapsed.toggle,
+              paddingTop: theme2.styles.space,
+              paddingInline: theme2.styles.space,
+              paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
+              children: readyBottomItems.map((item) => /* @__PURE__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text))
+            }
+          ),
+          isCollapsable && /* @__PURE__ */ jsx26(
+            Div_default,
+            {
+              borderTop: `solid 1px ${theme2.colors.border}`,
+              marginTop: !readyBottomItems ? "auto" : void 0,
+              paddingInline: theme2.styles.space,
+              paddingBlock: theme2.styles.space,
               children: /* @__PURE__ */ jsx26(
-                Icon_default,
+                Div_default.row,
                 {
-                  name: "chevronRight",
-                  size: 20,
-                  color: theme2.colors.textSecondary,
-                  transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
-                  transition: theme2.styles.transition
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: theme2.colors.backgroundContent,
+                  borderRadius: theme2.styles.borderRadius,
+                  cursor: "pointer",
+                  filterHover: filterHover().z1,
+                  isTabAccessed: true,
+                  paddingBlock: theme2.styles.gap,
+                  onClick: setSideMenuIsCollapsed.toggle,
+                  children: /* @__PURE__ */ jsx26(
+                    Icon_default,
+                    {
+                      name: "chevronRight",
+                      size: 20,
+                      color: theme2.colors.textSecondary,
+                      transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+                      transition: theme2.styles.transition
+                    }
+                  )
                 }
               )
             }