refactor: toolbar implementation changed

shesha-reactjs/src/components/formDesigner/formDesignerRenderer.tsx

@@ -6,7 +6,7 @@ import FormDesignerToolbar from './formDesignerToolbar';
 import ComponentPropertiesPanel from './componentPropertiesPanel';
 import ComponentPropertiesTitle from './componentPropertiesTitle';
 import { useForm } from '../../providers/form';
-import { MetadataProvider, useSidebarMenu } from '../../providers';
+import { MetadataProvider, useSheshaApplication } from '../../providers';
 import ConditionalWrap from '../conditionalWrapper';
 import { useFormPersister } from '../../providers/formPersisterProvider';
 import { useFormDesigner } from '../../providers/formDesigner';
@@ -15,14 +15,18 @@ import { FORM_STATUS_MAPPING } from '../../utils/configurationFramework/models';
 import { getFormFullName } from '../../utils/form';
 import HelpTextPopover from '../helpTextPopover';
 import classNames from 'classnames';
+import { getInitIsExpanded } from './util';
 
 const { Title } = Typography;
 
 export const FormDesignerRenderer: FC = ({}) => {
   const [widgetsOpen, setWidgetOpen] = useState(true);
   const [fieldPropertiesOpen, setFieldPropertiesOpen] = useState(true);
   const { formProps } = useFormPersister();
-  const { isExpanded } = useSidebarMenu(true);
+
+  const { globalVariables: { isSideBarExpanded } = {} } = useSheshaApplication();
+
+  const isExpanded = typeof isSideBarExpanded == 'boolean' ? isSideBarExpanded : getInitIsExpanded();
 
   const toggleWidgetSidebar = () => setWidgetOpen((widget) => !widget);
 

shesha-reactjs/src/components/mainLayout/index.tsx

@@ -8,9 +8,9 @@ import NodeOrFuncRenderer, { ReactNodeOrFunc } from '../nodeOrFuncRenderer';
 import { IHtmlHeadProps } from '../htmlHead';
 import LayoutHeading from '../layoutHeading';
 import { withAuth } from '../../hocs';
-import { useSidebarMenuDefaults, useSidebarMenu } from '../../providers/sidebarMenu';
+import { useSidebarMenuDefaults } from '../../providers/sidebarMenu';
 import ConfigurableSidebarMenu from '../configurableSidebarMenu';
-import { useLocalStorage, useTheme } from '../..';
+import { useLocalStorage, useSheshaApplication, useTheme } from '../..';
 import { SIDEBAR_MENU_NAME } from '../../shesha-constants';
 import { SIDEBAR_COLLAPSE } from './constant';
 import './styles/styles.less';
@@ -81,7 +81,8 @@ const DefaultLayout: FC<PropsWithChildren<IMainLayoutProps>> = (props) => {
   } = props;
   const { theme: themeFromStorage } = useTheme();
   const sidebarDefaults = useSidebarMenuDefaults();
-  const { collapse, expand } = useSidebarMenu(true);
+
+  const { setGlobalVariables } = useSheshaApplication();
 
   const sideMenuTheme = themeFromStorage?.sidebar;
 
@@ -100,10 +101,7 @@ const DefaultLayout: FC<PropsWithChildren<IMainLayoutProps>> = (props) => {
   }, [heading, title, heading, showHeading]);
 
   const onCollapse = (value: boolean) => {
-    const execute = value ? collapse : expand;
-
-    execute();
-
+    setGlobalVariables({ isSideBarExpanded: !value });
     setCollapsed(value);
   };