Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Create Map icon component + routing

Aperta
  • Qualcosa non va?
#19 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend, web-dev

Direzione di ricerca

Inizia individuando i punti di ingresso esistenti per la navigazione laterale e il routing; l’issue suggerisce components/sidenav/SideNav.tsx, MapIcon.tsx, NavMenuItem.tsx e routes/EcosystemMapRoute.tsx. Confronta gli stati di Figma e il comportamento del layout esistente, quindi verifica che facendo clic sull’elemento della mappa la vista cambi mantenendo la navigazione laterale, le etichette al passaggio del mouse e gli stati selezionato/non selezionato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Beginner California Tribal GIS Hackathon
Issue created with ChatGPT models' help¹

Description

Create the Ecosystem Map icon component used inside the side navigation and implement its routing/interaction behavior¹. When a user clicks the map icon, the application should navigate to the full-screen ecosystem map view containing map layers, markers, and project polygons while still preserving the side navigation on the left².

This issue mainly focuses on creating the frontend component, routing interaction, and selected/unselected menu states³.

The map icon component should visually support both selected and unselected states from the Figma design¹.

Image Image

Goals

  • Create reusable Map icon component¹
  • Implement routing to ecosystem/full map view²
  • Support selected/unselected icon states³
  • Show text labels beside icons on hover¹
  • Preserve side nav while switching map screens²

Implementation Instructions

  • Create reusable MapIcon or MapMenuItem component¹
  • Use React + TypeScript + Material UI²
  • Clicking icon should navigate to ecosystem map page³
  • Preserve side navigation on left side of layout⁴
  • Text labels should appear when side nav expands²
  • Contributors may use useState, useEffect, CSS transitions, or MUI transitions⁴
  • Keep implementation responsive for smaller screens¹

Expected Functionalities

Hover Interaction
  • User moves cursor over side nav²
  • Side nav expands horizontally³
  • Text labels appear next to icons⁴
  • Ecosystem Map label becomes visible¹
Click Interaction
  • User clicks Ecosystem Map icon²
  • App navigates to full ecosystem map page³
  • Full map view renders on right side of layout⁴
  • Side nav remains visible on left¹
Mouse Leave Interaction
  • Cursor leaves navigation area²
  • Side nav returns to original collapsed width³
  • Text labels disappear⁴

Figma Layout Specs

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 between menu items
  • 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;³

Suggested Technical Structure (Optional)

Possible component structure:¹

components/sidenav/
 ├── SideNav.tsx
 ├── MapIcon.tsx
 ├── NavMenuItem.tsx
 └── HoverLabel.tsx

Possible routing structure:²

routes/
 ├── EcosystemMapRoute.tsx
 ├── ProjectRoute.tsx
 └── AccountRoute.tsx

Notes

  • Hover label rendering may use useState, useEffect, CSS transitions, or Material UI transitions³
  • Keep component structure reusable for future navigation icons¹
  • Avoid tightly coupling routing logic directly into UI rendering where possible²

Acceptance Criteria

  • Map icon component renders correctly¹
  • Clicking icon navigates to ecosystem map page²
  • Text labels appear during hover-expanded state⁴
  • Side nav collapses correctly on mouse leave¹
  • Selected/unselected states visually work²
  • Ecosystem map renders with side nav preserved³
  • Component uses React + TypeScript + MUI⁴
  • Code structure supports future navigation scalability¹

Resources

¹ https://mui.com/material-ui/react-list/
² https://reactrouter.com/en/main/start/tutorial
³ https://react.dev/reference/react/useEffect
⁴ https://mui.com/material-ui/transitions/

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

Lingua principale
HTML
Stelle
2
Fork
11
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di OpenSourceFellows/map_dashboard_hackathon

Tutte le issue di OpenSourceFellows/map_dashboard_hackathon

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.