refactor: build the dashboard sidebar on frappe-ui's Sidebar - #708
Merged
surajshetty3416 merged 5 commits intoAug 3, 2026
Conversation
Drops the hand-rolled markup for Sidebar, SidebarHeader, SidebarItem and SidebarLabel: the app switcher, active state, collapse behaviour and the suffix zone that holds a folder's options menu all come from the component now. A png import declaration comes with it, since the header takes its logo as a prop and only template src attributes get resolved by the bundler.
Contributor
Confidence Score: 5/5The PR appears safe to merge. No blocking failure remains within the eligible follow-up-review scope. Reviews (4): Last reviewed commit: "fix: add padding to SidebarHeader in Das..." | Re-trigger Greptile |
Rows were bleeding to both edges: the composition API leaves the scroll region to the app, and the component's own example pads it so an active row's shadow is not clipped. Use ScrollArea the same way, and shape the new-folder button like the example's.
They sat flush against each other, so a hovered row ran straight into the active one above it.
The section label sat right under the last nav row, and without a right border the sidebar ran into the content area.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #708 +/- ##
========================================
Coverage 59.59% 59.59%
========================================
Files 35 35
Lines 4413 4413
========================================
Hits 2630 2630
Misses 1783 1783 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces the hand-rolled dashboard sidebar with frappe-ui's Sidebar, using the composition API (
Sidebar+SidebarHeader+SidebarItem+SidebarLabel).What the component now owns: the app-switcher header, row layout and active state, collapse behaviour (auto below
sm, where the old one just disappeared underlg), and the trailing suffix zone — which is what a folder's…menu needs, since a Dropdown cannot be nested inside the row's button.No styling of our own is layered on top; the sidebar renders bare as the component defines it.
One extra: the header takes its logo as a prop, and only
srcattributes in templates get rewritten by the bundler, so the logo is imported (with a*.pngmodule declaration) instead of passed as a literal path.Verified on the dashboard, 13/13: 240px width, full height, All Pages / Settings / Folders label / folder rows / version footer all present, clicking a folder makes it active and filters the grid, the active folder exposes its options menu, All Pages returns to active, the app menu opens with New Page / Toggle Theme / Help, and the logo resolves and loads.