Create SideNav container component

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/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 with the Figma design and the planned components/layout/SideNav.tsx entry point, then review MUI Drawer, Box, and Stack usage. Done means the SideNav container renders the logo, menu, and profile placeholder sections with the specified spacing, borders, shadow, and flexible structure; routing and hover behavior are out of scope.