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

Epic Feature – Side Navigation (Expandable Nav + Routing + Account Access)

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

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend, web-dev

Direzione di ricerca

Inizia controllando la configurazione di routing esistente e la cartella components/layout prima di creare SideNav.tsx. Usa il design Figma collegato e le specifiche di layout elencate per definire la struttura di navigazione, quindi verifica le route Projects, Ecosystem Map e Account Settings. Il lavoro è completato quando i criteri di accettazione sono soddisfatti, inclusi il comportamento hover su desktop, lo stile dello stato attivo, il fallback responsive e i test UI di base.

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

Descrizione

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

Description

This epic focuses on implementing the Side Navigation (Side Nav) component that appears on the left side of the application and provides primary navigation across the app¹. The side nav will include the ProgramEarth logo at the top, navigation icons in the middle, and a profile/account icon at the bottom².

On hover (desktop), the side nav should expand slightly to reveal labels next to icons, improving usability and discoverability³. Each icon will route to a specific page:

  • Water droplet icon → Conservation Projects page
  • Map icon → Ecosystem Map view
  • Profile icon → Account Settings page⁴

The component should be built using Material UI (MUI) where possible and structured into reusable subcomponents⁵.

Image Image Image

Goals

  • Build reusable SideNav component¹
  • Implement hover-based expand/collapse behavior (desktop)²
  • Enable routing for each navigation icon³
  • Match Figma layout and styling exactly⁴
  • Consider extensibility for authentication/account features¹
  • Consider mobile-friendly alternative (no hover)²

Implementation Instructions

  • Create SideNav.tsx component under components/layout folder¹
  • Use Material UI components (e.g., Drawer, Box, IconButton)²
  • Create separate components for each nav item/icon³
  • Implement hover state to expand nav width and show labels⁴
  • Add routing using React Router (or existing routing setup)¹
  • Logo click → redirect to ProgramEarth website²
  • Projects icon → navigate to Saved Projects page³
  • Map icon → navigate to Ecosystem Map view⁴
  • Profile icon → navigate to Account Settings page¹
  • Add basic state handling for selected/active menu item²
  • Keep styling flexible (theme/styles folder integration later)³

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:

  • 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:

  • Navigate to: "Account Settings";¹
  • Animate: Instant;²
  • animation-duration: 0ms;³
bottom spacer
  • Size="16px";¹
  • Show=false;²
  • width: 360;³
  • height: 16;⁴
  • angle: 0 deg;¹
  • opacity: 1;²

Acceptance Criteria

  • Side navigation renders with correct layout and styling¹
  • Hover expands nav and shows labels (desktop)²
  • All icons navigate to correct routes³
  • Active/selected state is visually indicated⁴
  • Profile icon navigates to account settings¹
  • Layout matches Figma specifications²
  • Mobile fallback behavior is considered³

Sub-Issues

  • Implement hover expand/collapse behavior
  • Implement active/selected state styling
  • Add mobile behavior (click to expand or drawer mode)
  • Integrate with routing system
  • Add basic UI tests

Resources

¹ https://mui.com/material-ui/react-drawer/
² https://react.dev/learn/conditional-rendering
³ https://reactrouter.com/en/main/start/overview
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

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

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.