SideBar enhancement for Dashboard #191

AbhijitPrajapati12 · 2025-11-18T16:12:50Z

Optimized the Dashboard sidebar so it closes when clicking anywhere outside, instead of relying solely on the close button.

Opensox.SideBar.mp4

Summary by CodeRabbit

Improvements
- Sidebar now appears as a dismissible overlay on small screens; tapping outside closes it and the sidebar toggle is inactive while open.
- Inline header and main content adapt when the sidebar is closed, restoring a visible toggle to reopen it.
- Header visuals updated with new color scheme and hover behavior for the Opensox link; layout remains consistent across screen sizes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2025-11-18T16:12:55Z

@abhijit-pr 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.

coderabbitai · 2025-11-18T16:12:59Z

Walkthrough

Dashboard layout now conditionally renders either a fixed overlay (when showSidebar is true) or an inline header with main content (when showSidebar is false); overlay clicks set showSidebar to false and the header icon toggles the sidebar when interactive.

Changes

Cohort / File(s)	Summary
Responsive layout / overlay logic `apps/web/src/app/(main)/dashboard/layout.tsx`	Replaced single layout block with conditional rendering based on `showSidebar`: a fixed overlay branch (renders a non-interactive Bars3Icon and closes on overlay click) and an inline header branch (clickable Bars3Icon opens the sidebar). Class names and header link styles adjusted in both branches.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Layout as DashboardLayout
    participant Overlay as Overlay Container
    participant Header as Header Component

    rect `#E8F8FF`
    Note over User,Layout: showSidebar = true (overlay visible)
    Layout->>Overlay: render fixed overlay (xl:hidden)
    Overlay->>Header: mount internal header (Bars3Icon non-interactive)
    User->>Overlay: click overlay background
    Overlay->>Layout: setShowSidebar(false)
    end

    rect `#FFF0F5`
    Note over User,Layout: showSidebar = false (inline header)
    Layout->>Header: render inline header + main content
    Header->>User: display Bars3Icon (interactive)
    User->>Header: click Bars3Icon
    Header->>Layout: setShowSidebar(true)
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Verify conditional branches render equivalent content/layout for accessibility and responsive breakpoints.
Check overlay click handler prevents unwanted event propagation.
Confirm header icon interactivity is correctly gated and styles/classes updated consistently.

Possibly related PRs

feat(ui): enhance sidebar visuals and animations #172: Touches the same apps/web/src/app/(main)/dashboard/layout.tsx to alter overlay/sidebar rendering and header behavior.

Poem

🐰 I hop through code with eager eyes,
An overlay springs beneath the skies,
Tap a bar, it opens wide,
Click the shade — the view will hide.
Tiny paws, a joyful cheer! 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: enhancing the sidebar functionality in the Dashboard layout with improved click-outside behavior for closing the overlay.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 768e010 and 4431ce3.

📒 Files selected for processing (1)

apps/web/src/app/(main)/dashboard/layout.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

apps/web/src/app/(main)/dashboard/layout.tsx

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cla-assistant · 2025-11-18T16:13:04Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

cla-assistant · 2025-11-18T16:13:07Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/web/src/app/(main)/dashboard/layout.tsx (2)
31-53: Overlay click handler closes sidebar on any click inside mobile content

Because onClick is attached to the full‑screen wrapper, any click inside the header or {children} (not just the backdrop area around the sidebar) will also call setShowSidebar(false). If the intent is to close only when the backdrop outside the sidebar is clicked, consider guarding on the event target:
-      {showSidebar && (
-        <div
-          onClick={() => setShowSidebar(false)}
-          className="fixed inset-0 xl:hidden"
-        >
+      {showSidebar && (
+        <div
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              setShowSidebar(false);
+            }
+          }}
+          className="fixed inset-0 xl:hidden"
+        >
Also note that IconWrapper here still has cursor-pointer but no explicit onClick, so the burger visually looks clickable yet relies on the parent’s handler to close the sidebar. If you want the icon to behave as an explicit close affordance, wiring onClick={ () => setShowSidebar(false) } directly on the IconWrapper in this branch (and optionally removing the parent handler) would make the UX clearer.

55-69: Duplicate mobile header/content layout between sidebar-open and -closed states

The header + <main> structure for the mobile layout is effectively duplicated in both {showSidebar && ...} and {!showSidebar && ...} branches, differing mainly by the IconWrapper’s onClick. This makes future changes to the header (labels, styles, etc.) easy to forget in one branch.

Consider extracting a small mobile header component that takes an optional onMenuClick:
const MobileHeader = ({ onMenuClick }: { onMenuClick?: () => void }) => (
  <div className="xl:hidden flex items-center h-16 px-4 border-b border-ox-header bg-ox-content">
    <IconWrapper onClick={onMenuClick}>
      <Bars3Icon className="size-5 text-ox-purple" />
    </IconWrapper>
    <Link
      href="/"
      className="ml-4 text-lg font-semibold text-ox-white hover:text-ox-purple transition-colors"
    >
      Opensox
    </Link>
  </div>
);
Then reuse it in both branches, passing onMenuClick={() => setShowSidebar(true)} only in the !showSidebar case. This keeps behavior identical while reducing duplication.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 58e50c7 and 768e010.

📒 Files selected for processing (1)

apps/web/src/app/(main)/dashboard/layout.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/src/app/(main)/dashboard/layout.tsx (1)

apps/web/src/components/ui/IconWrapper.tsx (1)

IconWrapper (10-22)

apsinghdev · 2025-11-29T16:00:09Z

@AbhijitPrajapati12 looks awesome man! thanks for the contribution!

vercel · 2025-11-29T16:00:27Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
opensox-website	Ready	Preview	Comment	Nov 29, 2025 4:01pm

AbhijitPrajapati12 · 2025-11-29T20:14:36Z

@apsinghdev Thank you for merging my PR.

can you review this PR as well ?
#187

coderabbitai bot reviewed Nov 18, 2025

View reviewed changes

SideBar enhancement for Dashboard

4431ce3

apsinghdev force-pushed the feat/sidebar branch from 768e010 to 4431ce3 Compare November 29, 2025 15:59

vercel bot deployed to Preview – opensox-website November 29, 2025 16:01 View deployment

apsinghdev merged commit c09dd19 into apsinghdev:main Nov 29, 2025
3 of 5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

SideBar enhancement for Dashboard #191

SideBar enhancement for Dashboard #191

Uh oh!

AbhijitPrajapati12 commented Nov 18, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Nov 18, 2025

Uh oh!

coderabbitai bot commented Nov 18, 2025 •

edited

Loading

Uh oh!

cla-assistant bot commented Nov 18, 2025

Uh oh!

cla-assistant bot commented Nov 18, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

apsinghdev commented Nov 29, 2025

Uh oh!

vercel bot commented Nov 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

AbhijitPrajapati12 commented Nov 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SideBar enhancement for Dashboard #191

SideBar enhancement for Dashboard #191

Uh oh!

Conversation

AbhijitPrajapati12 commented Nov 18, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel bot commented Nov 18, 2025

Uh oh!

coderabbitai bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Pre-merge checks and finishing touches

Uh oh!

cla-assistant bot commented Nov 18, 2025

Uh oh!

cla-assistant bot commented Nov 18, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

apsinghdev commented Nov 29, 2025

Uh oh!

vercel bot commented Nov 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

AbhijitPrajapati12 commented Nov 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AbhijitPrajapati12 commented Nov 18, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 18, 2025 •

edited

Loading

vercel bot commented Nov 29, 2025 •

edited

Loading