feat(ux): add resizable side panels with local storage preference#1053
feat(ux): add resizable side panels with local storage preference#1053yashnagar67 wants to merge 2 commits into
Conversation
Implemented a draggable resizer for the sidebar that saves user width preferences to localStorage. Disabled on mobile breakpoints to preserve native responsive layouts. Fixes layer5io#1039. Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
Signed-off-by: yash nagar <nitwalababaji@gmail.com>
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a sidebar resizer feature, allowing users to manually adjust the width of the left sidebar. The implementation includes a new JavaScript file for handling mouse events and persistence via localStorage, along with corresponding SCSS styles for the resizer handle and layout constraints. Key feedback includes fixing a width calculation bug for centered layouts, removing a duplicate closing body tag in the HTML template, handling potential localStorage security errors, and removing redundant inline styles that are already defined in CSS.
| if (!isResizing) return; | ||
|
|
||
|
|
||
| const newWidth = e.clientX + "px"; |
There was a problem hiding this comment.
The width calculation using e.clientX assumes the sidebar starts at the left edge of the viewport (x=0). However, on larger screens, the layout is centered with margin: auto, meaning the sidebar has a left offset. This will cause the sidebar to jump or resize incorrectly when dragging starts. Using the element's bounding rectangle ensures the width is calculated correctly relative to its start position.
| const newWidth = e.clientX + "px"; | |
| const newWidth = (e.clientX - sidebar.getBoundingClientRect().left) + "px"; |
| </body> | ||
|
|
There was a problem hiding this comment.
A duplicate tag was accidentally introduced here. The original closing tag is still present on line 49.
| let isResizing = false; | ||
|
|
||
|
|
||
| const savedWidth = localStorage.getItem("leftSidebarWidth"); |
There was a problem hiding this comment.
Directly accessing localStorage can throw a SecurityError in certain browser configurations (e.g., private browsing mode, blocked cookies, or specific security policies). It is recommended to wrap these calls in a try...catch block or check for availability to prevent the script from crashing.
| if (savedWidth) { | ||
| sidebar.style.width = savedWidth; | ||
| sidebar.style.flex = "none"; | ||
| sidebar.style.maxWidth = "35vw"; |
There was a problem hiding this comment.
Hardcoding maxWidth = "35vw" in JavaScript is redundant because it is already defined in the SCSS file (_styles_project.scss). Removing this inline style ensures that the layout constraints are managed in a single place (CSS), making the code easier to maintain.
1 participant
This PR implements adjustable and resizable side panels for the documentation, significantly improving readability for long page titles.
Fixes: #1039
Changes Made:
Draggable Handle: Added a grab handle with a subtle grip icon (⋮) to the edge of the sidebar.
Persistent Preferences: Created assets/js/sidebar-resizer.js to handle drag events and save the user's preferred width to localStorage so it persists across page loads.
Reset Functionality: Users can double-click the handle to instantly reset the sidebar to its default width, accompanied by a smooth CSS transition.
Mobile-Safe: Wrapped the new styles in the @include media-breakpoint-up(md) mixin and added a JavaScript viewport check. This ensures the resizer is hidden and disabled on mobile screens (< 768px) to prevent breaking native responsive layouts.