What kind of project is this?

A small internal console built with Next.js App Router. The body content of the Overview, Reports and Settings screens is complete, and you build the sidebar navigation shared by the three screens.

What must the sidebar do?

Its three menu items (Overview, Reports, Settings) navigate between screens, a collapse button folds and unfolds it, and the menu for the current screen is highlighted.

Run npm test, and use the dev server (npm run dev) to navigate between screens while watching the sidebar. Check navigation between screens, not just a single screen.

Console sidebar navigation

Your task

Build a sidebar navigation for an internal console. The sidebar is visible on all three screens (Overview, Reports, Settings), clicking a menu item navigates to that screen, a collapse button folds and unfolds the sidebar, and the menu for the screen you are on is highlighted. Create a Sidebar component and apply it to the three screens. The menu items are ready in NAV_ITEMS in lib/nav.ts. (The body content of the three pages is already complete.) Note: This is a Next.js App Router project. Collapse/expand and current-menu highlighting must work.

Ground rules

•Use NAV_ITEMS from lib/nav.ts as is (no adding or editing items).
•Keep styling minimal (classes or inline). Do not bring in a CSS framework.

Not required

•Mobile responsiveness and animations.
•Persisting the collapsed state to storage (browser storage etc.).
•Per-role menu visibility.

▶About this challenge

This problem adds a sidebar navigation to an internal console built with Next.js App Router. The sidebar must be visible on the Overview, Reports and Settings screens, with a working collapse button and current-screen highlighting. You practice verifying how UI shared across multiple screens is structured.

Every app has UI shared across screens, like sidebars and headers. Code that works fine on a single screen can behave very differently once screens multiply and navigation gets frequent — where the shared UI lives shapes both the user experience and maintenance. This problem covers a multi-screen console with shared navigation, and practices checking behavior across navigation, not just on one screen.

What kind of project is this?: A small internal console built with Next.js App Router. The body content of the Overview, Reports and Settings screens is complete, and you build the sidebar navigation shared by the three screens.
What must the sidebar do?: Its three menu items (Overview, Reports, Settings) navigate between screens, a collapse button folds and unfolds it, and the menu for the current screen is highlighted.
How do I verify it?: Run npm test, and use the dev server (npm run dev) to navigate between screens while watching the sidebar. Check navigation between screens, not just a single screen.