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

Create Map icon component + routing

Đang mở
  • Có gì không ổn?
#19 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ó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/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 xác định các điểm vào hiện có của điều hướng bên và định tuyến; issue đề xuất components/sidenav/SideNav.tsx, MapIcon.tsx, NavMenuItem.tsx và routes/EcosystemMapRoute.tsx. So sánh các trạng thái trong Figma và hành vi bố cục hiện có, sau đó xác minh rằng việc nhấp vào mục bản đồ sẽ thay đổi chế độ xem nhưng vẫn giữ điều hướng bên, các nhãn khi di chuột và các trạng thái đã chọn/chưa chọn.

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

Mô tả

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

Description

Create the Ecosystem Map icon component used inside the side navigation and implement its routing/interaction behavior¹. When a user clicks the map icon, the application should navigate to the full-screen ecosystem map view containing map layers, markers, and project polygons while still preserving the side navigation on the left².

This issue mainly focuses on creating the frontend component, routing interaction, and selected/unselected menu states³.

The map icon component should visually support both selected and unselected states from the Figma design¹.

Image Image

Goals

  • Create reusable Map icon component¹
  • Implement routing to ecosystem/full map view²
  • Support selected/unselected icon states³
  • Show text labels beside icons on hover¹
  • Preserve side nav while switching map screens²

Implementation Instructions

  • Create reusable MapIcon or MapMenuItem component¹
  • Use React + TypeScript + Material UI²
  • Clicking icon should navigate to ecosystem map page³
  • Preserve side navigation on left side of layout⁴
  • Text labels should appear when side nav expands²
  • Contributors may use useState, useEffect, CSS transitions, or MUI transitions⁴
  • Keep implementation responsive for smaller screens¹

Expected Functionalities

Hover Interaction
  • User moves cursor over side nav²
  • Side nav expands horizontally³
  • Text labels appear next to icons⁴
  • Ecosystem Map label becomes visible¹
Click Interaction
  • User clicks Ecosystem Map icon²
  • App navigates to full ecosystem map page³
  • Full map view renders on right side of layout⁴
  • Side nav remains visible on left¹
Mouse Leave Interaction
  • Cursor leaves navigation area²
  • Side nav returns to original collapsed width³
  • Text labels disappear⁴

Figma Layout Specs

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 between menu items
  • 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;³

Suggested Technical Structure (Optional)

Possible component structure:¹

components/sidenav/
 ├── SideNav.tsx
 ├── MapIcon.tsx
 ├── NavMenuItem.tsx
 └── HoverLabel.tsx

Possible routing structure:²

routes/
 ├── EcosystemMapRoute.tsx
 ├── ProjectRoute.tsx
 └── AccountRoute.tsx

Notes

  • Hover label rendering may use useState, useEffect, CSS transitions, or Material UI transitions³
  • Keep component structure reusable for future navigation icons¹
  • Avoid tightly coupling routing logic directly into UI rendering where possible²

Acceptance Criteria

  • Map icon component renders correctly¹
  • Clicking icon navigates to ecosystem map page²
  • Text labels appear during hover-expanded state⁴
  • Side nav collapses correctly on mouse leave¹
  • Selected/unselected states visually work²
  • Ecosystem map renders with side nav preserved³
  • Component uses React + TypeScript + MUI⁴
  • Code structure supports future navigation scalability¹

Resources

¹ https://mui.com/material-ui/react-list/
² https://reactrouter.com/en/main/start/tutorial
³ https://react.dev/reference/react/useEffect
⁴ https://mui.com/material-ui/transitions/

Reference Figma Design:
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.