Repository navigation
feat(docs): redesign sidebar and top bar to be minimal Vercel-style - #6145
Merged
Merged
Conversation
- Replace bordered accordion sidebar (icons, chevrons, row borders) with static muted group labels and quiet rounded links - Input-style search box with cmd-K chip, pinned above scrolling nav - Bold group headers over muted items for clear hierarchy; active page marked by a subtle bg-accent pill at regular weight - Remove top bar borders; sticky header and sidebar scroller now use the desktop app's OverflowFadeContainer fade-out treatment instead - Drop now-unused framer-motion dep; add @superset/ui
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (7)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughThe docs app replaces animated, collapsible sidebar sections with static links in a fading scroll container. It removes sidebar icons, adds ChangesDocumentation navigation
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Greptile SummaryThe PR simplifies the documentation navigation and removes the obsolete accordion dependency.
Confidence Score: 5/5The PR appears safe to merge with no actionable defects identified. The new shared component import is valid, the sidebar retains a functional fixed-height scrolling layout, current metadata satisfies the unchanged separator convention, and the removed link prop was unused.
|
| Filename | Overview |
|---|---|
| apps/docs/src/app/(docs)/components/Sidebar/Sidebar.tsx | Replaces animated accordion navigation with static groups in a correctly sized shared overflow-fade scroller. |
| apps/docs/src/app/(docs)/components/Sidebar/components/SidebarContent/SidebarContent.tsx | Removes legacy icon mapping while preserving the existing separator format used by all current documentation groups. |
| apps/docs/src/components/AsideLink/AsideLink.tsx | Removes an unused prop and updates link styling without changing active-path behavior. |
| apps/docs/src/app/components/NavigationBar/NavigationBar.tsx | Replaces hard navigation borders with a non-interactive gradient fade. |
| apps/docs/src/app/components/NavigationBar/components/NavigationMobile/NavigationMobile.tsx | Aligns mobile navigation group and item styling with the redesigned desktop sidebar. |
| apps/docs/package.json | Adds the shared UI package needed by the sidebar and removes the no-longer-used animation dependency. |
Reviews (1): Last reviewed commit: "feat(docs): redesign sidebar and top bar..." | Re-trigger Greptile
Contributor
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 8 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="apps/docs/src/app/(docs)/components/Sidebar/Sidebar.tsx">
<violation number="1" location="apps/docs/src/app/(docs)/components/Sidebar/Sidebar.tsx:28">
P3: The <kbd> hint hardcodes ⌘K, which mislabels the shortcut for Windows/Linux users where the search command is Ctrl+K. Consider showing the platform-appropriate modifier (e.g., detect Meta vs ctrl and render ⌘ or Ctrl) so the hint matches the real binding on every OS.</violation>
</file>
Architecture diagram
sequenceDiagram
participant Client as Browser
participant Navbar as NavigationBar (Sticky Top)
participant Sidebar as Sidebar (Desktop)
participant MobileNav as NavigationMobile
participant OverflowFade as OverflowFadeContainer
participant FumaSearch as Fumadocs Search Dialog
participant AsideLink as AsideLink Component
participant Router as Next.js Router
Note over Client,Router: Documentation Page Load
Client->>Navbar: Renders sticky header
Navbar->>Navbar: Gradient fade strip below header (always-on CSS)
Note over Navbar: No scroll listeners needed
Client->>Sidebar: Renders fixed sidebar
Sidebar->>Sidebar: Static groups (all expanded, no accordion state)
alt User clicks search button
Sidebar->>FumaSearch: setOpenSearch(true) on button click
Note over Sidebar: ⌘K binding unchanged
FumaSearch-->>Client: Opens search dialog
end
Note over Sidebar: Group labels always visible, no collapse/expand
Sidebar->>OverflowFade: Wrap scrollable list with fadeEdges=[top,bottom]
OverflowFade->>OverflowFade: Apply mask-image for fade at top and bottom
Note over OverflowFade: Items dissolve near search box and bottom edge
Sidebar->>Sidebar: Parse sections from meta.json separator format
Note over Sidebar: Strips legacy "<Icon> <Title>" prefix, uses title only
Sidebar->>AsideLink: Render each navigation item
AsideLink->>Router: Check if current path matches href
alt Active page
AsideLink->>AsideLink: Apply bg-accent + text-accent-foreground pill
else Inactive page
AsideLink->>AsideLink: Apply muted foreground, no background
end
Client->>MobileNav: Opens mobile nav (small viewport)
MobileNav->>MobileNav: Render static group labels (no icons)
MobileNav->>MobileNav: Render items with muted links
Note over MobileNav: Same AsideLink styling, no framer-motion animations
Note over Client,MobileNav: No longer uses framer-motion for any transitions
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| <p className="text-sm">Search documentation...</p> | ||
| <Search className="size-3.5 shrink-0" /> | ||
| <span className="grow truncate text-left">Search docs...</span> | ||
| <kbd className="rounded border border-border px-1 py-px text-[11px] font-medium text-muted-foreground"> |
Contributor
There was a problem hiding this comment.
P3: The hint hardcodes ⌘K, which mislabels the shortcut for Windows/Linux users where the search command is Ctrl+K. Consider showing the platform-appropriate modifier (e.g., detect Meta vs ctrl and render ⌘ or Ctrl) so the hint matches the real binding on every OS.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/docs/src/app/(docs)/components/Sidebar/Sidebar.tsx, line 28:
<comment>The <kbd> hint hardcodes ⌘K, which mislabels the shortcut for Windows/Linux users where the search command is Ctrl+K. Consider showing the platform-appropriate modifier (e.g., detect Meta vs ctrl and render ⌘ or Ctrl) so the hint matches the real binding on every OS.</comment>
<file context>
@@ -1,113 +1,58 @@
- <p className="text-sm">Search documentation...</p>
+ <Search className="size-3.5 shrink-0" />
+ <span className="grow truncate text-left">Search docs...</span>
+ <kbd className="rounded border border-border px-1 py-px text-[11px] font-medium text-muted-foreground">
+ ⌘K
+ </kbd>
</file context>
This was referenced Aug 5, 2026
This branch was previously deployed
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
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.
Summary
framer-motionfrom the docs app (only used by the old accordion) and add@superset/uifor the sharedOverflowFadeContainer.Why / Context
The old sidebar was visually heavy — every section header was a bordered collapsible button with an icon and animated chevron, and rows had full-width hover blocks. This restyles it to match Vercel's docs: whitespace-separated groups, clear type hierarchy (medium-weight headers over muted items), and an active page marked by a subtle
bg-accentpill at regular weight.How It Works
Sidebar.tsxdrops the collapse state/framer-motion entirely; groups are always expanded (six flat groups didn't need an accordion). The search stays pinned while the list scrolls insideOverflowFadeContainer(fadeEdges: top+bottom) — the same component the desktopDashboardSidebaruses, so items dissolve at the edges instead of clipping.background → transparentgradient strip below the header. No scroll listener needed; it's invisible at the top of the page.SidebarContent.tsxkeeps parsing the"<Icon> <Title>"separator format frommeta.json(strips the legacy icon prefix), so no content changes were needed. Mobile nav (NavigationMobile) got the same label/item treatment.Manual QA Checklist
Verified via headless Chromium against the dev server, light + dark, at desktop viewport:
Not covered: real mobile-device pass on
NavigationMobile(styling-only change, same markup structure).Testing
bun run typecheck(docs app)bun run lint(exit 0, warnings-as-errors)Design Decisions
mask-imageonly works on a scroll container, and the docs page scrolls the window; an always-on gradient below the sticky header produces the identical fade with zero JS.Summary by cubic
Redesigned the docs sidebar and sticky top bar to a minimal Vercel-style nav with static groups, a simple ⌘K search, and fade-out scroll edges. This simplifies navigation, removes heavy borders/animations, and improves readability.
New Features
@superset/ui’sOverflowFadeContainer.AsideLink.Dependencies
framer-motion; added@superset/ui.Written for commit b8cca84. Summary will update on new commits.
Summary by CodeRabbit