fix: Adjust sidebar resizing and responsiveness (#3639)

ElinorW · web-flow · commit e9bb67410452 · 2025-02-20T19:33:48.000+03:00
* adjust sidebar expand and collapse

* adjust resize handler

* adjust sidebar tabclick behaviour

* remove unused values

* adjust mobile view

* update sidebar file

* fix errors

* fix overflow

* remove console statement
diff --git a/src/app/services/slices/sidebar-properties.slice.ts b/src/app/services/slices/sidebar-properties.slice.ts
@@ -15,39 +15,30 @@ const sidebarPropertiesSlice = createSlice({
   name: 'sidebarProperties',
   initialState,
   reducers: {
-    toggleSidebar: (state, action: PayloadAction<ISidebarProps>) => {
-      state.showSidebar = action.payload.showSidebar;
-      state.mobileScreen = action.payload.mobileScreen;
+    toggleSidebar: (state, action: PayloadAction<Partial<ISidebarProps>>) => {
+      state.showSidebar = action.payload.showSidebar !== undefined ? action.payload.showSidebar : !state.showSidebar;
+      state.mobileScreen = action.payload.mobileScreen !== undefined ? action.payload.mobileScreen : state.mobileScreen;
     }
   },
   extraReducers: (builder) => {
     builder
       .addCase(QUERY_GRAPH_RUNNING, (state) => {
         if (state.mobileScreen) {
-          return {
-            ...state,
-            showSidebar: false
-          }
+          state.showSidebar = false;
         }
       })
       .addCase(SET_SAMPLE_QUERY_SUCCESS, (state) => {
         if (state.mobileScreen) {
-          return {
-            ...state,
-            showSidebar: false
-          }
+          state.showSidebar = false;
         }
       })
       .addCase(QUERY_GRAPH_SUCCESS, (state) => {
         if (state.mobileScreen) {
-          return {
-            ...state,
-            showSidebar: false
-          }
+          state.showSidebar = false;
         }
-      })
+      });
   }
-})
+});
 
 export const { toggleSidebar } = sidebarPropertiesSlice.actions
 export default sidebarPropertiesSlice.reducer;
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -34,7 +34,6 @@ import { substituteTokens } from '../utils/token-helpers';
 import { parse, ParsedMessageResult } from './query-runner/util/iframe-message-parser';
 import { Layout } from './layout/Layout';
 import { KeyboardCopyEvent } from './common/copy-button/KeyboardCopyEvent';
-import { useDetectMobileScreen } from '../utils/useDetectMobileScreen';
 export interface IAppProps {
   theme?: ITheme;
   styles?: object;
diff --git a/src/app/views/layout/Layout.tsx b/src/app/views/layout/Layout.tsx
@@ -5,7 +5,7 @@ import CollectionPermissionsProvider from '../../services/context/collection-per
 import { PopupsProvider } from '../../services/context/popups-context';
 import { ValidationProvider } from '../../services/context/validation-context/ValidationProvider';
 import { setSampleQuery } from '../../services/slices/sample-query.slice';
-import { toggleSidebar } from '../../services/slices/sidebar-properties.slice'; // Import sidebar action
+import { toggleSidebar } from '../../services/slices/sidebar-properties.slice';
 import { translateMessage } from '../../utils/translate-messages';
 import { StatusMessages, TermsOfUseMessage } from '../app-sections';
 import Notification from '../common/banners/Notification';
@@ -31,11 +31,13 @@ export const Layout = (props: LayoutProps) => {
   const dispatch = useAppDispatch();
   const sampleQuery = useAppSelector((state) => state.sampleQuery);
   const { mobileScreen, showSidebar } = useAppSelector((state) => state.sidebarProperties);
+  const [initialSidebarWidth, setInitialSidebarWidth] = useState(456);
+  const [sidebarElement, setSidebarElement] = useState<HTMLElement | null>(null);
 
   const {
     handleRef: sidebarHandleRef,
     wrapperRef: sidebarWrapperRef,
-    elementRef: sidebarElementRef,
+    elementRef: storeSidebarElement,
     setValue: setSidebarColumnSize
   } = useResizeHandle({
     variableName: SIDEBAR_SIZE_CSS_VAR,
@@ -53,68 +55,120 @@ export const Layout = (props: LayoutProps) => {
   }, [sampleBody]);
 
   useEffect(() => {
-    if (mobileScreen) {
-      dispatch(toggleSidebar({ showSidebar: false, mobileScreen: true }));
+    if (!mobileScreen) {
+      setSidebarColumnSize(456);
+      setInitialSidebarWidth(456);
+    } else {
       setSidebarColumnSize(0);
     }
-  }, [mobileScreen, dispatch]);
+  }, [mobileScreen]);
+
 
   const handleOnEditorChange = (value?: string) => {
     setSampleBody(value!);
   };
 
   const handleToggleSelect = (toggled: boolean) => {
-    setSidebarColumnSize(toggled ? 456 : 5);
+    if (mobileScreen) {
+      dispatch(toggleSidebar({ showSidebar: toggled, mobileScreen: true }));
+      setSidebarColumnSize(toggled ? window.innerWidth : 0);
+    } else {
+      if (toggled) {
+        setSidebarColumnSize(initialSidebarWidth > 456 ? initialSidebarWidth : 456);
+      } else {
+        setSidebarColumnSize(48);
+      }
+    }
   };
 
-  const resetSidebarArea = () => {
-    setSidebarColumnSize(456);
+  const handleResizeStart = (event: React.MouseEvent) => {
+    event.preventDefault();
+
+    if (!sidebarElement) {return;}
+
+    const startX = event.clientX;
+    const startWidth = parseInt(getComputedStyle(sidebarElement).width, 10);
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const newWidth = startWidth + (moveEvent.clientX - startX);
+      updateSidebarSize(newWidth);
+    };
+
+    const onMouseUp = () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
   };
 
-  return (
-    <PopupsProvider>
-      <div className={layoutStyles.container}>
-        <MainHeader />
-        <div id='content-ref' className={mergeClasses(layoutStyles.content, resizeStyles)} ref={sidebarWrapperRef}>
-          {showSidebar && (
-            <div id='sidebar-ref' className={layoutStyles.sidebar} ref={sidebarElementRef}>
-              <Sidebar handleToggleSelect={handleToggleSelect} />
-              <LayoutResizeHandler position='end' ref={sidebarHandleRef} onDoubleClick={resetSidebarArea} />
-            </div>
-          )}
-          <div id='main-content' className={layoutStyles.mainContent}>
-            <div style={{ margin: '0 10px' }}>
-              <Notification
-                header={translateMessage('Banner notification 1 header')}
-                content={translateMessage('Banner notification 1 content')}
-                link={translateMessage('Banner notification 1 link')}
-                linkText={translateMessage('Banner notification 1 link text')}
-              />
-            </div>
 
-            <ValidationProvider>
+  const updateSidebarSize = (newSize: number) => {
+    const minSize = 48;
+    const maxSize = window.innerWidth * 0.5;
+
+    const finalSize = Math.max(minSize, Math.min(maxSize, newSize));
+
+    setSidebarColumnSize(finalSize);
+
+    if (finalSize > 48) {
+      setInitialSidebarWidth(finalSize);
+    }
+  };
+
+  return (
+    <>
+      <PopupsProvider>
+        <div className={layoutStyles.container}>
+          <MainHeader />
+          <div id='content-ref' className={mergeClasses(layoutStyles.content, resizeStyles)} ref={sidebarWrapperRef}>
+            {showSidebar && (
+              <div id='sidebar-ref' className={layoutStyles.sidebar} ref={storeSidebarElement}>
+                <Sidebar handleToggleSelect={handleToggleSelect} />
+                {!mobileScreen && (
+                  <LayoutResizeHandler
+                    position="end"
+                    ref={sidebarHandleRef}
+                    onDoubleClick={() => updateSidebarSize(456)}
+                    onMouseDown={handleResizeStart}
+                  />
+                )}
+              </div>
+            )}
+            <div id='main-content' className={layoutStyles.mainContent}>
               <div style={{ margin: '0 10px' }}>
-                <QueryRunner onSelectVerb={props.handleSelectVerb} />
+                <Notification
+                  header={translateMessage('Banner notification 1 header')}
+                  content={translateMessage('Banner notification 1 content')}
+                  link={translateMessage('Banner notification 1 link')}
+                  linkText={translateMessage('Banner notification 1 link text')}
+                />
               </div>
-              <div id='request-response-area' className={layoutStyles.requestResponseArea}>
-                <div id='request-area' className={layoutStyles.requestArea}>
-                  <Request handleOnEditorChange={handleOnEditorChange} sampleQuery={sampleQuery} />
-                </div>
+              <ValidationProvider>
                 <div style={{ margin: '0 10px' }}>
-                  <StatusMessages />
+                  <QueryRunner onSelectVerb={props.handleSelectVerb} />
                 </div>
-                <div id='response-area' className={layoutStyles.responseArea}>
-                  <QueryResponse />
+                <div id='request-response-area' className={layoutStyles.requestResponseArea}>
+                  <div id='request-area' className={layoutStyles.requestArea}>
+                    <Request handleOnEditorChange={handleOnEditorChange} sampleQuery={sampleQuery} />
+                  </div>
+                  <div style={{ margin: '0 10px' }}>
+                    <StatusMessages />
+                  </div>
+                  <div id='response-area' className={layoutStyles.responseArea}>
+                    <QueryResponse />
+                  </div>
                 </div>
-              </div>
-            </ValidationProvider>
+              </ValidationProvider>
+            </div>
           </div>
+          <TermsOfUseMessage />
         </div>
-        <TermsOfUseMessage />
-      </div>
-      <CollectionPermissionsProvider>
-        <PopupsWrapper />
-      </CollectionPermissionsProvider>
-    </PopupsProvider>
+        <CollectionPermissionsProvider>
+          <PopupsWrapper />
+        </CollectionPermissionsProvider>
+      </PopupsProvider>
+    </>
   );
 };
diff --git a/src/app/views/layout/LayoutResizeHandler.tsx b/src/app/views/layout/LayoutResizeHandler.tsx
@@ -1,9 +1,11 @@
 import { makeResetStyles, tokens, useFluent } from '@fluentui/react-components';
 import * as React from 'react';
+import { useAppSelector } from '../../../store';
 
 interface HandleProps {
   position: 'start' | 'end' | 'top' | 'bottom';
   onDoubleClick?: () => void;
+  onMouseDown?: (event: React.MouseEvent) => void;
 }
 
 const useHoverStyles = makeResetStyles({
@@ -13,16 +15,21 @@ const useHoverStyles = makeResetStyles({
 })
 export const LayoutResizeHandler = React.forwardRef<HTMLDivElement, HandleProps>(
   (props, ref) => {
-    const { position, ...rest } = props;
+    const { position,onMouseDown, ...rest } = props;
     const { dir } = useFluent();
-    const hoverStyles = useHoverStyles()
+    const hoverStyles = useHoverStyles();
+    const mobileScreen  = useAppSelector((state) => state.sidebarProperties.mobileScreen);
 
     const handleClick = (event: React.MouseEvent) => {
       if (event.detail === 2) {
         props.onDoubleClick?.();
       }
     };
 
+    if (mobileScreen) {
+      return null;
+    }
+
     const positioningAttr =
       dir === 'ltr'
         ? position === 'start'
@@ -38,7 +45,7 @@ export const LayoutResizeHandler = React.forwardRef<HTMLDivElement, HandleProps>
           [positioningAttr]: '-5px',
           top: '50%',
           transform: 'translateY(-50%)',
-          width: '3px',
+          width: '6px',
           height: '100%',
           cursor: 'col-resize'
         }
@@ -56,6 +63,7 @@ export const LayoutResizeHandler = React.forwardRef<HTMLDivElement, HandleProps>
         {...rest}
         ref={ref}
         onClick={handleClick}
+        onMouseDown={onMouseDown}
         tabIndex={0}
         className={hoverStyles}
         style={{
diff --git a/src/app/views/layout/LayoutStyles.tsx b/src/app/views/layout/LayoutStyles.tsx
@@ -11,24 +11,42 @@ export const useLayoutStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     padding: tokens.spacingHorizontalS,
-    height: '100vh'
+    height: '100vh',
+    overflow: 'hidden'
   },
   content: {
     display: 'flex',
-    overflowY: 'hidden'
+    flex: 1,
+    overflowY: 'hidden',
+    minWidth: 0
   },
   sidebar: {
     flex: '0 0 auto',
-    flexBasis: `clamp(min(29%, var(${SIDEBAR_SIZE_CSS_VAR})), var(${SIDEBAR_SIZE_CSS_VAR}), 60%)`,
+    flexBasis: `clamp(48px, var(${SIDEBAR_SIZE_CSS_VAR}), 50vw)`,
+    maxWidth: '50vw',
+    minWidth: '48px',
     position: 'relative',
-    height: 'calc(100vh - 98px)'
+    height: 'calc(100vh - 98px)',
+    overflow: 'hidden',
+    transition: 'flex-basis 0.2s ease-in-out',
+
+    '@media (max-width: 768px)': {
+      flexBasis: '100vw',
+      maxWidth: '100vw',
+      minWidth: '100vw',
+      position: 'absolute',
+      left: 0,
+      zIndex: 1000,
+      backgroundColor: 'white'
+    }
   },
   mainContent: {
     flex: '1 1 auto',
     display: 'flex',
     flexDirection: 'column',
-    minHeight: '300px',
-    height: 'calc(100vh - 120px)'
+    minWidth: '300px',
+    height: 'calc(100vh - 98px)',
+    overflow: 'hidden'
   },
   requestResponseArea: {
     flex: '1',
@@ -41,7 +59,7 @@ export const useLayoutStyles = makeStyles({
     flex: '1',
     display: 'flex',
     flexDirection: 'column',
-    maxHeight: '55%',
+    maxHeight: '60%',
     overflow: 'hidden',
     borderRadius: tokens.borderRadiusMedium,
     padding: tokens.spacingHorizontalS
@@ -50,7 +68,7 @@ export const useLayoutStyles = makeStyles({
     flex: '1',
     display: 'flex',
     flexDirection: 'column',
-    maxHeight: '37%',
+    maxHeight: '40%',
     overflow: 'hidden',
     borderRadius: tokens.borderRadiusMedium,
     padding: tokens.spacingHorizontalS
diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles({
     display: 'none',
     cursor: 'pointer',
 
-    '@media (max-width: 480px)': {
+    '@media (max-width: 768px)': {
       display: 'block'
     }
   }
@@ -49,7 +49,7 @@ const MainHeader = ()=>{
   const  mobileScreen  = useAppSelector((state) => state.sidebarProperties.mobileScreen);
 
   const handleSidebarToggle = () => {
-    dispatch(toggleSidebar({ showSidebar: true, mobileScreen: true }));
+    dispatch(toggleSidebar({ mobileScreen: true }));
   };
 
   return (
diff --git a/src/app/views/query-response/pivot-items/pivot-item.tsx b/src/app/views/query-response/pivot-items/pivot-item.tsx
@@ -124,7 +124,7 @@ export const GetPivotItems = () => {
   return (
     <div className={styles.container}>
       {mobileScreen ? (
-        <Overflow minimumVisible={1}>
+        <Overflow minimumVisible={2}>
           <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} size='small'>
             {tabs.map((tab) => (
               <OverflowItem key={tab.id} id={tab.id} priority={tab.id === selectedValue ? 2 : 1}>
diff --git a/src/app/views/query-runner/query-input/QueryInput.tsx b/src/app/views/query-runner/query-input/QueryInput.tsx
diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ const useStyles = makeStyles({`
`37`	`37`	`display: 'none',`
`38`	`38`	`cursor: 'pointer',`
`39`	`39`
`40`		`- '@media (max-width: 480px)': {`
	`40`	`+ '@media (max-width: 768px)': {`
`41`	`41`	`display: 'block'`
`42`	`42`	`}`
`43`	`43`	`}`
`@@ -49,7 +49,7 @@ const MainHeader = ()=>{`
`49`	`49`	`const mobileScreen = useAppSelector((state) => state.sidebarProperties.mobileScreen);`
`50`	`50`
`51`	`51`	`const handleSidebarToggle = () => {`
`52`		`- dispatch(toggleSidebar({ showSidebar: true, mobileScreen: true }));`
	`52`	`+ dispatch(toggleSidebar({ mobileScreen: true }));`
`53`	`53`	`};`
`54`	`54`
`55`	`55`	`return (`