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