Create SideNav container component

[SAUMILDHANKAR]

Issue created with ChatGPT models' help¹

---

Description

Create the main SideNav container component using React + Material UI (MUI) + TypeScript, which will act as the structural wrapper for all side navigation elements (logo, menu items, profile icon)¹. The component should follow the Figma layout closely and serve as the base container where individual nav item components will later be plugged in².

The focus of this issue is layout + structure + styling, not full functionality. Routing, icon logic, and hover expansion behavior can be handled in separate sub-issues³. However, the container should be designed in a way that supports these future enhancements cleanly⁴.

---

Goals

• Create reusable SideNav container component¹
• Use Material UI components for layout (Drawer/Box/etc.)²
• Implement TypeScript structure and types integration³
• Match Figma layout and spacing exactly⁴
• Prepare container for future child components (icons, routing, hover)¹

---

Implementation Instructions

• Create SideNav.tsx under components/layout folder¹
• Use MUI components such as Drawer, Box, Stack for layout²
• Define TypeScript interfaces/types (either local or from types folder)³
• Structure layout into sections: logo → menu → profile icon⁴
• Apply styles using MUI sx prop or styles/theme folder¹
• Keep layout flexible for hover expansion (future enhancement)²
• Add placeholder elements for menu items and profile icon³
• Do not implement full routing or logic in this issue⁴

---

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 (future):

• 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 (future):

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

---

bottom spacer

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

---

Notes

• Hover expansion width is not finalized, developers can assume ~20% screen width for now¹
• Ensure layout is flexible enough to support expansion without breaking structure²

---

Acceptance Criteria

• SideNav container renders with correct layout and spacing¹
• Uses MUI components for structure²
• TypeScript types/interfaces are defined and used³
• Layout matches Figma specifications⁴
• Component is cleanly structured for future enhancements¹

---

Resources

¹ https://mui.com/material-ui/react-drawer/
² https://react.dev/learn/typescript
³ https://react.dev/learn/passing-props-to-a-component
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

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

---