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

Create Projects icon component + routing

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

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

評価

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

調査の方向性

まず既存のサイドナビゲーションコンポーネントとルート構造、特に提案されているエントリポイントの components/sidenav/ と routes/ を調べ、次にアプリケーションを実行してその動作を Figma のデザインと比較します。既存のパターンを使用して Projects メニュー項目とルートを実装します。完了条件は、アイコンが選択状態と未選択状態に対応し、ホバーラベルと折りたたみ動作が機能し、サイドナビゲーションを表示したまま Conservation Projects ページがレンダリングされることです。

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

説明

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

主要言語
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 を短くまとめたダイジェスト。