Skip to content

Add navbar icons #5

Description

@AJaccP

🧠 Context

src/components/Header.tsx renders the top navigation bar with two <NavLink> items: Explorer and Planner. They're currently text-only. Adding icons from lucide-react makes the nav more visually distinct.


🛠️ Implementation Plan

  1. Open src/components/Header.tsx and import appropriate icons. Suggested icons:

    • Explorer: Network (represents a graph/node structure)
    • Planner: CalendarDays (represents term-by-term planning)

    Feel free to browse lucide.dev if you'd prefer different icons, just keep them intuitive.

  2. Render each icon inline with its label inside the <NavLink>, aligned horizontally with a small gap between the icon and text.

  3. Run pnpm dev and verify both links show their icons, the active-state colour (text-red-600) applies to both icon and text, and the layout looks correct.


✅ Acceptance Criteria

  • Explorer nav link has an icon to its left
  • Planner nav link has an icon to its left
  • Active-state colour applies to both the icon and the text
  • Icons are visually consistent in size and alignment
  • pnpm typecheck and pnpm test still pass

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status
For Review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions