react-better-html 1.1.186 → 1.1.187

package/dist/index.d.mts

@@ -942,6 +942,7 @@ type SideMenuItem = {
 };
 type SideMenuProps = {
     items: SideMenuItem[];
+    bottomItems?: SideMenuItem[];
     topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;

package/dist/index.d.ts

@@ -942,6 +942,7 @@ type SideMenuItem = {
 };
 type SideMenuProps = {
     items: SideMenuItem[];
+    bottomItems?: SideMenuItem[];
     topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;

package/dist/index.js

@@ -9512,6 +9512,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
 });
 var SideMenuComponent = function SideMenu({
   items,
+  bottomItems,
   topSpace = 0,
   logoAssetName,
   logoUrl,
@@ -9528,6 +9529,8 @@ var SideMenuComponent = function SideMenu({
     setSideMenuIsOpenMobile.setFalse();
   }, []);
   const readyItems = (0, import_react29.useMemo)(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = (0, import_react29.useMemo)(() => 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;
@@ -9544,15 +9547,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__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               Div_default.row,
               {
@@ -9589,28 +9590,58 @@ var SideMenuComponent = function SideMenu({
             ) }),
             withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) }),
-          collapsable && !mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            Div_default.row,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            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__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) })
+            }
+          ),
+          readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            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__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text))
+            }
+          ),
+          isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            Div_default,
+            {
+              borderTop: `solid 1px ${theme2.colors.border}`,
+              marginTop: !readyBottomItems ? "auto" : void 0,
+              paddingInline: theme2.styles.space,
+              paddingBlock: theme2.styles.space,
               children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                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__ */ (0, import_jsx_runtime27.jsx)(
+                    Icon_default,
+                    {
+                      name: "chevronRight",
+                      size: 20,
+                      color: theme2.colors.textSecondary,
+                      transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+                      transition: theme2.styles.transition
+                    }
+                  )
                 }
               )
             }