Implement map click interaction + layout state

[SAUMILDHANKAR]

Issue created with ChatGPT models' help¹

Dependency

• Create ProjectTitle component #4
• Create ProjectInfo component (left/right layout) #15
• Once above issues are done, please move this issue to ready column/status

Description

Implement the interaction flow where clicking a land project marker on the map changes the application layout state and reveals the lower project detail panels¹. When the map is in full-screen/default state and a user clicks a project marker, the map should shrink responsively and display both the ProjectTitle and ProjectInfo components beneath the map².

The interaction should also support resetting back to the original full-map layout when the user clicks the close button from the ProjectTitle component³. This issue is mainly focused on layout state management, interaction flow, responsive resizing behavior, and component visibility handling⁴.

React state management can initially use useState, context, or another lightweight approach depending on contributor preference¹.

---

Goals

• Implement project marker click interaction¹
• Shrink map layout after marker selection²
• Render ProjectTitle and ProjectInfo components dynamically³
• Restore full map layout on close action⁴
• Support responsive layout behavior for smaller screens¹
• Prepare interaction flow for future routing/service integration²

---

Implementation Instructions

• Add layout interaction logic to map container/page component¹

• Use React state (useState or equivalent) to track selected project²

• Create layout states such as:

  • default/full map view³
  • project selected/detail layout⁴

• On marker click:

  • store selected project data¹
  • shrink map container height/layout²
  • render ProjectTitle component³
  • render ProjectInfo component⁴

• On close button click from ProjectTitle:

  • clear selected project state¹
  • restore original map layout²
  • hide detail panels³

• Ensure layout resizing works on smaller screens/mobile widths⁴

• Use responsive breakpoints using Material UI¹

• Avoid hardcoding viewport assumptions where possible²

---

Expected Interaction Flow

Default State

• Map occupies primary/full content layout¹
• Project detail panels are hidden²

Marker Click State

• User clicks land project marker³
• Map shrinks vertically according to detail layout⁴
• ProjectTitle appears below map¹
• ProjectInfo appears below title²
• Selected project data populates components dynamically³

Close Interaction

• User clicks close button from ProjectTitle⁴
• Detail panels disappear¹
• Map returns to original full-size state²

---

Responsive Layout Considerations

• Shrinking behavior must account for smaller screen sizes¹
• Layout should remain usable on tablets/laptops²
• Avoid fixed pixel-only assumptions for height calculations³
• Contributors may use flex/grid/MUI responsive containers⁴
• Mobile interaction behavior can evolve later if needed¹

---

Suggested Technical Structure

Possible state example (not required):²

const [selectedProject, setSelectedProject] = useState(null);

Possible derived layout states:³

const isProjectOpen = Boolean(selectedProject);

This is only a suggestion and contributors may structure state differently⁴.

---

Acceptance Criteria

• Clicking a map marker updates layout state¹
• Map shrinks when project is selected²
• ProjectTitle component renders correctly³
• ProjectInfo component renders correctly⁴
• Close button restores original map layout¹
• Layout remains usable on smaller screens²
• Selected project data flows into detail components³
• Code structure supports future expansion/refactoring⁴

---

Resources

¹ https://react.dev/reference/react/useState
² https://react.dev/learn/sharing-state-between-components
³ https://mui.com/material-ui/react-box/
⁴ https://mui.com/material-ui/guides/responsive-ui/

Reference Figma Design:
https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3802&t=R2HRz2FxbgryeS8U-0