feat: sidebar

[Alw3ys]

No description provided.

[coderabbitai]

Walkthrough

Replaces the top navigation with a responsive layout (desktop fixed/expandable left sidebar, mobile top bar + slide-in drawer), adds a data-driven nav, exposes API version via a new hook, updates Profile for sidebar use, and adds CSS animations for transitions.

Changes

Cohort / File(s)	Summary
Layout & Navigation dashboard/app/(private)/layout.tsx	Replaced the previous top nav with a responsive layout: persistent desktop left sidebar (expandable) and mobile top bar with slide-in drawer. Added data-driven navigationItems, SidebarLabel/MobileSidebarLabel components, useApiVersion hook (fetches /health and exposes vX.Y.Z), active-state styling, Docs/profile placements, and adjusted main content container.
Profile Component dashboard/app/components/profile.tsx	Added ProfileProps (sidebar?, expanded?) and updated component to support sidebar and expanded modes. Implemented auto-logout when user absent, click-outside-to-close behavior, sidebar-specific rendering (avatar, name/email, chevron), dropdown animations, and adjusted loading skeletons.
CSS Animations dashboard/app/globals.css	Introduced animation tokens and keyframes: --animate-slide-in-left, --animate-fade-in, and --animate-dropdown-in with corresponding slide-in-left, fade-in, and dropdown-in keyframes for UI transitions.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	No pull request description was provided; while the title gives context, a description would strengthen the change documentation.	Add a pull request description explaining the sidebar redesign, new API version display feature, and responsive behavior changes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: sidebar' directly matches the main change: replacing top navigation with a responsive desktop/mobile sidebar layout.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/sidebar

---

No actionable comments were generated in the recent review. 🎉

---

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

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@dashboard/app/`(private)/layout.tsx:
- Around line 150-186: The mobile drawer currently lacks dialog semantics and
proper keyboard support; update the mobile drawer markup and handlers so it
behaves like an accessible modal: add role="dialog" and aria-modal="true" (and
aria-labelledby/aria-describedby) to the <aside> that renders when mobileOpen is
true, give the icon-only close/open buttons (the button that calls
setMobileOpen(true) and the X button that calls setMobileOpen(false)) explicit
aria-labels, make the backdrop a focusable element or button (or give it
tabIndex={0} and role="button") and implement an onKeyDown handler that closes
on Escape/Enter to mirror the onClick (connect to setMobileOpen), and add simple
focus management (store the previously focused element, move focus into the
drawer when opened and restore on close, or use a small focus-trap utility) so
keyboard users are trapped inside the drawer while mobileOpen is true; locate
changes around mobileOpen/setMobileOpen, the backdrop div, the Menu/X icon
buttons, and the <aside> panel in layout.tsx.
- Around line 45-59: The useApiVersion effect must abort the fetch on unmount
and ignore non-OK responses: create an AbortController inside useEffect, pass
its signal to fetch, check res.ok before parsing/res.text and only extract the
version when ok, and in the cleanup call controller.abort(); in the catch
handler ignore only AbortError by checking err?.name === "AbortError" and
otherwise handle/log the real error; ensure this touches the useApiVersion
function, the fetch call, the then chain that sets setVersion, and the effect
cleanup.

In `@dashboard/app/globals.css`:
- Around line 18-44: Stylelint flags missing blank lines before the `to` blocks
inside the keyframes; update each keyframe declaration (slide-in-left, fade-in,
dropdown-in) to insert a single empty line between the closing `from { ... }`
block and the `to { ... }` block so that there is a blank line before every `to`
rule, which will resolve the rule-empty-line-before violations.

🧹 Nitpick comments (2)

dashboard/app/globals.css (1)

13-45: Add prefers-reduced-motion fallbacks for the new animations.
Since these animations are now part of core navigation UX, consider disabling them for users who prefer reduced motion.

♿ Optional reduced-motion override

+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--animate-slide-in-left: none;
+		--animate-fade-in: none;
+		--animate-dropdown-in: none;
+	}
+}

dashboard/app/components/profile.tsx (1)

61-136: Expose dropdown state via ARIA on the profile menu.
Add aria-expanded/aria-controls on the triggers and role="menu" on the dropdown containers to improve screen‑reader navigation.

♿ Suggested ARIA enhancements

 <button
 	onClick={() => setIsOpen(!isOpen)}
+	aria-expanded={isOpen}
+	aria-haspopup="menu"
+	aria-controls="profile-menu"
 	className="flex items-center w-full h-10 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-200 cursor-pointer group/item"
 >
 ...
-{isOpen && (
-	<div className="absolute left-full bottom-0 ml-2 w-64 bg-white rounded-md shadow-lg border border-gray-200 z-50 animate-dropdown-in">
+{isOpen && (
+	<div
+		id="profile-menu"
+		role="menu"
+		className="absolute left-full bottom-0 ml-2 w-64 bg-white rounded-md shadow-lg border border-gray-200 z-50 animate-dropdown-in"
+	>
 ...
 <button
 	onClick={() => setIsOpen(!isOpen)}
+	aria-expanded={isOpen}
+	aria-haspopup="menu"
+	aria-controls="profile-menu"
 	className="flex items-center space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-50 transition-colors cursor-pointer"
 >
 ...
-{isOpen && (
-	<div className="absolute right-0 mt-3 w-64 bg-white rounded-md shadow-lg border border-gray-200 z-50 animate-dropdown-in">
+{isOpen && (
+	<div
+		id="profile-menu"
+		role="menu"
+		className="absolute right-0 mt-3 w-64 bg-white rounded-md shadow-lg border border-gray-200 z-50 animate-dropdown-in"
+	>

Also applies to: 141-199