[UI]: Make sidebards resizable and add local persistence#1098
[UI]: Make sidebards resizable and add local persistence#1098banana-three-join wants to merge 1 commit into
Conversation
Signed-off-by: Lenox Wiltshire <lenoxwiltshire@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 resizable left and right sidebars for the documentation layout, saving the user's preferred widths in localStorage and applying them on page load. The review feedback highlights several important improvements: validating and parsing localStorage values to prevent potential CSS injection, moving the width-loading script to the <head> and removing the defer attribute to prevent layout shifts (FOUC), and adding fallback values in the resizer script to handle cases where CSS custom properties fail to parse as integers.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| {{ $resizerScript := resources.Get "js/sidebar-load-width.js" | minify | fingerprint }} | ||
| <script src="{{ $resizerScript.RelPermalink }}" defer></script> No newline at end of file |
There was a problem hiding this comment.
To prevent a Flicker of Unstyled Content (FOUC) or layout shift, the sidebar widths should be loaded and applied synchronously before the page starts rendering. Removing the defer attribute and moving the {{ partial "load-sidebars-width.html" . }} call to the <head> of the document (e.g., in layouts/docs/baseof.html or layouts/partials/head.html) ensures that the saved widths are applied immediately, avoiding any visual jump.
| {{ $resizerScript := resources.Get "js/sidebar-load-width.js" | minify | fingerprint }} | |
| <script src="{{ $resizerScript.RelPermalink }}" defer></script> | |
| {{ $resizerScript := resources.Get "js/sidebar-load-width.js" | minify | fingerprint }} | |
| <script src="{{ $resizerScript.RelPermalink }}"></script> |
| {{ block "main" . }}{{ end }} | ||
| </main> | ||
|
|
||
| {{ partial "load-sidebars-width.html" . }} |
There was a problem hiding this comment.
This partial should be removed from the body and placed inside the <head> element (e.g., right after {{ partial "head.html" . }}) to ensure the saved sidebar widths are loaded and applied before the page is rendered, preventing layout shift.
|
🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-1098/
|
|
@banana-three-join Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
2 participants
Notes for Reviewers
This PR fixes #1039
Behavior showcase:
https://www.loom.com/share/98269b5657e34a9dab9b5ae2613e2954
Signed commits