Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#13 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend, web-dev

Línea de trabajo

Comienza revisando la configuración de routing existente y la carpeta components/layout antes de crear SideNav.tsx. Usa el diseño de Figma enlazado y las especificaciones de layout indicadas para definir la estructura de navegación y, después, verifica las rutas Projects, Ecosystem Map y Account Settings. Se considera terminado cuando se cumplen los criterios de aceptación, incluido el comportamiento hover en escritorio, el estilo del estado activo, el fallback responsive y las pruebas básicas de UI.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
HTML
Estrellas
2
Forks
11
Sin PR fusionados en 30 d

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de OpenSourceFellows/map_dashboard_hackathon

Todos los issues de OpenSourceFellows/map_dashboard_hackathon

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.