Create Projects icon component + routing

Issue created with ChatGPT models' help¹

---

Description

Create the Projects icon component used inside the side navigation and implement its routing/interaction behavior¹. When a user clicks the Projects icon, the application should navigate to the Conservation Projects page while preserving the side navigation on the left side of the layout².

This issue mainly focuses on creating the frontend component, routing interaction, and selected/unselected menu states³.

The Projects icon component should visually support both selected and unselected states from the Figma design¹.

---

Goals

• Create reusable Projects icon component¹
• Implement routing to Conservation Projects page²
• Support selected/unselected icon states³
• Show text labels beside icons on hover¹
• Preserve side nav while switching pages²

---

Implementation Instructions

• Create reusable ProjectsIcon or ProjectsMenuItem component¹
• Use React + TypeScript + Material UI²
• Clicking icon should navigate to Conservation Projects page³
• Preserve side navigation on left side of layout⁴
• Text labels should appear when side nav expands²
• On mouse leave, side nav should collapse back to original size³
• Contributors may use useState, useEffect, CSS transitions, or MUI transitions⁴
• Keep implementation responsive for smaller screens¹
• Component may later integrate with conservation projects functionality and project routing²

---

Expected Functionalities

Hover Interaction

• User moves cursor over side nav³
• Side nav expands horizontally⁴
• Text labels appear next to icons¹
• Projects label becomes visible²

Click Interaction

• User clicks Projects icon³
• App navigates to Conservation Projects page⁴
• Projects page renders on right side of layout¹
• Side nav remains visible on left²

Mouse Leave Interaction

• Cursor leaves navigation area³
• Side nav returns to original collapsed width⁴
• Text labels disappear¹

---

Figma Layout Specs

after logo spacer
Size="24px";¹
Show=false;²
width: 360;³
height: 24;⁴
angle: 0 deg;¹
opacity: 1;²

tab menu
width: 54;³
height: 895;⁴
angle: 0 deg;¹
opacity: 1;²

---

Menu item

• State="Unselected";³
• Show Label=false;⁴
• width: 32;¹
• height: 32;²
• gap: 12px;³
• angle: 0 deg;⁴
• opacity: 1;¹

👉 On click:

• Navigate to: "Projects";²
• Animate: Instant;³
• animation-duration: 0ms;⁴

---

Vertical spacer between menu items

• Size="24px";¹
• Show=false;²
• width: 360;³
• height: 24;⁴
• angle: 0 deg;¹
• opacity: 1;²

---

Projects menu item

• State="Selected";³
• Show Label=false;⁴
• width: 32;¹
• height: 32;²
• gap: 12px;³
• angle: 0 deg;⁴
• opacity: 1;¹

---

Suggested Technical Structure (Optional)

Possible component structure:¹

components/sidenav/
 ├── SideNav.tsx
 ├── ProjectsIcon.tsx
 ├── NavMenuItem.tsx
 └── HoverLabel.tsx

Possible routing structure:²

routes/
 ├── EcosystemMapRoute.tsx
 ├── ProjectRoute.tsx
 └── AccountRoute.tsx

---

Notes

• Hover label rendering may use useState, useEffect, CSS transitions, or Material UI transitions³
• Exact hover expansion width is not finalized; contributors may use reasonable defaults until finalized by maintainers⁴
• Keep component structure reusable for future navigation icons¹
• Avoid tightly coupling routing logic directly into UI rendering where possible²
• Conservation Projects page functionality may expand later through related epic issues³

---

Acceptance Criteria

• Projects icon component renders correctly¹
• Clicking icon navigates to Conservation Projects page²
• Text labels appear during hover-expanded state⁴
• Selected/unselected states visually work²
• Projects page renders with side nav preserved³
• Component uses React + TypeScript + MUI⁴
• Code structure supports future navigation scalability¹

---

Resources

¹ Material UI List Documentation
² React Router Documentation
³ React useEffect Documentation
⁴ Material UI Transitions Documentation

Reference Figma Design:
https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Start by inspecting the existing side-navigation components and route structure, especially the suggested components/sidenav/ and routes/ entry points, then run the application to compare its behavior with the Figma design. Implement the Projects menu item and route using the existing patterns. Done means the icon supports selected and unselected states, hover labels and collapse behavior work, and the Conservation Projects page renders while the side navigation remains visible.