Skip to content

feat: Add responsive sidebar collapse toggle for desktop (#834) - #998

Merged
github-actions[bot] merged 1 commit into
Smartdevs17:mainfrom
devjayy43:feature/sidebar-collapse-toggle
Sep 28, 2026
Merged

github-actions[bot] merged 1 commit into
Smartdevs17:mainfrom
devjayy43:feature/sidebar-collapse-toggle

Conversation

@devjayy43

Copy link
Copy Markdown
Contributor

Summary

Implements a minimal responsive sidebar collapse feature for desktop users.

Closes #834

Features

  • Desktop Collapse Toggle: New collapse/expand button in sidebar header (desktop only)
  • Icon-Only Collapsed View: Sidebar collapses from w-64 to w-20, showing only navigation icons
  • Smooth Animations: CSS transitions for collapse/expand with duration-200
  • Hidden Labels: Logo text, navigation labels, and user info hidden when collapsed
  • Tooltip Support: Navigation items show full name on hover via title attribute
  • Dynamic Content Margins: Main content area adjusts margins dynamically (lg:ml-64 ↔ lg:ml-20)
  • Accessibility: Proper aria-labels, aria-expanded, and focus management
  • Mobile Preserved: Mobile toggle (Menu/X) remains unchanged, collapse is desktop-only

Changes

  • New: frontend/contexts/SidebarContext.tsx - Context for managing global sidebar state
  • Updated: frontend/components/layout/Sidebar.tsx - Added collapse toggle button and conditional rendering
  • Updated: frontend/components/layout/DashboardAuthGuard.tsx - Wrapped with SidebarProvider and adjusted margins

Testing

  • Desktop: Click collapse button in sidebar header to toggle collapsed state
  • Desktop: Verify sidebar transitions smoothly between w-64 and w-20
  • Desktop: Verify icons are centered and labels hidden when collapsed
  • Desktop: Hover over navigation icons to see tooltip with full name
  • Desktop: Verify main content margin adjusts dynamically
  • Mobile: Verify menu button still works as expected
  • Mobile: Verify no collapse button appears on mobile

…#834)

- Add SidebarContext to manage collapsed state globally
- Add collapse/expand button in sidebar header
- Sidebar collapses to icon-only view (w-20) when toggled
- Navigation labels, logo text, and user info hidden when collapsed
- Smooth transition animations for collapse/expand
- Main content margin adjusts dynamically (lg:ml-64 -> lg:ml-20)
- Mobile functionality preserved, collapse only visible on desktop
- Accessible with proper aria-labels and title attributes for tooltips
@vercel

vercel Bot commented Sep 28, 2026

Copy link
Copy Markdown

@devjayy43 is attempting to deploy a commit to the smartdevs17's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Sep 28, 2026

Copy link
Copy Markdown

@devjayy43 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@github-actions
github-actions Bot merged commit 0331ecc into Smartdevs17:main Sep 28, 2026
13 of 24 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build responsive sidebar with collapse toggle

1 participant