Feature: pages sidebar collapsable and pin functionality in preview/release mode

frontend/src/Editor/Viewer.jsx

@@ -67,6 +67,8 @@ class ViewerComponent extends React.Component {
       isAppLoaded: false,
       pages: {},
       homepage: null,
+      isSidebarPinned: localStorage.getItem('isPinned') === 'false' ? false : true,
+      isSidebarHovered: false,
     };
   }
 
@@ -550,6 +552,8 @@ class ViewerComponent extends React.Component {
     );
   };
 
+  setIsSidebarPinned = () => this.setState({ isSidebarPinned: !this.state.isSidebarPinned });
+
   handleEvent = (eventName, events, options) => {
     return onEvent(this.getViewerRef(), eventName, events, options, 'view');
   };
@@ -579,6 +583,7 @@ class ViewerComponent extends React.Component {
       defaultComponentStateComputed,
       dataQueries,
       canvasWidth,
+      isSidebarPinned,
     } = this.state;
 
     const currentCanvasWidth = canvasWidth;
@@ -677,15 +682,19 @@ class ViewerComponent extends React.Component {
                         currentPageId={this.state?.currentPageId ?? this.state.appDefinition?.homePageId}
                         switchPage={this.switchPage}
                         darkMode={this.props.darkMode}
+                        isSidebarPinned={isSidebarPinned}
+                        setIsSidebarPinned={this.setIsSidebarPinned}
                       />
                     )}
                     <div
-                      className="flex-grow-1 d-flex justify-content-center"
+                      className={cx('flex-grow-1 d-flex justify-content-center canvas-box', {
+                        close: !isSidebarPinned,
+                      })}
                       style={{
                         backgroundColor: isMobilePreviewMode ? '#ACB2B9' : 'unset',
                         marginLeft:
                           appDefinition?.showViewerNavigation && this.props.currentLayout !== 'mobile'
-                            ? '200px'
+                            ? '220px'
                             : 'auto',
                       }}
                     >

frontend/src/Editor/Viewer/ViewerSidebarNavigation.jsx

@@ -2,16 +2,30 @@ import React from 'react';
 import _ from 'lodash';
 // eslint-disable-next-line import/no-unresolved
 import FolderList from '@/_ui/FolderList/FolderList';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import classNames from 'classnames';
 
 const APP_HEADER_HEIGHT = 47;
 
-export const ViewerSidebarNavigation = ({ isMobileDevice, pages, currentPageId, switchPage, darkMode, showHeader }) => {
+export const ViewerSidebarNavigation = ({
+  isMobileDevice,
+  pages,
+  currentPageId,
+  switchPage,
+  darkMode,
+  showHeader,
+  isSidebarPinned,
+  setIsSidebarPinned,
+}) => {
   if (isMobileDevice) {
     return null;
   }
   return (
     <div
-      className={`navigation-area overflow-y-auto`}
+      className={classNames('navigation-area', {
+        close: !isSidebarPinned,
+        'sidebar-overlay': !isSidebarPinned,
+      })}
       style={{
         width: 200,
         position: 'fixed',
@@ -20,20 +34,34 @@ export const ViewerSidebarNavigation = ({ isMobileDevice, pages, currentPageId,
         bottom: '0px',
       }}
     >
-      <div className="page-handler-wrapper">
-        {pages.map((page) =>
-          page.hidden || page.disabled ? null : (
-            <FolderList
-              key={page.handle}
-              onClick={() => switchPage(page?.id)}
-              selectedItem={page?.id === currentPageId}
-            >
-              <span data-cy={`pages-name-${String(page?.name).toLowerCase()}`} className="mx-3 text-wrap">
-                {_.truncate(page?.name, { length: 18 })}
-              </span>
-            </FolderList>
-          )
-        )}
+      <div className="position-relative">
+        <ButtonSolid
+          onClick={() => {
+            setIsSidebarPinned();
+          }}
+          as="a"
+          variant="tertiary"
+          className="left-sidebar-header-btn pin"
+          fill={`var(--slate12)`}
+          darkMode={darkMode}
+          leftIcon={isSidebarPinned ? 'unpin' : 'pin'}
+          iconWidth="14"
+        ></ButtonSolid>
+        <div className="page-handler-wrapper">
+          {pages.map((page) =>
+            page.hidden || page.disabled ? null : (
+              <FolderList
+                key={page.handle}
+                onClick={() => switchPage(page?.id)}
+                selectedItem={page?.id === currentPageId}
+              >
+                <span data-cy={`pages-name-${String(page?.name).toLowerCase()}`} className="mx-3 text-wrap page-name">
+                  {_.truncate(page?.name, { length: 18 })}
+                </span>
+              </FolderList>
+            )
+          )}
+        </div>
       </div>
     </div>
   );

frontend/src/_styles/pages-sidebar.scss

@@ -0,0 +1,50 @@
+:root {
+    --tran-01: all 0.3s ease, background-color 0s;
+}
+
+.viewer {
+    .page-name, .navigation-area, .tj-list-item, .canvas-box {
+        transition: var(--tran-01);
+    }
+
+    .navigation-area {
+        z-index: 2;
+        border-right: 1px solid var(--slate6);
+
+        .tj-list-item {
+            width: 96%;
+        }
+
+        &.close {
+            transform: translateX(-90%);  
+
+            .tj-list-item {
+                opacity: 0;
+                display: none;
+            }
+        }
+        .pin {
+            position: absolute;
+            right: -30px;
+            top: 3px;
+        }
+
+        &.sidebar-overlay {
+            &:hover:not(:has(.pin:hover)) {
+                transform: translateX(0%);  
+                box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+
+                .tj-list-item {
+                    opacity: 1;
+                    display: unset;
+                }
+            }
+        }
+    }
+
+    .canvas-box {
+        &.close {
+            margin-left: 50px !important;
+        }
+    }
+}

frontend/src/_styles/theme.scss

@@ -12,6 +12,7 @@
 @import "./ui-operations.scss";
 @import 'react-loading-skeleton/dist/skeleton.css';
 @import './table-component.scss';
+@import './pages-sidebar.scss';
 
 /* ibm-plex-sans-100 - latin */
 @font-face {