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 Logo component + click redirect

Đang mở
  • Có gì không ổn?
#21 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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
58/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
design, frontend, web-dev

Hướng nghiên cứu

Bắt đầu bằng cách xác định thanh điều hướng bên và so sánh nó với thiết kế Figma được tham chiếu; các điểm bắt đầu được đề xuất là components/sidenav/SideNav.tsx và ProgramEarthLogo.tsx. Triển khai logo có thể tái sử dụng và nhãn mở rộng với điều hướng bên ngoài an toàn, sau đó xác minh việc mở rộng khi di chuột qua, thu gọn khi chuột rời đi, cả hai mục tiêu nhấp, hành vi mở trong tab mới và trạng thái ứng dụng được giữ nguyê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 ProgramEarth logo component used inside the side navigation and implement its click redirect/navigation behavior¹. When a user clicks the ProgramEarth logo or the expanded hover label text, the application should open the ProgramEarth website in a new browser tab while preserving the current application state².

This issue mainly focuses on creating the frontend logo component, external redirect behavior, hover-expanded label interaction, and safe external link handling³.

The ProgramEarth logo component should visually support both collapsed and expanded side navigation states from the Figma design⁴.

Image Image Image

Goals

  • Create reusable ProgramEarth logo component¹
  • Implement redirect to ProgramEarth website²
  • Open external link safely in new tab³
  • Show ProgramEarth text label during hover-expanded state⁴
  • Make both logo and label clickable¹
  • Preserve side nav behavior while switching tabs²

Implementation Instructions

  • Create reusable LogoComponent or ProgramEarthLogo component¹
  • Use React + TypeScript + Material UI²
  • Clicking logo should open ProgramEarth website³
  • Clicking expanded ProgramEarth text label should also open website⁴
  • External link should open in new tab using safe link handling¹
  • Use target="_blank" with appropriate noopener and noreferrer protections²
  • Preserve side navigation layout behavior³
  • Text label 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³
  • Logo image asset should be obtained from Figma design

Expected Functionalities

Hover Interaction
  • User moves cursor over side nav¹
  • Side nav expands horizontally²
  • ProgramEarth label appears next to logo³
  • Logo and label remain clickable⁴
Click Interaction
  • User clicks ProgramEarth logo¹
  • OR user clicks ProgramEarth label²
  • ProgramEarth website opens in new browser tab³
  • Existing application session/tab remains open⁴
Mouse Leave Interaction
  • Cursor leaves navigation area¹
  • Side nav returns to original collapsed width²
  • Text labels disappear³

Figma Layout Specs

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;⁴

Suggested Technical Structure (Optional)

Possible component structure:¹

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

Possible utility structure:²

utils/
 ├── externalLinks.ts
 └── navigationHelpers.ts

Notes

  • Hover label rendering may use useState, useEffect, CSS transitions, or Material UI transitions³
  • Keep component structure reusable for future branding/navigation elements¹
  • Avoid tightly coupling redirect logic directly into UI rendering where possible²
  • External links should use safe browser security practices such as noopener and noreferrer³
  • ProgramEarth label should remain accessible and clickable during expanded hover state⁴

Acceptance Criteria

  • ProgramEarth logo component renders correctly¹
  • Clicking logo opens ProgramEarth website²
  • Clicking ProgramEarth text label opens website³
  • External link opens in new tab⁴
  • Safe external link protections (noopener, noreferrer) are implemented¹
  • Text labels appear during hover-expanded state²
  • Side nav collapses correctly on mouse leave³
  • Component uses React + TypeScript + MUI⁴
  • Code structure supports future navigation scalability¹

Resources

¹ Material UI List Documentation
² MDN window.open Documentation
³ React useEffect Documentation
⁴ Web.dev External Link Security Guide

ProgramEarth Website:
ProgramEarth Official Website

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

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ề Design

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.