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

Create SideNav container component

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

Nessuno ha ancora preso questa issue.

Valutazione

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

Direzione di ricerca

Inizia dal design Figma e dall’entry point pianificato components/layout/SideNav.tsx, quindi esamina l’uso di MUI Drawer, Box e Stack. Il lavoro è completato quando il container SideNav esegue il rendering delle sezioni segnaposto per il logo, il menu e il profilo con la spaziatura, i bordi e l’ombra specificati, oltre a una struttura flessibile; il routing e il comportamento al passaggio del mouse sono fuori ambito.

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 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⁴.

Image

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

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.