Epic Feature – Side Navigation (Expandable Nav + Routing + Account Access)

[SAUMILDHANKAR]

---

Issue created with ChatGPT models' help¹

---

Description

This epic focuses on implementing the Side Navigation (Side Nav) component that appears on the left side of the application and provides primary navigation across the app¹. The side nav will include the ProgramEarth logo at the top, navigation icons in the middle, and a profile/account icon at the bottom².

On hover (desktop), the side nav should expand slightly to reveal labels next to icons, improving usability and discoverability³. Each icon will route to a specific page:

• Water droplet icon → Saved Projects page
• Map icon → Ecosystem Map view
• Profile icon → Account Settings page⁴

The component should be built using Material UI (MUI) where possible and structured into reusable subcomponents⁵.

---

Goals

• Build reusable SideNav component¹
• Implement hover-based expand/collapse behavior (desktop)²
• Enable routing for each navigation icon³
• Match Figma layout and styling exactly⁴
• Ensure extensibility for authentication/account features¹
• Consider mobile-friendly alternative (no hover)²

---

Implementation Instructions

• Create SideNav.tsx component under components/layout folder¹
• Use Material UI components (e.g., Drawer, Box, IconButton)²
• Create separate components for each nav item/icon³
• Implement hover state to expand nav width and show labels⁴
• Add routing using React Router (or existing routing setup)¹
• Logo click → redirect to ProgramEarth website²
• Projects icon → navigate to Saved Projects page³
• Map icon → navigate to Ecosystem Map view⁴
• Profile icon → navigate to Account Settings page¹
• Add basic state handling for selected/active menu item²
• Keep styling flexible (theme/styles folder integration later)³

---

Layout Specs (Figma)

side nav layout

• width: 86;¹
• height: 1049;²
• angle: 0 deg;³
• opacity: 1;⁴
• border-right-width: 2px;¹
• padding-right: 16px;²
• padding-left: 16px;³
• background: var(--Brand-white, #FFFFFF);⁴
• border-right: 2px solid var(--Grey-Border, #E8E8E8);¹
• box-shadow: 0px 20px 50px 0px #DCE0F980;²

---

row top vertical spacer

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

---

programearth logo

• width: 44;¹
• height: 44;²
• angle: 0 deg;³
• opacity: 1;⁴

---

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 bw menu item

• 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;³

---

profile pic icon button

• width: 54;¹
• height: 54;²
• angle: 0 deg;³
• opacity: 1;⁴
• border-radius: 15px;¹
• background: #82B1FF80;²

👉 On click:

• Navigate to: "Account Settings";¹
• Animate: Instant;²
• animation-duration: 0ms;³

---

bottom spacer

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

---

Acceptance Criteria

• Side navigation renders with correct layout and styling¹
• Hover expands nav and shows labels (desktop)²
• All icons navigate to correct routes³
• Active/selected state is visually indicated⁴
• Profile icon navigates to account settings¹
• Layout matches Figma specifications²
• Mobile fallback behavior is considered³

---

Sub-Issues

• Create Logo component + click redirect
• Create Projects icon component + routing
• Create Map icon component + routing
• Implement hover expand/collapse behavior
• Implement active/selected state styling
• Add mobile behavior (click to expand or drawer mode)
• Integrate with routing system
• Add basic UI tests

---

Resources

¹ https://mui.com/material-ui/react-drawer/
² https://react.dev/learn/conditional-rendering
³ https://reactrouter.com/en/main/start/overview
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Figma Design (Refer for full details): https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0

---