react-better-html 1.1.181 → 1.1.182

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import { WebTarget } from 'styled-components';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useNavigate, useLocation, useInRouterContext, useSearchParams } from 'react-router-dom';
 
 type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
@@ -930,6 +931,34 @@ declare const Foldable: typeof FoldableComponent & {
     box: typeof FoldableComponent.box;
 };
 
+type MenuItem = {
+    text: string;
+    iconName: IconName | AnyOtherString;
+    href?: string;
+    onClick?: (item: MenuItem) => void;
+    disabled?: boolean;
+    hidden?: boolean;
+    children?: MenuItem[];
+};
+type SideMenuProps = {
+    items: MenuItem[];
+    logoAssetName?: AssetName | AnyOtherString;
+    logoUrl?: string;
+    logoText?: string;
+    logoFontFamily?: string;
+    collapsable?: boolean;
+    widthMobileHandle?: boolean;
+};
+type SideMenuComponentType = {
+    (props: SideMenuProps): React.ReactElement;
+    pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
+};
+declare const SideMenuComponent: SideMenuComponentType;
+type SideMenuPageHolderProps = PageHolderProps & {};
+declare const SideMenu: typeof SideMenuComponent & {
+    pageHolder: typeof SideMenuComponent.pageHolder;
+};
+
 type AppConfig = {
     contentMaxWidth: number;
 };
@@ -951,6 +980,10 @@ type BetterHtmlConfig = {
             style?: ComponentStyleConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
             tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
         };
+        sideMenu?: {
+            /** @default 300 */
+            width?: number;
+        };
     };
 };
 
@@ -1020,6 +1053,12 @@ declare const alertControls: {
     createAlert: (alert: OmitProps<Alert, "id">) => Alert;
     removeAlert: (alertId: string) => void;
 };
+declare const sideMenuControls: {
+    expand: () => void;
+    collapse: () => void;
+    open: () => void;
+    close: () => void;
+};
 declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
 };
@@ -1053,7 +1092,12 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-type ReactRouterDomPluginOptions = {};
+type ReactRouterDomPluginOptions = {
+    useNavigate: typeof useNavigate;
+    useLocation: typeof useLocation;
+    useInRouterContext: typeof useInRouterContext;
+    useSearchParams: typeof useSearchParams;
+};
 declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
 declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;
 
@@ -1071,4 +1115,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, type MenuItem, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { WebTarget } from 'styled-components';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useNavigate, useLocation, useInRouterContext, useSearchParams } from 'react-router-dom';
 
 type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
@@ -930,6 +931,34 @@ declare const Foldable: typeof FoldableComponent & {
     box: typeof FoldableComponent.box;
 };
 
+type MenuItem = {
+    text: string;
+    iconName: IconName | AnyOtherString;
+    href?: string;
+    onClick?: (item: MenuItem) => void;
+    disabled?: boolean;
+    hidden?: boolean;
+    children?: MenuItem[];
+};
+type SideMenuProps = {
+    items: MenuItem[];
+    logoAssetName?: AssetName | AnyOtherString;
+    logoUrl?: string;
+    logoText?: string;
+    logoFontFamily?: string;
+    collapsable?: boolean;
+    widthMobileHandle?: boolean;
+};
+type SideMenuComponentType = {
+    (props: SideMenuProps): React.ReactElement;
+    pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
+};
+declare const SideMenuComponent: SideMenuComponentType;
+type SideMenuPageHolderProps = PageHolderProps & {};
+declare const SideMenu: typeof SideMenuComponent & {
+    pageHolder: typeof SideMenuComponent.pageHolder;
+};
+
 type AppConfig = {
     contentMaxWidth: number;
 };
@@ -951,6 +980,10 @@ type BetterHtmlConfig = {
             style?: ComponentStyleConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
             tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
         };
+        sideMenu?: {
+            /** @default 300 */
+            width?: number;
+        };
     };
 };
 
@@ -1020,6 +1053,12 @@ declare const alertControls: {
     createAlert: (alert: OmitProps<Alert, "id">) => Alert;
     removeAlert: (alertId: string) => void;
 };
+declare const sideMenuControls: {
+    expand: () => void;
+    collapse: () => void;
+    open: () => void;
+    close: () => void;
+};
 declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
 };
@@ -1053,7 +1092,12 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-type ReactRouterDomPluginOptions = {};
+type ReactRouterDomPluginOptions = {
+    useNavigate: typeof useNavigate;
+    useLocation: typeof useLocation;
+    useInRouterContext: typeof useInRouterContext;
+    useSearchParams: typeof useSearchParams;
+};
 declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
 declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;
 
@@ -1071,4 +1115,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, type MenuItem, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -48,6 +48,7 @@ __export(index_exports, {
   Modal: () => Modal_default,
   PageHeader: () => PageHeader_default,
   PageHolder: () => PageHolder_default,
+  SideMenu: () => SideMenu_default,
   Table: () => Table_default,
   Tabs: () => Tabs_default,
   Text: () => Text_default,
@@ -77,6 +78,7 @@ __export(index_exports, {
   localStoragePlugin: () => localStoragePlugin,
   reactRouterDomPlugin: () => reactRouterDomPlugin,
   saturateColor: () => saturateColor,
+  sideMenuControls: () => sideMenuControls,
   useAlertControls: () => useAlertControls,
   useBetterHtmlContext: () => useBetterHtmlContext,
   useBooleanState: () => useBooleanState,
@@ -103,7 +105,7 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 var import_react10 = require("react");
-var import_react_router_dom = require("react-router-dom");
+var import_react_router_dom2 = require("react-router-dom");
 
 // src/constants/css.ts
 var cssProps = {
@@ -1612,6 +1614,7 @@ var appConfig = {
   contentMaxWidth: 1100
 };
 var defaultAlertDuration = 2.3 * 1e3;
+var defaultSideMenuWidth = 300;
 
 // src/components/alerts/AlertsHolder.tsx
 var import_react8 = require("react");
@@ -1641,7 +1644,13 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-var defaultReactRouterDomPluginOptions = {};
+var import_react_router_dom = require("react-router-dom");
+var defaultReactRouterDomPluginOptions = {
+  useNavigate: import_react_router_dom.useNavigate,
+  useLocation: import_react_router_dom.useLocation,
+  useInRouterContext: import_react_router_dom.useInRouterContext,
+  useSearchParams: import_react_router_dom.useSearchParams
+};
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
   initialize: () => {
@@ -2628,6 +2637,8 @@ function BetterHtmlProvider({ config, plugins, children }) {
   );
   const [loaders, setLoaders] = (0, import_react9.useState)(config?.loaders ?? {});
   const [alerts, setAlerts] = (0, import_react9.useState)([]);
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState();
   const [tabGroups, setTabGroups] = (0, import_react9.useState)([]);
   const [tabsWithDots, setTabsWithDots] = (0, import_react9.useState)([]);
   const readyConfig = (0, import_react9.useMemo)(
@@ -2665,6 +2676,10 @@ function BetterHtmlProvider({ config, plugins, children }) {
       setLoaders,
       alerts,
       setAlerts,
+      sideMenuIsCollapsed,
+      setSideMenuIsCollapsed,
+      sideMenuIsOpenMobile,
+      setSideMenuIsOpenMobile,
       components: {
         ...config?.components
       },
@@ -2678,7 +2693,7 @@ function BetterHtmlProvider({ config, plugins, children }) {
         }
       }
     }),
-    [config, colorTheme, loaders, alerts, tabGroups, tabsWithDots]
+    [config, colorTheme, loaders, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, tabGroups, tabsWithDots]
   );
   (0, import_react9.useEffect)(() => {
     if (!plugins) return;
@@ -3185,14 +3200,15 @@ function useUrlQuery() {
       "`useUrlQuery` hook requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const isInRouterContext = (0, import_react_router_dom.useInRouterContext)();
+  const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
+  const isInRouterContext = reactRouterDomPluginConfig.useInRouterContext();
   if (!isInRouterContext) {
     throw new Error(
       "`useUrlQuery` hook must be used inside a React Router context. Make sure your component is wrapped in a `<BrowserRouter>`, or another Router component."
     );
   }
-  const navigate = (0, import_react_router_dom.useNavigate)();
-  const [searchParams] = (0, import_react_router_dom.useSearchParams)();
+  const navigate = reactRouterDomPluginConfig.useNavigate();
+  const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
   const setQuery = (0, import_react10.useCallback)(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3201,7 +3217,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: (0, import_react_router_dom.createSearchParams)({
+          search: (0, import_react_router_dom2.createSearchParams)({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -5580,6 +5596,24 @@ var alertControls = {
     externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
   }
 };
+var sideMenuControls = {
+  expand: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
+  },
+  collapse: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
+  },
+  open: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
+  },
+  close: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
+  }
+};
 var colorThemeControls = {
   toggleTheme: (theme2) => {
     if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
@@ -8588,7 +8622,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
                       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: value.label ?? value.value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: value.label || value.value }),
                         openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                           Text_default,
                           {
@@ -9331,6 +9365,301 @@ var Foldable2 = (0, import_react28.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
+// src/components/SideMenu.tsx
+var import_react29 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ item, onClick }) {
+  const reactRouterDomPlugin2 = usePlugin("react-router-dom");
+  if (!reactRouterDomPlugin2) {
+    throw new Error(
+      "`SideMenu` component requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const location = reactRouterDomPluginConfig.useLocation();
+  const { colorTheme, components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const [isOpened, setIsOpened] = useBooleanState();
+  const onClickElement = (0, import_react29.useCallback)(() => {
+    if (item.disabled) return;
+    onClick?.();
+    item.onClick?.(item);
+  }, [onClick, item]);
+  const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
+  const isActive = item.href ? location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/" : false;
+  const iconSize = 16;
+  const paddingBlock = theme2.styles.gap;
+  const paddingLeft = theme2.styles.gap + 2;
+  const iconGap = theme2.styles.gap;
+  const lineHeight = 20;
+  const lineWidth = 2;
+  const lineEndRadius = iconSize / 2 + iconGap * 2;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: iconGap,
+      whiteSpace: "nowrap",
+      backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundBase,
+      borderRadius: theme2.styles.borderRadius,
+      paddingBlock,
+      paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
+      paddingRight: theme2.styles.space,
+      filterHover: `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})`,
+      overflow: isCollapsed ? "hidden" : void 0,
+      cursor: item.disabled ? "not-allowed" : "pointer",
+      opacity: item.disabled ? 0.6 : void 0,
+      onClick: item.children ? setIsOpened.toggle : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Text_default,
+          {
+            flex: 1,
+            lineHeight: `${lineHeight}px`,
+            color: isActive ? theme2.colors.primary : theme2.colors.textPrimary,
+            opacity: isCollapsed ? 0 : void 0,
+            transition: theme2.styles.transition,
+            children: item.text
+          }
+        ),
+        item.children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Icon_default,
+          {
+            name: "chevronDown",
+            color: theme2.colors.textSecondary,
+            size: 14,
+            transform: isOpened ? "rotate(180deg)" : void 0,
+            transition: theme2.styles.transition
+          }
+        )
+      ]
+    }
+  );
+  (0, import_react29.useEffect)(() => {
+    if (!item.children) return;
+    const toBeOpened = item.children.some(
+      (child) => child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false
+    );
+    setIsOpened.setState(toBeOpened);
+  }, [item]);
+  const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default, { width: "100%", children: [
+    item.href ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+    item.children && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      Div_default.column,
+      {
+        position: "relative",
+        maxHeight: isOpened ? 1e3 : 0,
+        gap: theme2.styles.gap / 2,
+        marginTop: isOpened ? theme2.styles.gap / 2 : void 0,
+        paddingLeft: paddingLeft + iconSize + iconGap,
+        overflow: "hidden",
+        transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
+        children: [
+          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent2, { item: child, onClick }, child.text)),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            Div_default,
+            {
+              position: "absolute",
+              height: `calc(100% - ${paddingBlock + lineHeight / 2 + lineEndRadius / 2}px)`,
+              top: 0,
+              left: paddingLeft + iconSize / 2,
+              zIndex: -1,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  Div_default,
+                  {
+                    position: "relative",
+                    width: lineWidth,
+                    height: "100%",
+                    backgroundColor: theme2.colors.border,
+                    zIndex: 1
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  Div_default,
+                  {
+                    position: "absolute",
+                    width: lineEndRadius,
+                    height: lineEndRadius,
+                    top: `calc(100% - ${lineEndRadius / 2}px)`,
+                    left: 0,
+                    border: `${lineWidth}px solid ${theme2.colors.border}`,
+                    borderRadius: 999,
+                    borderTopColor: theme2.colors.backgroundBase,
+                    borderLeftColor: theme2.colors.backgroundBase,
+                    borderRightColor: theme2.colors.backgroundBase,
+                    transform: "rotate(45deg)"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var SideMenuComponent = function SideMenu({
+  items,
+  logoAssetName,
+  logoUrl,
+  logoText,
+  logoFontFamily,
+  collapsable,
+  widthMobileHandle
+}) {
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
+  const onClickXButton = (0, import_react29.useCallback)(() => {
+    setSideMenuIsOpenMobile.setFalse();
+  }, []);
+  const readyItems = (0, import_react29.useMemo)(() => items.filter((item) => !item.hidden), [items]);
+  const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
+  const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
+  const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
+  const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    Div_default.column,
+    {
+      position: "fixed",
+      width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
+      height: "100svh",
+      backgroundColor: theme2.colors.backgroundBase,
+      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,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+          (logoAssetName || logoUrl || mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
+            (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              Div_default.row,
+              {
+                alignItems: "center",
+                width: sideMenuCollapsedWidth ? logoSize : void 0,
+                height: logoSize,
+                whiteSpace: "nowrap",
+                gap: theme2.styles.gap,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Image_default,
+                    {
+                      name: logoAssetName,
+                      src: logoUrl,
+                      width: logoSize,
+                      height: logoSize,
+                      objectFit: "contain"
+                    }
+                  ),
+                  logoText && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Text_default,
+                    {
+                      fontFamily: logoFontFamily,
+                      fontSize: 22,
+                      fontWeight: 800,
+                      opacity: !isCollapsed ? 1 : 0,
+                      transition: theme2.styles.transition,
+                      userSelect: "none",
+                      children: logoText
+                    }
+                  )
+                ]
+              }
+            ) }),
+            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,
+            {
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: theme2.colors.backgroundBase,
+              borderRadius: theme2.styles.borderRadius,
+              marginTop: "auto",
+              cursor: "pointer",
+              filterHover: filterHover().z1,
+              paddingBlock: theme2.styles.gap,
+              isTabAccessed: true,
+              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
+                }
+              )
+            }
+          )
+        ] }),
+        widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Div_default.row,
+          {
+            position: "absolute",
+            top: theme2.styles.space,
+            left: "100%",
+            backgroundColor: theme2.colors.backgroundBase,
+            border: `solid 1px ${theme2.colors.border}`,
+            borderLeft: "none",
+            borderTopRightRadius: theme2.styles.borderRadius,
+            borderBottomRightRadius: theme2.styles.borderRadius,
+            alignItems: "center",
+            cursor: "pointer",
+            opacity: !mediaQuery.size1000 ? 0 : void 0,
+            pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
+            padding: theme2.styles.gap,
+            paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
+            transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
+            transition: theme2.styles.transition,
+            onClick: setSideMenuIsOpenMobile.toggle,
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              Icon_default,
+              {
+                name: "chevronRight",
+                size: 20,
+                color: theme2.colors.textSecondary,
+                transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
+                transition: theme2.styles.transition
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+SideMenuComponent.pageHolder = function SideMenuPageHolder({ ...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__ */ (0, import_jsx_runtime27.jsx)(
+    Div_default,
+    {
+      width: "100%",
+      paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
+      transition: theme2.styles.transition,
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PageHolder_default, { ...props })
+    }
+  );
+};
+var SideMenu2 = (0, import_react29.memo)(SideMenuComponent);
+SideMenu2.pageHolder = SideMenuComponent.pageHolder;
+var SideMenu_default = SideMenu2;
+
 // src/utils/localStorage.ts
 function generateLocalStorage() {
   return {
@@ -9415,6 +9744,7 @@ function generateLocalStorage() {
   Modal,
   PageHeader,
   PageHolder,
+  SideMenu,
   Table,
   Tabs,
   Text,
@@ -9444,6 +9774,7 @@ function generateLocalStorage() {
   localStoragePlugin,
   reactRouterDomPlugin,
   saturateColor,
+  sideMenuControls,
   useAlertControls,
   useBetterHtmlContext,
   useBooleanState,