Epic Feature – Side Navigation (Expandable Nav + Routing + Account Access)
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 35/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- react, typescript
調査の方向性
SideNav.tsxを作成する前に、既存のrouting設定とcomponents/layoutフォルダーを確認することから始めます。リンクされたFigmaデザインと記載されたlayout仕様を使用してナビゲーション構造を定義し、その後、Projects、Ecosystem Map、Account Settingsの各ルートを確認します。デスクトップでのホバー動作、アクティブ状態のスタイリング、レスポンシブ時のフォールバック、基本的なUIテストを含む受け入れ基準を満たせば完了です。
索引モデルが issue の本文から書いたものです。
説明
Issue created with ChatGPT models' help¹
Description
This epic focuses on implementing the Side Navigation (Side Nav) component that appears on the left side of the application and provides primary navigation across the app¹. The side nav will include the ProgramEarth logo at the top, navigation icons in the middle, and a profile/account icon at the bottom².
On hover (desktop), the side nav should expand slightly to reveal labels next to icons, improving usability and discoverability³. Each icon will route to a specific page:
- Water droplet icon → Conservation Projects page
- Map icon → Ecosystem Map view
- Profile icon → Account Settings page⁴
The component should be built using Material UI (MUI) where possible and structured into reusable subcomponents⁵.
Goals
- Build reusable SideNav component¹
- Implement hover-based expand/collapse behavior (desktop)²
- Enable routing for each navigation icon³
- Match Figma layout and styling exactly⁴
- Consider extensibility for authentication/account features¹
- Consider mobile-friendly alternative (no hover)²
Implementation Instructions
- Create
SideNav.tsxcomponent under components/layout folder¹ - Use Material UI components (e.g., Drawer, Box, IconButton)²
- Create separate components for each nav item/icon³
- Implement hover state to expand nav width and show labels⁴
- Add routing using React Router (or existing routing setup)¹
- Logo click → redirect to ProgramEarth website²
- Projects icon → navigate to Saved Projects page³
- Map icon → navigate to Ecosystem Map view⁴
- Profile icon → navigate to Account Settings page¹
- Add basic state handling for selected/active menu item²
- Keep styling flexible (theme/styles folder integration later)³
Layout Specs (Figma)
side nav layout
- width: 86;¹
- height: 1049;²
- angle: 0 deg;³
- opacity: 1;⁴
- border-right-width: 2px;¹
- padding-right: 16px;²
- padding-left: 16px;³
- background: var(--Brand-white, #FFFFFF);⁴
- border-right: 2px solid var(--Grey-Border, #E8E8E8);¹
- box-shadow: 0px 20px 50px 0px #DCE0F980;²
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;⁴
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 bw menu item
- 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;³
profile pic icon button
- width: 54;¹
- height: 54;²
- angle: 0 deg;³
- opacity: 1;⁴
- border-radius: 15px;¹
- background: #82B1FF80;²
👉 On click:
- Navigate to: "Account Settings";¹
- Animate: Instant;²
- animation-duration: 0ms;³
bottom spacer
- Size="16px";¹
- Show=false;²
- width: 360;³
- height: 16;⁴
- angle: 0 deg;¹
- opacity: 1;²
Acceptance Criteria
- Side navigation renders with correct layout and styling¹
- Hover expands nav and shows labels (desktop)²
- All icons navigate to correct routes³
- Active/selected state is visually indicated⁴
- Profile icon navigates to account settings¹
- Layout matches Figma specifications²
- Mobile fallback behavior is considered³
Sub-Issues
- Implement hover expand/collapse behavior
- Implement active/selected state styling
- Add mobile behavior (click to expand or drawer mode)
- Integrate with routing system
- Add basic UI tests
Resources
¹ https://mui.com/material-ui/react-drawer/
² https://react.dev/learn/conditional-rendering
³ https://reactrouter.com/en/main/start/overview
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
Figma Design (Refer for full details): 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
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
OpenSourceFellows/map_dashboard_hackathon のほかの issue
-
California Tribal GIS Hackathon Intermediate
難易度 2/5 半日 初心者へのやさしさ 68/100
-
California Tribal GIS Hackathon Intermediate
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
-
Advanced California Tribal GIS Hackathon
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
-
Advanced California Tribal GIS Hackathon
難易度 3/5 1〜2日 初心者へのやさしさ 48/100
-
Advanced California Tribal GIS Hackathon
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
OpenSourceFellows/map_dashboard_hackathon の issue をすべて見る
似ている issue
-
Mondriaan
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
knaw-huc/textannoviz#709 ·
メンテナーはふだん 1 日以内に返信
-
About page content is also published as an unstyled duplicate at /about/about/対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
walletbeat/walletbeat#1558 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
hawk-digital-environments/HAWKI#443 ·
メンテナーはふだん 1 日以内に返信
-
area::timeline needs::triage regression
難易度 2/5 1〜3時間 初心者へのやさしさ 80/100
linagora/twake-on-matrix#3450 ·
メンテナーはふだん 3 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100