feat(ui): enhance sidebar visuals and animations #172
Conversation
|
@ezhil56x is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces responsive sidebar behavior with mobile overlay support and animation enhancements. The layout conditionally renders an animated overlay sidebar on smaller screens using Framer Motion, while the main dashboard layout and color palette are updated to support this new responsive mode. Changes
Sequence DiagramsequenceDiagram
participant Screen as Screen Size
participant Layout as Dashboard Layout
participant Sidebar as Sidebar Component
participant AnimatePresence as AnimatePresence
Screen->>Layout: Render with showSidebar state
alt Desktop (Large Screen)
Layout->>Sidebar: Render static Sidebar (overlay=false)
Sidebar->>Sidebar: Display at desktop width
else Mobile (Small Screen)
Layout->>AnimatePresence: Conditionally render
alt showSidebar = true
AnimatePresence->>Sidebar: Mount animated Sidebar (overlay=true)
Sidebar->>Sidebar: Animate entry with motion.div
Sidebar->>Sidebar: Display at mobile width with overlay
else showSidebar = false
AnimatePresence->>Sidebar: Unmount with exit animation
end
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example:
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 |
|
|
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/dashboard/Sidebar.tsx (1)
44-73: Overlay + animation wiring looks good; fix mobile header bg class typoThe
overlayprop, width calculation (desktopWidth/mobileWidth), and animated container config are coherent for both desktop and mobile flows, and the fixed positioning for overlay mode is appropriate. One issue: the mobile header usesbg-ox-sideba(Line 75), which looks like a typo and won’t map to your configuredox-sidebarcolor, so the header background won’t get the intended styling.Consider:
- <div className="flex justify-between items-center h-16 px-4 border-b border-ox-header xl:hidden bg-ox-sideba"> + <div className="flex justify-between items-center h-16 px-4 border-b border-ox-header xl:hidden bg-ox-sidebar">Also applies to: 75-87
🧹 Nitpick comments (3)
apps/web/src/components/sidebar/SidebarItem.tsx (1)
18-25: Hover + group behavior is correct; consider reusing palette tokenThe
group+group-hoversetup for icon and label is correct and will synchronize hover states across the row. As a small follow-up, you might replacehover:bg-[#292929]with a named Tailwind token (e.g. a dedicated hover color next toox-sidebar) to keep colors centralized and easier to tweak later.Also applies to: 28-29
apps/web/src/components/dashboard/Sidebar.tsx (2)
111-152: Reduce duplication for “Opensox Pro” item via SidebarItemThe dedicated “Opensox Pro” CTA block (when not paid) mirrors the structure and hover behavior of
SidebarItemand reimplements the new group-hover pattern. To keep things DRY and consistent, you could reuseSidebarItemhere with the existingbadgeprop, e.g., passicon={<StarIcon ... />}andbadge={<OpensoxProBadge ... />}, and then adjust styles via props or a wrapper if needed.
186-259: Profile dropdown behavior is solid; consider small accessibility tweaksThe profile card + dropdown state management (including outside-click handling and closing on navigation/sign out) is sound and aligns with the new visual tokens. For better accessibility, you might add
role="button"andaria-expanded={open}(and optionally keyboard handlers) to the clickable profile container so assistive tech and keyboard users can interact with the menu more reliably.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/src/app/(main)/dashboard/layout.tsx(2 hunks)apps/web/src/components/dashboard/Sidebar.tsx(9 hunks)apps/web/src/components/sidebar/SidebarItem.tsx(1 hunks)apps/web/tailwind.config.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/web/src/app/(main)/dashboard/layout.tsx (1)
apps/web/src/components/dashboard/Sidebar.tsx (1)
Sidebar(44-158)
apps/web/src/components/dashboard/Sidebar.tsx (3)
apps/web/src/store/useShowSidebar.ts (1)
useShowSidebar(10-16)apps/web/src/components/ui/IconWrapper.tsx (1)
IconWrapper(10-22)apps/web/src/components/dashboard/ProfilePic.tsx (1)
ProfilePic(11-59)
🔇 Additional comments (2)
apps/web/tailwind.config.ts (1)
60-62: New sidebar/content/profile-card tokens look consistentThe added
ox-sidebar,ox-profile-card, andox-contenttokens are coherent with the updated sidebar/profile styling and keep the dark palette consistent. No issues from a Tailwind config standpoint.apps/web/src/app/(main)/dashboard/layout.tsx (1)
3-3: Responsive sidebar wiring with overlay looks correctDesktop and mobile sidebars are cleanly separated (
hidden xl:blockvsxl:hidden), and the conditional rendering based onshowSidebarensures the overlay variant only appears on small screens without affecting the desktop layout. The integration with the shared store (useShowSidebar) looks consistent.Also applies to: 21-30
|
that's so cool @ezhil56x ! love it ❤️ |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
2 participants
2025-11-16.22-12-22.mp4
Summary by CodeRabbit
New Features
Style