Create Projects icon component + routing

[SAUMILDHANKAR]

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](https://mui.com/material-ui/react-list/?utm_source=chatgpt.com)
² [React Router Documentation](https://reactrouter.com/en/main/start/tutorial?utm_source=chatgpt.com)
³ [React useEffect Documentation](https://react.dev/reference/react/useEffect?utm_source=chatgpt.com)
⁴ [Material UI Transitions Documentation](https://mui.com/material-ui/transitions/?utm_source=chatgpt.com)

Reference Figma Design:
[OpenNature Map Figma Design](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0It&utm_source=chatgpt.com)