fix: sidenav unexpected behavior

[CK-7vn]

Pre-Submission PR Checklist

• No debug/console/fmt.Println statements
• Unnecessary development comments removed
• All acceptance criteria verified
• Functions according to ticket specifications
• Tested manually where applicable
• Branch rebased with latest main
• No business logic exists within the database layer

Description of the change

Fixes the mobile side navigation sliding off to the right and disappearing when the user taps outside it on small screens. The issue was caused by shacn's sheet's animation utilities not being loaded.

Changes:

• Replaced the dead tailwindcss-animate dependency with tw-animate-css
  (the Tailwind v4 successor) and imported it in globals.css; removed
  the hand-rolled right-only sheet-* keyframes. The Sheet's own
  side-aware classes now drive the animation, so the left sheet slides
  left and right-docked sheets slide right.

• Added a visually-hidden SheetTitle to the mobile nav (resolves the
  Radix DialogContent requires a DialogTitle screen-reader warning).

• Removed the non-functional collapse chevron from the mobile sheet
  header (it was a no-op on mobile, sitting next to the close X) via a
  new showCollapseToggle prop on Sidebar; the desktop collapse toggle is
  unchanged.

• Related issues: https://app.asana.com/1/1201607307149189/project/1209460078641109/task/1215145641561038?focus=true

Screenshot(s)

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 29ad6d9c-0194-4ea8-b271-d82146c2a01c

📥 Commits

Reviewing files that changed from the base of the PR and between 76550ac and 37019d3.

⛔ Files ignored due to path filters (1)

• frontend/yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (4)

• frontend/package.json
• frontend/src/components/navigation/MobileNav.tsx
• frontend/src/components/navigation/Sidebar.tsx
• frontend/src/styles/globals.css

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Sidebar collapse toggle is now optional and can be hidden based on preference while maintaining other sidebar functionality.

• Bug Fixes

  • Enhanced mobile navigation accessibility by adding hidden screen reader labels for the navigation menu.

• Chores

  • Updated animation library dependency to improve performance and CSS animation handling.

Walkthrough

Replaces tailwindcss-animate with tw-animate-css in the package manifest and CSS imports, removing hand-written sheet animation keyframes. Adds an optional showCollapseToggle prop to Sidebar, and updates MobileNav to hide the collapse toggle and include an accessible hidden SheetTitle.

Changes

Animation Library Migration

Layer / File(s)	Summary
Dependency swap and CSS import frontend/package.json, frontend/src/styles/globals.css	Replaces tailwindcss-animate with tw-animate-css in dependencies, adds the @import 'tw-animate-css' directive, and removes the custom @keyframes sheet-slide animation block that the new package now covers.

Sidebar Collapse Toggle and MobileNav Accessibility

Layer / File(s)	Summary
Sidebar showCollapseToggle prop and conditional render frontend/src/components/navigation/Sidebar.tsx	Adds optional showCollapseToggle?: boolean (default true) to SidebarProps; wraps the collapse/expand button in a conditional render so callers can suppress it.
MobileNav passes showCollapseToggle and adds SheetTitle frontend/src/components/navigation/MobileNav.tsx	Passes showCollapseToggle={false} to Sidebar to hide the collapse button on mobile, and renders a visually hidden SheetTitle ("Navigation menu") for screen-reader accessibility.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix: sidenav unexpected behavior' is vague and does not clearly convey the specific nature of the fix, using a non-descriptive term 'unexpected behavior' rather than stating the actual issue being resolved.	Consider using a more specific title like 'fix: mobile navigation sheet animation and accessibility' or 'fix: mobile sidenav sliding off-screen and missing title' to better communicate the changes.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is comprehensive and directly related to the changeset, detailing the root cause (missing animation utilities), the fixes applied (dependency replacement, accessibility improvement, UI refinement), and referencing related issues.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Biome (2.5.0)

frontend/src/styles/globals.css

File contains syntax errors that prevent linting: Line 4: Tailwind-specific syntax is disabled.; Line 86: Tailwind-specific syntax is disabled.; Line 134: Tailwind-specific syntax is disabled.; Line 138: Tailwind-specific syntax is disabled.; Line 212: Tailwind-specific syntax is disabled.; Line 215: Tailwind-specific syntax is disabled.; Line 218: Tailwind-specific syntax is disabled.; Line 221: Tailwind-specific syntax is disabled.; Line 225: Tailwind-specific syntax is disabled.; Line 228: Tailwind-specific syntax is disabled.; Line 231: Tailwind-specific syntax is disabled.; Line 234: Tailwind-specific syntax is disabled.; Line 238: Tailwind-specific syntax is disabled.; Line 242: Tailwind-specific syntax is disabled.; Line 246: Tailwind-specific syntax is disabled.; Line 250: Tailwind-specific syntax is disabled.; Line 254: Tailwind-specific syntax is disabled.; Line 258: Tailwind-specific syntax is disabled.; Line 262: Tailwind-specific syntax is disabled.; Line 266: Tailwind-spe

... [truncated 303 characters] ...

tax is disabled.; Line 294: Tailwind-specific syntax is disabled.; Line 298: Tailwind-specific syntax is disabled.; Line 302: Tailwind-specific syntax is disabled.; Line 306: Tailwind-specific syntax is disabled.; Line 310: Tailwind-specific syntax is disabled.; Line 314: Tailwind-specific syntax is disabled.; Line 318: Tailwind-specific syntax is disabled.; Line 322: Tailwind-specific syntax is disabled.; Line 326: Tailwind-specific syntax is disabled.; Line 330: Tailwind-specific syntax is disabled.; Line 334: Tailwind-specific syntax is disabled.; Line 338: Tailwind-specific syntax is disabled.; Line 342: Tailwind-specific syntax is disabled.; Line 346: Tailwind-specific syntax is disabled.; Line 350: Tailwind-specific syntax is disabled.; Line 354: Tailwind-specific syntax is disabled.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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