Implement map click interaction + layout state

Issue created with ChatGPT models' help¹

Dependency

• #4
• #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/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 map container or page component and trace how land project markers currently handle clicks. Read ProjectTitle and ProjectInfo, then review the existing Material UI responsive layout approach. Done means marker selection shows both detail components with selected data, and the close action restores the full-map view across smaller screens.