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

Create SideNav container component

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

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
54/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Comienza con el diseño de Figma y el punto de entrada planificado components/layout/SideNav.tsx; después, revisa el uso de MUI Drawer, Box y Stack. Se considera terminado cuando el contenedor SideNav renderiza las secciones de marcador de posición del logo, el menú y el perfil con el espaciado, los bordes y la sombra especificados, además de una estructura flexible; el enrutamiento y el comportamiento al pasar el cursor están fuera del alcance.

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

Descripción

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

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.