react-better-html 1.1.277 → 1.1.278
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +12 -2
- package/dist/index.d.ts +12 -2
- package/dist/index.js +199 -140
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +199 -140
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -501,6 +501,8 @@ type BetterHtmlConfig = {
|
|
|
501
501
|
sideMenu?: {
|
|
502
502
|
/** @default 300 */
|
|
503
503
|
width?: number;
|
|
504
|
+
/** @default 80 */
|
|
505
|
+
sidebarWidth?: number;
|
|
504
506
|
};
|
|
505
507
|
};
|
|
506
508
|
};
|
|
@@ -532,8 +534,9 @@ type TabsProps = {
|
|
|
532
534
|
tabs: Tab[];
|
|
533
535
|
name?: string;
|
|
534
536
|
accentColor?: Color;
|
|
535
|
-
style?: "default" | "borderRadiusTop" | "box";
|
|
537
|
+
style?: "default" | "borderRadiusTop" | "box" | "bubble";
|
|
536
538
|
gap?: number;
|
|
539
|
+
borderRadius?: React.CSSProperties["borderRadius"];
|
|
537
540
|
noBottomLine?: boolean;
|
|
538
541
|
/** @default true */
|
|
539
542
|
keepUrlHistory?: boolean;
|
|
@@ -1092,6 +1095,7 @@ declare const Tooltip: typeof TooltipComponent & {
|
|
|
1092
1095
|
type FoldableProps = {
|
|
1093
1096
|
isOpen?: boolean;
|
|
1094
1097
|
defaultOpen?: boolean;
|
|
1098
|
+
withoutLine?: boolean;
|
|
1095
1099
|
headerPaddingBlock?: React.CSSProperties["paddingBlock"];
|
|
1096
1100
|
headerPaddingInline?: React.CSSProperties["paddingInline"];
|
|
1097
1101
|
/** @default "right" */
|
|
@@ -1132,10 +1136,13 @@ type SideMenuItem = {
|
|
|
1132
1136
|
type: "divider";
|
|
1133
1137
|
shortText?: string;
|
|
1134
1138
|
});
|
|
1139
|
+
type SideMenuPosition = "left" | "right";
|
|
1135
1140
|
type SideMenuProps = {
|
|
1136
1141
|
items: SideMenuItem[];
|
|
1137
1142
|
bottomItems?: SideMenuItem[];
|
|
1138
1143
|
location: Location;
|
|
1144
|
+
/** @default "left" */
|
|
1145
|
+
position?: SideMenuPosition;
|
|
1139
1146
|
topSpace?: number;
|
|
1140
1147
|
logoAssetName?: AssetName | AnyOtherString;
|
|
1141
1148
|
logoUrl?: string;
|
|
@@ -1148,6 +1155,7 @@ type SideMenuProps = {
|
|
|
1148
1155
|
itemsAdditionalComponent?: React.ReactNode;
|
|
1149
1156
|
betweenItemsAdditionalComponent?: React.ReactNode;
|
|
1150
1157
|
bottomItemsAdditionalComponent?: React.ReactNode;
|
|
1158
|
+
border?: React.CSSProperties["border"];
|
|
1151
1159
|
isLoading?: boolean;
|
|
1152
1160
|
/** @default backgroundContent */
|
|
1153
1161
|
backgroundColor?: React.CSSProperties["backgroundColor"];
|
|
@@ -1159,8 +1167,10 @@ type SideMenuProps = {
|
|
|
1159
1167
|
paddingBottom?: React.CSSProperties["paddingBottom"];
|
|
1160
1168
|
/** @default "left" */
|
|
1161
1169
|
mobileFoldToPosition?: "left" | "right";
|
|
1170
|
+
sideBar?: React.ReactNode;
|
|
1162
1171
|
renderItemsHolder?: (items: React.ReactNode) => React.ReactNode;
|
|
1163
1172
|
renderBottomItemsHolder?: (items: React.ReactNode) => React.ReactNode;
|
|
1173
|
+
children?: React.ReactNode;
|
|
1164
1174
|
};
|
|
1165
1175
|
type SideMenuComponentType = {
|
|
1166
1176
|
(props: SideMenuProps): React.ReactElement;
|
|
@@ -1241,4 +1251,4 @@ type LocalStoragePluginOptions = {
|
|
|
1241
1251
|
declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
|
|
1242
1252
|
declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
|
|
1243
1253
|
|
|
1244
|
-
export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
|
|
1254
|
+
export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, type Language, type LanguageData, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
|
package/dist/index.d.ts
CHANGED
|
@@ -501,6 +501,8 @@ type BetterHtmlConfig = {
|
|
|
501
501
|
sideMenu?: {
|
|
502
502
|
/** @default 300 */
|
|
503
503
|
width?: number;
|
|
504
|
+
/** @default 80 */
|
|
505
|
+
sidebarWidth?: number;
|
|
504
506
|
};
|
|
505
507
|
};
|
|
506
508
|
};
|
|
@@ -532,8 +534,9 @@ type TabsProps = {
|
|
|
532
534
|
tabs: Tab[];
|
|
533
535
|
name?: string;
|
|
534
536
|
accentColor?: Color;
|
|
535
|
-
style?: "default" | "borderRadiusTop" | "box";
|
|
537
|
+
style?: "default" | "borderRadiusTop" | "box" | "bubble";
|
|
536
538
|
gap?: number;
|
|
539
|
+
borderRadius?: React.CSSProperties["borderRadius"];
|
|
537
540
|
noBottomLine?: boolean;
|
|
538
541
|
/** @default true */
|
|
539
542
|
keepUrlHistory?: boolean;
|
|
@@ -1092,6 +1095,7 @@ declare const Tooltip: typeof TooltipComponent & {
|
|
|
1092
1095
|
type FoldableProps = {
|
|
1093
1096
|
isOpen?: boolean;
|
|
1094
1097
|
defaultOpen?: boolean;
|
|
1098
|
+
withoutLine?: boolean;
|
|
1095
1099
|
headerPaddingBlock?: React.CSSProperties["paddingBlock"];
|
|
1096
1100
|
headerPaddingInline?: React.CSSProperties["paddingInline"];
|
|
1097
1101
|
/** @default "right" */
|
|
@@ -1132,10 +1136,13 @@ type SideMenuItem = {
|
|
|
1132
1136
|
type: "divider";
|
|
1133
1137
|
shortText?: string;
|
|
1134
1138
|
});
|
|
1139
|
+
type SideMenuPosition = "left" | "right";
|
|
1135
1140
|
type SideMenuProps = {
|
|
1136
1141
|
items: SideMenuItem[];
|
|
1137
1142
|
bottomItems?: SideMenuItem[];
|
|
1138
1143
|
location: Location;
|
|
1144
|
+
/** @default "left" */
|
|
1145
|
+
position?: SideMenuPosition;
|
|
1139
1146
|
topSpace?: number;
|
|
1140
1147
|
logoAssetName?: AssetName | AnyOtherString;
|
|
1141
1148
|
logoUrl?: string;
|
|
@@ -1148,6 +1155,7 @@ type SideMenuProps = {
|
|
|
1148
1155
|
itemsAdditionalComponent?: React.ReactNode;
|
|
1149
1156
|
betweenItemsAdditionalComponent?: React.ReactNode;
|
|
1150
1157
|
bottomItemsAdditionalComponent?: React.ReactNode;
|
|
1158
|
+
border?: React.CSSProperties["border"];
|
|
1151
1159
|
isLoading?: boolean;
|
|
1152
1160
|
/** @default backgroundContent */
|
|
1153
1161
|
backgroundColor?: React.CSSProperties["backgroundColor"];
|
|
@@ -1159,8 +1167,10 @@ type SideMenuProps = {
|
|
|
1159
1167
|
paddingBottom?: React.CSSProperties["paddingBottom"];
|
|
1160
1168
|
/** @default "left" */
|
|
1161
1169
|
mobileFoldToPosition?: "left" | "right";
|
|
1170
|
+
sideBar?: React.ReactNode;
|
|
1162
1171
|
renderItemsHolder?: (items: React.ReactNode) => React.ReactNode;
|
|
1163
1172
|
renderBottomItemsHolder?: (items: React.ReactNode) => React.ReactNode;
|
|
1173
|
+
children?: React.ReactNode;
|
|
1164
1174
|
};
|
|
1165
1175
|
type SideMenuComponentType = {
|
|
1166
1176
|
(props: SideMenuProps): React.ReactElement;
|
|
@@ -1241,4 +1251,4 @@ type LocalStoragePluginOptions = {
|
|
|
1241
1251
|
declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
|
|
1242
1252
|
declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
|
|
1243
1253
|
|
|
1244
|
-
export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
|
|
1254
|
+
export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, type Language, type LanguageData, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
|
package/dist/index.js
CHANGED
|
@@ -114,6 +114,7 @@ var appConfig = {
|
|
|
114
114
|
};
|
|
115
115
|
var defaultAlertDuration = 2.3 * 1e3;
|
|
116
116
|
var defaultSideMenuWidth = 300;
|
|
117
|
+
var defaultSideBarWidth = 80;
|
|
117
118
|
|
|
118
119
|
// src/constants/theme.ts
|
|
119
120
|
var theme = {};
|
|
@@ -7670,6 +7671,7 @@ var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
|
|
|
7670
7671
|
accentColor,
|
|
7671
7672
|
style = "default",
|
|
7672
7673
|
gap,
|
|
7674
|
+
borderRadius,
|
|
7673
7675
|
noBottomLine,
|
|
7674
7676
|
keepUrlHistory = true,
|
|
7675
7677
|
onChange,
|
|
@@ -7682,7 +7684,7 @@ var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
|
|
|
7682
7684
|
const { language, componentsState } = useBetterHtmlContextInternal();
|
|
7683
7685
|
const firstRenderPassedRef = (0, import_react30.useRef)(false);
|
|
7684
7686
|
const tabsRef = (0, import_react30.useRef)({});
|
|
7685
|
-
const tabsGap = gap ?? (style === "box" ? theme2.styles.gap / 2 : 0);
|
|
7687
|
+
const tabsGap = gap ?? (style === "box" || style === "bubble" ? theme2.styles.gap / 2 : 0);
|
|
7686
7688
|
const [selectedTabId, setSelectedTabId] = (0, import_react30.useState)(() => {
|
|
7687
7689
|
const selectedTabId2 = tabs[0];
|
|
7688
7690
|
if (!selectedTabId2) return "";
|
|
@@ -7774,9 +7776,10 @@ var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
|
|
|
7774
7776
|
selectTab: onClickTab
|
|
7775
7777
|
};
|
|
7776
7778
|
}, [selectedTabId, onClickTab]);
|
|
7779
|
+
const readyBorderRadius = borderRadius ?? (style === "bubble" ? theme2.styles.borderRadius : void 0);
|
|
7777
7780
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
|
|
7778
7781
|
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
|
|
7779
|
-
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
|
|
7782
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", zIndex: 2, children: tabs.map((tab) => {
|
|
7780
7783
|
const selected = tab.id === selectedTabId;
|
|
7781
7784
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
7782
7785
|
Div_default,
|
|
@@ -7784,8 +7787,9 @@ var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
|
|
|
7784
7787
|
className: `react-better-html-tabs-tab${selected ? " react-better-html-tabs-tab-selected" : ""}`,
|
|
7785
7788
|
position: "relative",
|
|
7786
7789
|
width: "fit-content",
|
|
7787
|
-
backgroundColor: style === "box" ? selected ? accentColor ?? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
|
|
7788
|
-
|
|
7790
|
+
backgroundColor: style === "bubble" ? theme2.colors.textPrimary + "00" : style === "box" ? selected ? accentColor ?? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
|
|
7791
|
+
backgroundColorHover: style === "bubble" ? theme2.colors.textPrimary + "20" : void 0,
|
|
7792
|
+
borderRadius: readyBorderRadius ?? (style === "box" ? theme2.styles.borderRadius : void 0),
|
|
7789
7793
|
borderTopLeftRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
|
|
7790
7794
|
borderTopRightRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
|
|
7791
7795
|
border: style === "box" ? `${theme2.styles.borderWidth}px solid ${selected ? "transparent" : theme2.colors.border}` : void 0,
|
|
@@ -7818,7 +7822,7 @@ var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
|
|
|
7818
7822
|
Text_default,
|
|
7819
7823
|
{
|
|
7820
7824
|
fontWeight: 700,
|
|
7821
|
-
color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
|
|
7825
|
+
color: !selected ? theme2.colors.textSecondary : style === "box" || style === "bubble" ? theme2.colors.base : void 0,
|
|
7822
7826
|
transition: theme2.styles.transition,
|
|
7823
7827
|
whiteSpace: "nowrap",
|
|
7824
7828
|
children: tab.label ?? tab.id
|
|
@@ -7829,7 +7833,20 @@ var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
|
|
|
7829
7833
|
tab.id
|
|
7830
7834
|
);
|
|
7831
7835
|
}) }),
|
|
7832
|
-
style !== "box" && !noBottomLine && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
7836
|
+
style !== "box" && !noBottomLine && (style === "bubble" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
7837
|
+
Div_default,
|
|
7838
|
+
{
|
|
7839
|
+
position: "absolute",
|
|
7840
|
+
width,
|
|
7841
|
+
height: "100%",
|
|
7842
|
+
bottom: 0,
|
|
7843
|
+
left: leftSpacing,
|
|
7844
|
+
backgroundColor: accentColor ?? theme2.colors.primary,
|
|
7845
|
+
borderRadius: readyBorderRadius,
|
|
7846
|
+
transition: firstRenderPassedRef.current ? theme2.styles.transition : "none",
|
|
7847
|
+
zIndex: 1
|
|
7848
|
+
}
|
|
7849
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
7833
7850
|
Div_default,
|
|
7834
7851
|
{
|
|
7835
7852
|
position: "absolute",
|
|
@@ -7838,9 +7855,10 @@ var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
|
|
|
7838
7855
|
bottom: 0,
|
|
7839
7856
|
left: leftSpacing,
|
|
7840
7857
|
backgroundColor: accentColor ?? theme2.colors.primary,
|
|
7841
|
-
transition: firstRenderPassedRef.current ? theme2.styles.transition : "none"
|
|
7858
|
+
transition: firstRenderPassedRef.current ? theme2.styles.transition : "none",
|
|
7859
|
+
zIndex: 2
|
|
7842
7860
|
}
|
|
7843
|
-
)
|
|
7861
|
+
))
|
|
7844
7862
|
] }),
|
|
7845
7863
|
children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { width: "100%", children })
|
|
7846
7864
|
] });
|
|
@@ -7877,6 +7895,7 @@ var animationDurationOpen = animationDurationClose * 2;
|
|
|
7877
7895
|
var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
|
|
7878
7896
|
isOpen: controlledIsOpen,
|
|
7879
7897
|
defaultOpen = false,
|
|
7898
|
+
withoutLine,
|
|
7880
7899
|
icon,
|
|
7881
7900
|
iconColor,
|
|
7882
7901
|
iconSize,
|
|
@@ -7994,7 +8013,7 @@ var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
|
|
|
7994
8013
|
]
|
|
7995
8014
|
}
|
|
7996
8015
|
),
|
|
7997
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
|
|
8016
|
+
!withoutLine && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
|
|
7998
8017
|
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
7999
8018
|
Div_default,
|
|
8000
8019
|
{
|
|
@@ -8288,6 +8307,7 @@ var SideMenuComponent = function SideMenu({
|
|
|
8288
8307
|
items,
|
|
8289
8308
|
bottomItems,
|
|
8290
8309
|
location,
|
|
8310
|
+
position = "left",
|
|
8291
8311
|
topSpace = 0,
|
|
8292
8312
|
logoAssetName,
|
|
8293
8313
|
logoUrl,
|
|
@@ -8300,6 +8320,7 @@ var SideMenuComponent = function SideMenu({
|
|
|
8300
8320
|
itemsAdditionalComponent,
|
|
8301
8321
|
betweenItemsAdditionalComponent,
|
|
8302
8322
|
bottomItemsAdditionalComponent,
|
|
8323
|
+
border,
|
|
8303
8324
|
isLoading,
|
|
8304
8325
|
backgroundColor,
|
|
8305
8326
|
activeItemColor,
|
|
@@ -8308,8 +8329,10 @@ var SideMenuComponent = function SideMenu({
|
|
|
8308
8329
|
paddingTop,
|
|
8309
8330
|
paddingBottom,
|
|
8310
8331
|
mobileFoldToPosition = "left",
|
|
8332
|
+
sideBar,
|
|
8311
8333
|
renderItemsHolder,
|
|
8312
|
-
renderBottomItemsHolder
|
|
8334
|
+
renderBottomItemsHolder,
|
|
8335
|
+
children
|
|
8313
8336
|
}) {
|
|
8314
8337
|
const theme2 = (0, import_react_better_core29.useTheme)();
|
|
8315
8338
|
const mediaQuery = useMediaQuery();
|
|
@@ -8327,17 +8350,21 @@ var SideMenuComponent = function SideMenu({
|
|
|
8327
8350
|
activeItem,
|
|
8328
8351
|
setActiveItem,
|
|
8329
8352
|
items: itemsState,
|
|
8330
|
-
bottomItems: bottomItemsState
|
|
8353
|
+
bottomItems: bottomItemsState,
|
|
8354
|
+
position
|
|
8331
8355
|
}),
|
|
8332
|
-
[activeItem, itemsState, bottomItemsState]
|
|
8356
|
+
[activeItem, itemsState, bottomItemsState, position]
|
|
8333
8357
|
);
|
|
8334
8358
|
const isCollapsable = collapsable && !mediaQuery.size1000;
|
|
8335
8359
|
const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
|
|
8336
8360
|
const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
|
|
8337
8361
|
const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
|
|
8338
8362
|
const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
|
|
8363
|
+
const sideBarWidth = components.sideMenu?.width ?? defaultSideBarWidth;
|
|
8339
8364
|
const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
|
|
8340
8365
|
const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
|
|
8366
|
+
const readyBorder = border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`;
|
|
8367
|
+
const readyTransition = mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition;
|
|
8341
8368
|
(0, import_react32.useEffect)(() => {
|
|
8342
8369
|
setItemsState(items);
|
|
8343
8370
|
}, [items]);
|
|
@@ -8389,139 +8416,168 @@ var SideMenuComponent = function SideMenu({
|
|
|
8389
8416
|
))
|
|
8390
8417
|
}
|
|
8391
8418
|
);
|
|
8392
|
-
|
|
8393
|
-
Div_default
|
|
8419
|
+
const sideBarComponent = sideBar ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8420
|
+
Div_default,
|
|
8394
8421
|
{
|
|
8395
|
-
|
|
8396
|
-
|
|
8397
|
-
|
|
8398
|
-
|
|
8399
|
-
|
|
8400
|
-
|
|
8401
|
-
|
|
8402
|
-
|
|
8403
|
-
|
|
8404
|
-
|
|
8405
|
-
|
|
8406
|
-
|
|
8407
|
-
|
|
8408
|
-
|
|
8409
|
-
|
|
8410
|
-
|
|
8411
|
-
|
|
8412
|
-
|
|
8413
|
-
|
|
8414
|
-
|
|
8415
|
-
|
|
8416
|
-
|
|
8417
|
-
|
|
8418
|
-
|
|
8419
|
-
|
|
8420
|
-
|
|
8421
|
-
|
|
8422
|
-
|
|
8423
|
-
{
|
|
8424
|
-
name: logoAssetName,
|
|
8425
|
-
src: logoUrl,
|
|
8426
|
-
width: logoSize,
|
|
8427
|
-
height: logoSize,
|
|
8428
|
-
objectFit: "contain"
|
|
8429
|
-
}
|
|
8430
|
-
),
|
|
8431
|
-
logoText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8432
|
-
Text_default,
|
|
8433
|
-
{
|
|
8434
|
-
fontFamily: logoFontFamily,
|
|
8435
|
-
fontSize: 22,
|
|
8436
|
-
fontWeight: 800,
|
|
8437
|
-
opacity: !isCollapsed ? 1 : 0,
|
|
8438
|
-
transition: theme2.styles.transition,
|
|
8439
|
-
userSelect: "none",
|
|
8440
|
-
children: logoText
|
|
8441
|
-
}
|
|
8442
|
-
)
|
|
8443
|
-
]
|
|
8444
|
-
}
|
|
8445
|
-
) }),
|
|
8446
|
-
withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
|
|
8447
|
-
] }),
|
|
8448
|
-
itemsAdditionalComponent,
|
|
8449
|
-
!isLoading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
8450
|
-
renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
|
|
8451
|
-
betweenItemsAdditionalComponent,
|
|
8452
|
-
readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
|
|
8453
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
|
|
8454
|
-
bottomItemsAdditionalComponent,
|
|
8455
|
-
isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8456
|
-
Div_default,
|
|
8422
|
+
width: sideBarWidth,
|
|
8423
|
+
height: "100%",
|
|
8424
|
+
flexShrink: 0,
|
|
8425
|
+
borderRight: position === "left" ? readyBorder : void 0,
|
|
8426
|
+
borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
|
|
8427
|
+
children: sideBar
|
|
8428
|
+
}
|
|
8429
|
+
) : sideBar;
|
|
8430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(SideMenuContextProvider, { value: contextValue, children: [
|
|
8431
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
8432
|
+
Div_default.row,
|
|
8433
|
+
{
|
|
8434
|
+
as: "aside",
|
|
8435
|
+
position: "fixed",
|
|
8436
|
+
width: mediaQuery.size1000 ? "100%" : (isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth) + (sideBar ? sideBarWidth : 0),
|
|
8437
|
+
height: `calc(100svh - ${topSpace}px)`,
|
|
8438
|
+
top: topSpace,
|
|
8439
|
+
left: position === "left" ? 0 : void 0,
|
|
8440
|
+
right: position === "right" ? 0 : void 0,
|
|
8441
|
+
backgroundColor: readyBackgroundColor,
|
|
8442
|
+
transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : `translateX(${mobileFoldToPosition === "left" ? "-" : ""}100%)`,
|
|
8443
|
+
transition: readyTransition,
|
|
8444
|
+
userSelect: "none",
|
|
8445
|
+
zIndex: 10,
|
|
8446
|
+
children: [
|
|
8447
|
+
position === "left" && sideBarComponent,
|
|
8448
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
8449
|
+
Div_default.column,
|
|
8457
8450
|
{
|
|
8458
|
-
|
|
8459
|
-
|
|
8460
|
-
|
|
8461
|
-
|
|
8462
|
-
|
|
8463
|
-
|
|
8464
|
-
|
|
8465
|
-
|
|
8466
|
-
|
|
8467
|
-
|
|
8468
|
-
|
|
8469
|
-
|
|
8470
|
-
|
|
8471
|
-
|
|
8472
|
-
|
|
8473
|
-
|
|
8474
|
-
|
|
8475
|
-
|
|
8451
|
+
width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
|
|
8452
|
+
height: "100%",
|
|
8453
|
+
borderRight: position === "left" ? readyBorder : void 0,
|
|
8454
|
+
borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
|
|
8455
|
+
flexShrink: 0,
|
|
8456
|
+
paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
|
|
8457
|
+
paddingBottom,
|
|
8458
|
+
transition: readyTransition,
|
|
8459
|
+
children: [
|
|
8460
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
|
|
8461
|
+
(logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
|
|
8462
|
+
(logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
8463
|
+
Div_default.row,
|
|
8464
|
+
{
|
|
8465
|
+
alignItems: "center",
|
|
8466
|
+
width: sideMenuCollapsedWidth ? logoSize : void 0,
|
|
8467
|
+
height: logoSize,
|
|
8468
|
+
whiteSpace: "nowrap",
|
|
8469
|
+
gap: theme2.styles.gap,
|
|
8470
|
+
children: [
|
|
8471
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8472
|
+
Image_default,
|
|
8473
|
+
{
|
|
8474
|
+
name: logoAssetName,
|
|
8475
|
+
src: logoUrl,
|
|
8476
|
+
width: logoSize,
|
|
8477
|
+
height: logoSize,
|
|
8478
|
+
objectFit: "contain"
|
|
8479
|
+
}
|
|
8480
|
+
),
|
|
8481
|
+
logoText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8482
|
+
Text_default,
|
|
8483
|
+
{
|
|
8484
|
+
fontFamily: logoFontFamily,
|
|
8485
|
+
fontSize: 22,
|
|
8486
|
+
fontWeight: 800,
|
|
8487
|
+
opacity: !isCollapsed ? 1 : 0,
|
|
8488
|
+
transition: theme2.styles.transition,
|
|
8489
|
+
userSelect: "none",
|
|
8490
|
+
children: logoText
|
|
8491
|
+
}
|
|
8492
|
+
)
|
|
8493
|
+
]
|
|
8494
|
+
}
|
|
8495
|
+
) }),
|
|
8496
|
+
withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
|
|
8497
|
+
] }),
|
|
8498
|
+
itemsAdditionalComponent,
|
|
8499
|
+
!isLoading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
8500
|
+
renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
|
|
8501
|
+
betweenItemsAdditionalComponent,
|
|
8502
|
+
readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
|
|
8503
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
|
|
8504
|
+
bottomItemsAdditionalComponent,
|
|
8505
|
+
isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8506
|
+
Div_default,
|
|
8476
8507
|
{
|
|
8477
|
-
|
|
8478
|
-
|
|
8479
|
-
|
|
8480
|
-
|
|
8481
|
-
|
|
8508
|
+
borderTop: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
|
|
8509
|
+
marginTop: !readyBottomItems ? "auto" : void 0,
|
|
8510
|
+
paddingInline: theme2.styles.space,
|
|
8511
|
+
paddingBlock: theme2.styles.space,
|
|
8512
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8513
|
+
Div_default.row,
|
|
8514
|
+
{
|
|
8515
|
+
alignItems: "center",
|
|
8516
|
+
justifyContent: "center",
|
|
8517
|
+
backgroundColor: readyBackgroundColor,
|
|
8518
|
+
borderRadius: theme2.styles.borderRadius,
|
|
8519
|
+
cursor: "pointer",
|
|
8520
|
+
filterHover: filterHover().z1,
|
|
8521
|
+
isTabAccessed: true,
|
|
8522
|
+
paddingBlock: theme2.styles.gap,
|
|
8523
|
+
onClick: setSideMenuIsCollapsed.toggle,
|
|
8524
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8525
|
+
Icon_default,
|
|
8526
|
+
{
|
|
8527
|
+
name: position === "left" ? "chevronRight" : "chevronLeft",
|
|
8528
|
+
size: 20,
|
|
8529
|
+
color: theme2.colors.textSecondary,
|
|
8530
|
+
transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
|
|
8531
|
+
transition: theme2.styles.transition
|
|
8532
|
+
}
|
|
8533
|
+
)
|
|
8534
|
+
}
|
|
8535
|
+
)
|
|
8482
8536
|
}
|
|
8483
8537
|
)
|
|
8484
|
-
}
|
|
8485
|
-
|
|
8538
|
+
] }),
|
|
8539
|
+
widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8540
|
+
Div_default.row,
|
|
8541
|
+
{
|
|
8542
|
+
position: "absolute",
|
|
8543
|
+
top: theme2.styles.space,
|
|
8544
|
+
left: "100%",
|
|
8545
|
+
backgroundColor: readyBackgroundColor,
|
|
8546
|
+
border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
|
|
8547
|
+
borderLeft: "none",
|
|
8548
|
+
borderTopRightRadius: theme2.styles.borderRadius,
|
|
8549
|
+
borderBottomRightRadius: theme2.styles.borderRadius,
|
|
8550
|
+
alignItems: "center",
|
|
8551
|
+
cursor: "pointer",
|
|
8552
|
+
opacity: !mediaQuery.size1000 ? 0 : void 0,
|
|
8553
|
+
pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
|
|
8554
|
+
padding: theme2.styles.gap,
|
|
8555
|
+
paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
|
|
8556
|
+
transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
|
|
8557
|
+
transition: theme2.styles.transition,
|
|
8558
|
+
onClick: setSideMenuIsOpenMobile.toggle,
|
|
8559
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8560
|
+
Icon_default,
|
|
8561
|
+
{
|
|
8562
|
+
name: "chevronRight",
|
|
8563
|
+
size: 20,
|
|
8564
|
+
color: theme2.colors.textSecondary,
|
|
8565
|
+
transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
|
|
8566
|
+
transition: theme2.styles.transition
|
|
8567
|
+
}
|
|
8568
|
+
)
|
|
8569
|
+
}
|
|
8570
|
+
),
|
|
8571
|
+
absoluteComponent && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
|
|
8572
|
+
]
|
|
8486
8573
|
}
|
|
8487
|
-
)
|
|
8488
|
-
|
|
8489
|
-
|
|
8490
|
-
|
|
8491
|
-
|
|
8492
|
-
|
|
8493
|
-
|
|
8494
|
-
left: "100%",
|
|
8495
|
-
backgroundColor: readyBackgroundColor,
|
|
8496
|
-
border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
|
|
8497
|
-
borderLeft: "none",
|
|
8498
|
-
borderTopRightRadius: theme2.styles.borderRadius,
|
|
8499
|
-
borderBottomRightRadius: theme2.styles.borderRadius,
|
|
8500
|
-
alignItems: "center",
|
|
8501
|
-
cursor: "pointer",
|
|
8502
|
-
opacity: !mediaQuery.size1000 ? 0 : void 0,
|
|
8503
|
-
pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
|
|
8504
|
-
padding: theme2.styles.gap,
|
|
8505
|
-
paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
|
|
8506
|
-
transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
|
|
8507
|
-
transition: theme2.styles.transition,
|
|
8508
|
-
onClick: setSideMenuIsOpenMobile.toggle,
|
|
8509
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8510
|
-
Icon_default,
|
|
8511
|
-
{
|
|
8512
|
-
name: "chevronRight",
|
|
8513
|
-
size: 20,
|
|
8514
|
-
color: theme2.colors.textSecondary,
|
|
8515
|
-
transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
|
|
8516
|
-
transition: theme2.styles.transition
|
|
8517
|
-
}
|
|
8518
|
-
)
|
|
8519
|
-
}
|
|
8520
|
-
),
|
|
8521
|
-
absoluteComponent && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
|
|
8522
|
-
]
|
|
8523
|
-
}
|
|
8524
|
-
) });
|
|
8574
|
+
),
|
|
8575
|
+
position === "right" && sideBarComponent
|
|
8576
|
+
]
|
|
8577
|
+
}
|
|
8578
|
+
),
|
|
8579
|
+
children
|
|
8580
|
+
] });
|
|
8525
8581
|
};
|
|
8526
8582
|
SideMenuComponent.pageHolder = function SideMenuPageHolder({
|
|
8527
8583
|
additionalTopComponent,
|
|
@@ -8531,14 +8587,17 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
|
|
|
8531
8587
|
const theme2 = (0, import_react_better_core29.useTheme)();
|
|
8532
8588
|
const mediaQuery = useMediaQuery();
|
|
8533
8589
|
const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
|
|
8590
|
+
const { position } = useSideMenuContext();
|
|
8534
8591
|
const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
|
|
8535
8592
|
const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
|
|
8593
|
+
const sideSpace = !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0;
|
|
8536
8594
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
8537
8595
|
Div_default,
|
|
8538
8596
|
{
|
|
8539
8597
|
position: "relative",
|
|
8540
8598
|
width: "100%",
|
|
8541
|
-
paddingLeft:
|
|
8599
|
+
paddingLeft: position === "left" ? sideSpace : void 0,
|
|
8600
|
+
paddingRight: position === "right" ? sideSpace : void 0,
|
|
8542
8601
|
transition: theme2.styles.transition,
|
|
8543
8602
|
children: [
|
|
8544
8603
|
additionalTopComponent,
|