refactor: fixed toolbar width modified

shesha-io · Jul 6, 2023 · bd3d3b0 · bd3d3b0
1 parent 7cfe0d9
commit bd3d3b0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/shesha-reactjs/src/components/formDesigner/formDesignerRenderer.tsx b/shesha-reactjs/src/components/formDesigner/formDesignerRenderer.tsx
@@ -6,21 +6,23 @@ import FormDesignerToolbar from './formDesignerToolbar';
 import ComponentPropertiesPanel from './componentPropertiesPanel';
 import ComponentPropertiesTitle from './componentPropertiesTitle';
 import { useForm } from '../../providers/form';
-import { MetadataProvider } from '../../providers';
+import { MetadataProvider, useSidebarMenu } from '../../providers';
 import ConditionalWrap from '../conditionalWrapper';
 import { useFormPersister } from '../../providers/formPersisterProvider';
 import { useFormDesigner } from '../../providers/formDesigner';
 import StatusTag from '../statusTag';
 import { FORM_STATUS_MAPPING } from '../../utils/configurationFramework/models';
 import { getFormFullName } from '../../utils/form';
 import HelpTextPopover from '../helpTextPopover';
+import classNames from 'classnames';
 
 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 toggleWidgetSidebar = () => setWidgetOpen((widget) => !widget);
 
@@ -56,7 +58,9 @@ export const FormDesignerRenderer: FC = ({}) => {
             </MetadataProvider>
           )}
         >
-          <FormDesignerToolbar className="sha-toolbar-fixed" />
+          <FormDesignerToolbar
+            className={classNames('sha-toolbar-fixed', { 'opened-sidebar': isExpanded, 'closed-sidebar': !isExpanded })}
+          />
           <SidebarContainer
             leftSidebarProps={
               readOnly

diff --git a/shesha-reactjs/src/components/formDesigner/styles/index.less b/shesha-reactjs/src/components/formDesigner/styles/index.less
@@ -47,9 +47,15 @@
     &.sha-toolbar-fixed {
       position: fixed;
       z-index: 1;
-      width: 100%;
       top: 100px;
-      width: calc(100% - 58px);
+
+      &.opened-sidebar {
+        width: calc(100% - 248px);
+      }
+
+      &.closed-sidebar {
+        width: calc(100% - 58px);
+      }
     }
 
     .sha-designer-toolbar-left {