Create Map icon component + routing

[SAUMILDHANKAR]

Issue created with ChatGPT models' help¹

---

Description

Create the Ecosystem Map icon component used inside the side navigation and implement its routing/interaction behavior¹. When a user clicks the map icon, the application should navigate to the full-screen ecosystem map view containing map layers, markers, and project polygons while still preserving the side navigation on the left².

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

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

---

Goals

• Create reusable Map icon component¹
• Implement routing to ecosystem/full map view²
• Support selected/unselected icon states³
• Show text labels beside icons on hover¹
• Preserve side nav while switching map screens²

---

Implementation Instructions

• Create reusable MapIcon or MapMenuItem component¹
• Use React + TypeScript + Material UI²
• Clicking icon should navigate to ecosystem map page³
• Preserve side navigation on left side of layout⁴
• Text labels should appear when side nav expands²
• Contributors may use useState, useEffect, CSS transitions, or MUI transitions⁴
• Keep implementation responsive for smaller screens¹

---

Expected Functionalities

Hover Interaction

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

Click Interaction

• User clicks Ecosystem Map icon²
• App navigates to full ecosystem map page³
• Full map view 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

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;⁴

---

Map 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
 ├── MapIcon.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³
• Keep component structure reusable for future navigation icons¹
• Avoid tightly coupling routing logic directly into UI rendering where possible²

---

Acceptance Criteria

• Map icon component renders correctly¹
• Clicking icon navigates to ecosystem map page²
• Text labels appear during hover-expanded state⁴
• Side nav collapses correctly on mouse leave¹
• Selected/unselected states visually work²
• Ecosystem map renders with side nav preserved³
• Component uses React + TypeScript + MUI⁴
• Code structure supports future navigation scalability¹

---

Resources

¹ https://mui.com/material-ui/react-list/
² https://reactrouter.com/en/main/start/tutorial
³ https://react.dev/reference/react/useEffect
⁴ https://mui.com/material-ui/transitions/

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