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

---

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 → Conservation 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⁴
• Consider 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

• 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/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 checking the existing routing setup and the components/layout folder before creating SideNav.tsx. Use the linked Figma design and the listed layout specifications to define the navigation structure, then verify the Projects, Ecosystem Map, and Account Settings routes. Done means the acceptance criteria pass, including desktop hover behavior, active-state styling, responsive fallback, and basic UI tests.