fix: review changes

ToolJet · May 9, 2024 · d5a955f · d5a955f
1 parent 2962d1a
commit d5a955f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx
@@ -67,7 +67,7 @@ class ViewerComponent extends React.Component {
  isAppLoaded: false,
  pages: {},
  homepage: null,
- isSidebarPinned: localStorage.getItem('isPinned') === 'false' ? false : true,
+ isSidebarPinned: localStorage.getItem('isPagesSidebarPinned') === 'false' ? false : true,
  isSidebarHovered: false,
  };
  }
@@ -552,7 +552,10 @@ class ViewerComponent extends React.Component {
  );
  };
 
- setIsSidebarPinned = () => this.setState({ isSidebarPinned: !this.state.isSidebarPinned });
+ toggleSidebarPinned = () => {
+ this.setState({ isSidebarPinned: !this.state.isSidebarPinned });
+ localStorage.setItem('isPagesSidebarPinned', JSON.stringify(!this.state.isSidebarPinned));
+ };
 
  handleEvent = (eventName, events, options) => {
  return onEvent(this.getViewerRef(), eventName, events, options, 'view');
@@ -683,7 +686,7 @@ class ViewerComponent extends React.Component {
  switchPage={this.switchPage}
  darkMode={this.props.darkMode}
  isSidebarPinned={isSidebarPinned}
- setIsSidebarPinned={this.setIsSidebarPinned}
+ toggleSidebarPinned={this.toggleSidebarPinned}
  />
  )}
  <div

diff --git a/frontend/src/Editor/Viewer/ViewerSidebarNavigation.jsx b/frontend/src/Editor/Viewer/ViewerSidebarNavigation.jsx
@@ -15,7 +15,7 @@ export const ViewerSidebarNavigation = ({
  darkMode,
  showHeader,
  isSidebarPinned,
- setIsSidebarPinned,
+ toggleSidebarPinned,
 }) => {
  if (isMobileDevice) {
  return null;
@@ -37,7 +37,7 @@ export const ViewerSidebarNavigation = ({
  <div className="position-relative">
  <ButtonSolid
  onClick={() => {
- setIsSidebarPinned();
+ toggleSidebarPinned();
  }}
  as="a"
  variant="tertiary"

diff --git a/frontend/src/_styles/pages-sidebar.scss b/frontend/src/_styles/pages-sidebar.scss
@@ -29,16 +29,14 @@
  top: 3px;
  }
 
- &.sidebar-overlay {
- &:hover:not(:has(.pin:hover)) {
+ &.sidebar-overlay: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;
  }
- }
  }
  }