react-better-html 1.1.184 → 1.1.186

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +10 -5
  2. package/dist/index.d.ts +10 -5
  3. package/dist/index.js +83 -9
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +83 -9
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -931,28 +931,30 @@ declare const Foldable: typeof FoldableComponent & {
931
931
  box: typeof FoldableComponent.box;
932
932
  };
933
933
 
934
- type MenuItem = {
934
+ type SideMenuItem = {
935
935
  text: string;
936
936
  iconName: IconName | AnyOtherString;
937
937
  href?: string;
938
- onClick?: (item: MenuItem) => void;
938
+ onClick?: (item: SideMenuItem) => void;
939
939
  disabled?: boolean;
940
940
  hidden?: boolean;
941
- children?: MenuItem[];
941
+ children?: SideMenuItem[];
942
942
  };
943
943
  type SideMenuProps = {
944
- items: MenuItem[];
944
+ items: SideMenuItem[];
945
945
  topSpace?: number;
946
946
  logoAssetName?: AssetName | AnyOtherString;
947
947
  logoUrl?: string;
948
948
  logoText?: string;
949
949
  logoFontFamily?: string;
950
950
  collapsable?: boolean;
951
+ withCloseButton?: boolean;
951
952
  widthMobileHandle?: boolean;
952
953
  };
953
954
  type SideMenuComponentType = {
954
955
  (props: SideMenuProps): React.ReactElement;
955
956
  pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
957
+ burgerButton: () => React.ReactElement;
956
958
  };
957
959
  declare const SideMenuComponent: SideMenuComponentType;
958
960
  type SideMenuPageHolderProps = PageHolderProps & {
@@ -960,6 +962,7 @@ type SideMenuPageHolderProps = PageHolderProps & {
960
962
  };
961
963
  declare const SideMenu: typeof SideMenuComponent & {
962
964
  pageHolder: typeof SideMenuComponent.pageHolder;
965
+ burgerButton: typeof SideMenuComponent.burgerButton;
963
966
  };
964
967
 
965
968
  type AppConfig = {
@@ -1059,8 +1062,10 @@ declare const alertControls: {
1059
1062
  declare const sideMenuControls: {
1060
1063
  expand: () => void;
1061
1064
  collapse: () => void;
1065
+ toggleExpanded: () => void;
1062
1066
  open: () => void;
1063
1067
  close: () => void;
1068
+ toggleOpened: () => void;
1064
1069
  };
1065
1070
  declare const colorThemeControls: {
1066
1071
  toggleTheme: (theme?: ColorTheme) => void;
@@ -1118,4 +1123,4 @@ type LocalStoragePluginOptions = {
1118
1123
  declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
1119
1124
  declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
1120
1125
 
1121
- 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 };
1126
+ 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, SideMenu, type SideMenuItem, 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 CHANGED
@@ -931,28 +931,30 @@ declare const Foldable: typeof FoldableComponent & {
931
931
  box: typeof FoldableComponent.box;
932
932
  };
933
933
 
934
- type MenuItem = {
934
+ type SideMenuItem = {
935
935
  text: string;
936
936
  iconName: IconName | AnyOtherString;
937
937
  href?: string;
938
- onClick?: (item: MenuItem) => void;
938
+ onClick?: (item: SideMenuItem) => void;
939
939
  disabled?: boolean;
940
940
  hidden?: boolean;
941
- children?: MenuItem[];
941
+ children?: SideMenuItem[];
942
942
  };
943
943
  type SideMenuProps = {
944
- items: MenuItem[];
944
+ items: SideMenuItem[];
945
945
  topSpace?: number;
946
946
  logoAssetName?: AssetName | AnyOtherString;
947
947
  logoUrl?: string;
948
948
  logoText?: string;
949
949
  logoFontFamily?: string;
950
950
  collapsable?: boolean;
951
+ withCloseButton?: boolean;
951
952
  widthMobileHandle?: boolean;
952
953
  };
953
954
  type SideMenuComponentType = {
954
955
  (props: SideMenuProps): React.ReactElement;
955
956
  pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
957
+ burgerButton: () => React.ReactElement;
956
958
  };
957
959
  declare const SideMenuComponent: SideMenuComponentType;
958
960
  type SideMenuPageHolderProps = PageHolderProps & {
@@ -960,6 +962,7 @@ type SideMenuPageHolderProps = PageHolderProps & {
960
962
  };
961
963
  declare const SideMenu: typeof SideMenuComponent & {
962
964
  pageHolder: typeof SideMenuComponent.pageHolder;
965
+ burgerButton: typeof SideMenuComponent.burgerButton;
963
966
  };
964
967
 
965
968
  type AppConfig = {
@@ -1059,8 +1062,10 @@ declare const alertControls: {
1059
1062
  declare const sideMenuControls: {
1060
1063
  expand: () => void;
1061
1064
  collapse: () => void;
1065
+ toggleExpanded: () => void;
1062
1066
  open: () => void;
1063
1067
  close: () => void;
1068
+ toggleOpened: () => void;
1064
1069
  };
1065
1070
  declare const colorThemeControls: {
1066
1071
  toggleTheme: (theme?: ColorTheme) => void;
@@ -1118,4 +1123,4 @@ type LocalStoragePluginOptions = {
1118
1123
  declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
1119
1124
  declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
1120
1125
 
1121
- 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 };
1126
+ 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, SideMenu, type SideMenuItem, 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 CHANGED
@@ -5605,6 +5605,10 @@ var sideMenuControls = {
5605
5605
  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
5606
5606
  externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
5607
5607
  },
5608
+ toggleExpanded: () => {
5609
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
5610
+ externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
5611
+ },
5608
5612
  open: () => {
5609
5613
  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
5610
5614
  externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
@@ -5612,6 +5616,10 @@ var sideMenuControls = {
5612
5616
  close: () => {
5613
5617
  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
5614
5618
  externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
5619
+ },
5620
+ toggleOpened: () => {
5621
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
5622
+ externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
5615
5623
  }
5616
5624
  };
5617
5625
  var colorThemeControls = {
@@ -9401,7 +9409,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
9401
9409
  alignItems: "center",
9402
9410
  gap: iconGap,
9403
9411
  whiteSpace: "nowrap",
9404
- backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundBase,
9412
+ backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : theme2.colors.backgroundContent,
9405
9413
  borderRadius: theme2.styles.borderRadius,
9406
9414
  paddingBlock,
9407
9415
  paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
@@ -9488,9 +9496,9 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
9488
9496
  left: 0,
9489
9497
  border: `${lineWidth}px solid ${theme2.colors.border}`,
9490
9498
  borderRadius: 999,
9491
- borderTopColor: theme2.colors.backgroundBase,
9492
- borderLeftColor: theme2.colors.backgroundBase,
9493
- borderRightColor: theme2.colors.backgroundBase,
9499
+ borderTopColor: theme2.colors.backgroundContent,
9500
+ borderLeftColor: theme2.colors.backgroundContent,
9501
+ borderRightColor: theme2.colors.backgroundContent,
9494
9502
  transform: "rotate(45deg)"
9495
9503
  }
9496
9504
  )
@@ -9510,6 +9518,7 @@ var SideMenuComponent = function SideMenu({
9510
9518
  logoText,
9511
9519
  logoFontFamily,
9512
9520
  collapsable,
9521
+ withCloseButton,
9513
9522
  widthMobileHandle
9514
9523
  }) {
9515
9524
  const theme2 = useTheme();
@@ -9532,7 +9541,7 @@ var SideMenuComponent = function SideMenu({
9532
9541
  height: `calc(100svh - ${topSpace}px)`,
9533
9542
  top: topSpace,
9534
9543
  left: 0,
9535
- backgroundColor: theme2.colors.backgroundBase,
9544
+ backgroundColor: theme2.colors.backgroundContent,
9536
9545
  borderRight: `solid 1px ${theme2.colors.border}`,
9537
9546
  transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
9538
9547
  paddingInline: theme2.styles.space,
@@ -9543,7 +9552,7 @@ var SideMenuComponent = function SideMenu({
9543
9552
  zIndex: 11,
9544
9553
  children: [
9545
9554
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
9546
- (logoAssetName || logoUrl || mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
9555
+ (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
9547
9556
  (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
9548
9557
  Div_default.row,
9549
9558
  {
@@ -9578,7 +9587,7 @@ var SideMenuComponent = function SideMenu({
9578
9587
  ]
9579
9588
  }
9580
9589
  ) }),
9581
- mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
9590
+ withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
9582
9591
  ] }),
9583
9592
  /* @__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)) }),
9584
9593
  collapsable && !mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -9586,7 +9595,7 @@ var SideMenuComponent = function SideMenu({
9586
9595
  {
9587
9596
  alignItems: "center",
9588
9597
  justifyContent: "center",
9589
- backgroundColor: theme2.colors.backgroundBase,
9598
+ backgroundColor: theme2.colors.backgroundContent,
9590
9599
  borderRadius: theme2.styles.borderRadius,
9591
9600
  marginTop: "auto",
9592
9601
  cursor: "pointer",
@@ -9613,7 +9622,7 @@ var SideMenuComponent = function SideMenu({
9613
9622
  position: "absolute",
9614
9623
  top: theme2.styles.space,
9615
9624
  left: "100%",
9616
- backgroundColor: theme2.colors.backgroundBase,
9625
+ backgroundColor: theme2.colors.backgroundContent,
9617
9626
  border: `solid 1px ${theme2.colors.border}`,
9618
9627
  borderLeft: "none",
9619
9628
  borderTopRightRadius: theme2.styles.borderRadius,
@@ -9663,8 +9672,73 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
9663
9672
  }
9664
9673
  );
9665
9674
  };
9675
+ SideMenuComponent.burgerButton = function BurgerButton() {
9676
+ const theme2 = useTheme();
9677
+ const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
9678
+ const [isHovered, setIsHovered] = useBooleanState();
9679
+ const width = 2;
9680
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
9681
+ Div_default,
9682
+ {
9683
+ position: "relative",
9684
+ width: 32,
9685
+ height: 20,
9686
+ cursor: "pointer",
9687
+ onMouseOver: setIsHovered.setTrue,
9688
+ onMouseLeave: setIsHovered.setFalse,
9689
+ onMouseOut: setIsHovered.setFalse,
9690
+ onClick: setSideMenuIsOpenMobile.toggle,
9691
+ children: [
9692
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9693
+ Div_default,
9694
+ {
9695
+ position: "absolute",
9696
+ width: isHovered || sideMenuIsOpenMobile ? "100%" : "50%",
9697
+ height: width,
9698
+ top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
9699
+ left: 0,
9700
+ backgroundColor: theme2.colors.border,
9701
+ borderRadius: 999,
9702
+ transform: sideMenuIsOpenMobile ? "rotate(45deg)" : void 0,
9703
+ transition: theme2.styles.transition
9704
+ }
9705
+ ),
9706
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9707
+ Div_default,
9708
+ {
9709
+ position: "absolute",
9710
+ width: isHovered ? "100%" : "100%",
9711
+ height: width,
9712
+ top: "50%",
9713
+ left: 0,
9714
+ backgroundColor: theme2.colors.border,
9715
+ borderRadius: 999,
9716
+ transform: "translateY(-50%)",
9717
+ opacity: sideMenuIsOpenMobile ? 0 : void 0,
9718
+ transition: theme2.styles.transition
9719
+ }
9720
+ ),
9721
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9722
+ Div_default,
9723
+ {
9724
+ position: "absolute",
9725
+ width: isHovered || sideMenuIsOpenMobile ? "100%" : "75%",
9726
+ height: width,
9727
+ bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
9728
+ left: 0,
9729
+ backgroundColor: theme2.colors.border,
9730
+ borderRadius: 999,
9731
+ transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : void 0,
9732
+ transition: theme2.styles.transition
9733
+ }
9734
+ )
9735
+ ]
9736
+ }
9737
+ );
9738
+ };
9666
9739
  var SideMenu2 = (0, import_react29.memo)(SideMenuComponent);
9667
9740
  SideMenu2.pageHolder = SideMenuComponent.pageHolder;
9741
+ SideMenu2.burgerButton = SideMenuComponent.burgerButton;
9668
9742
  var SideMenu_default = SideMenu2;
9669
9743
 
9670
9744
  // src/utils/localStorage.ts