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 Projects icon component + routing

Đang mở
  • Có gì không ổn?
#20 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 kiểm tra các component điều hướng bên và cấu trúc route hiện có, đặc biệt là các entry point được đề xuất components/sidenav/ và routes/, sau đó chạy ứng dụng để so sánh hành vi của ứng dụng với thiết kế Figma. Triển khai mục menu và route Projects theo các pattern hiện có. Hoàn thành khi icon hỗ trợ các trạng thái được chọn và không được chọn, nhãn khi di chuột và hành vi thu gọn hoạt động, đồng thời trang Conservation Projects được render trong khi điều hướng bên vẫn hiển thị.

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 Projects icon component used inside the side navigation and implement its routing/interaction behavior¹. When a user clicks the Projects icon, the application should navigate to the Conservation Projects page while preserving the side navigation on the left side of the layout².

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

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

Image Image

Goals

  • Create reusable Projects icon component¹
  • Implement routing to Conservation Projects page²
  • Support selected/unselected icon states³
  • Show text labels beside icons on hover¹
  • Preserve side nav while switching pages²

Implementation Instructions

  • Create reusable ProjectsIcon or ProjectsMenuItem component¹
  • Use React + TypeScript + Material UI²
  • Clicking icon should navigate to Conservation Projects page³
  • Preserve side navigation on left side of layout⁴
  • Text labels should appear when side nav expands²
  • On mouse leave, side nav should collapse back to original size³
  • Contributors may use useState, useEffect, CSS transitions, or MUI transitions⁴
  • Keep implementation responsive for smaller screens¹
  • Component may later integrate with conservation projects functionality and project routing²

Expected Functionalities

Hover Interaction
  • User moves cursor over side nav³
  • Side nav expands horizontally⁴
  • Text labels appear next to icons¹
  • Projects label becomes visible²
Click Interaction
  • User clicks Projects icon³
  • App navigates to Conservation Projects page⁴
  • Projects page 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

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 between menu items
  • Size="24px";¹
  • Show=false;²
  • width: 360;³
  • height: 24;⁴
  • angle: 0 deg;¹
  • opacity: 1;²
Projects 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
 ├── ProjectsIcon.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³
  • Exact hover expansion width is not finalized; contributors may use reasonable defaults until finalized by maintainers⁴
  • Keep component structure reusable for future navigation icons¹
  • Avoid tightly coupling routing logic directly into UI rendering where possible²
  • Conservation Projects page functionality may expand later through related epic issues³

Acceptance Criteria

  • Projects icon component renders correctly¹
  • Clicking icon navigates to Conservation Projects page²
  • Text labels appear during hover-expanded state⁴
  • Selected/unselected states visually work²
  • Projects page renders with side nav preserved³
  • Component uses React + TypeScript + MUI⁴
  • Code structure supports future navigation scalability¹

Resources

¹ Material UI List Documentation
² React Router Documentation
³ React useEffect Documentation
⁴ Material UI Transitions Documentation

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.