Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#13 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react, typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu bằng cách kiểm tra cấu hình routing hiện có và thư mục components/layout trước khi tạo SideNav.tsx. Sử dụng thiết kế Figma được liên kết và các đặc tả layout đã liệt kê để xác định cấu trúc điều hướng, sau đó kiểm tra các route Projects, Ecosystem Map và Account Settings. Công việc được xem là hoàn tất khi các tiêu chí nghiệm thu đều đạt, bao gồm hành vi hover trên desktop, kiểu hiển thị của trạng thái đang hoạt động, fallback responsive và các bài kiểm thử UI cơ bản.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
HTML
Star
2
Fork
11
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của OpenSourceFellows/map_dashboard_hackathon

Tất cả issue của OpenSourceFellows/map_dashboard_hackathon

Issue tương tự

Thêm issue về Web Dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.