feat: add collapsible sidebar

[Rishavraaj]

Summary

This PR introduces a native collapsible sidebar to the @zuko/ui-kit library and refactors the ApplicationLayout to use a data-driven approach. It significantly reduces code duplication in the layout component (~150 lines removed) and improves the user experience by allowing a more compact sidebar view with automated tooltips for navigation and action icons.

---

Changes

@zuko/ui-kit:

• sidebar.tsx:
  • Implemented a collapsed prop and added smooth expansion/collapse transitions.
  • Added SidebarNavItem and WithSidebarTooltip components for consistent handling of labels and tooltips.
  • Switched from clsx to the cn utility to ensure reliable Tailwind class merging and style overrides in the collapsed state.
• sidebar-layout.tsx: Optimized the main responsive layout to handle dynamic sidebar widths.
• index.ts: Exported new sidebar layout and navigation components.

apps/web:

• application-layout.tsx:
  • Migrated hardcoded navigation items to a centralized navigation array.
  • Implemented persistence for the sidebar state using localStorage.
  • Simplified the organization switcher and user profile footer using new reusable components.
• layout.tsx: Added TooltipProvider to enable sidebar tooltips.

---

Test Plan

• Toggle Functionality: Verified the expand/collapse trigger correctly updates the UI and persists the state across page refreshes.
• Tooltip Display: Confirmed tooltips appear on hover for all sidebar items only when the sidebar is collapsed.
• Icon Visibility: Verified that icons and avatars correctly scale up and center in the 80px collapsed sidebar.
• Navigation Logic: Confirmed the "active" indicator correctly highlights items based on both exact and partial path matches.
• Responsiveness: Verified that mobile navigation remains unaffected and fully functional.

Screen shot