Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Create Map icon component + routing

オープン
  • 何か問題がありますか？
#19 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
48/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
react, typescript
領域
frontend, web-dev

調査の方向性

まず、既存のサイドナビゲーションとルーティングのエントリーポイントを特定します。この issue では components/sidenav/SideNav.tsx、MapIcon.tsx、NavMenuItem.tsx、routes/EcosystemMapRoute.tsx が示されています。Figma の状態と既存のレイアウト動作を比較し、その後、マップ項目をクリックするとサイドナビゲーション、ホバーラベル、選択済み/未選択の状態を維持したままビューが切り替わることを確認します。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
HTML
スター
2
フォーク
11
30日以内にマージされた PR はありません

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

OpenSourceFellows/map_dashboard_hackathon のほかの issue

OpenSourceFellows/map_dashboard_hackathon の issue をすべて見る

似ている issue

Web Dev の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。