Create Map icon component + routing
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 48/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- react, typescript
调研方向
首先定位现有的侧边导航和路由入口；issue 建议查看 components/sidenav/SideNav.tsx、MapIcon.tsx、NavMenuItem.tsx 和 routes/EcosystemMapRoute.tsx。比较 Figma 中的状态和现有布局行为，然后验证点击地图项会改变视图，同时保留侧边导航、悬停标签以及选中/未选中状态。
由索引模型根据 Issue 内容生成。
描述
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¹.
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
MapIconorMapMenuItemcomponent¹ - 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/
- 主要语言
- HTML
- 星标
- 2
- 派生
- 11
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 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
-
🐞 bug 🧐 unconfirmed
难度 2/5 1-3 小时 新手友好度 66/100
Tencent/tdesign-vue-next#7032 · 1 条评论 ·
维护者通常 1 天内回复
-
Onboarding form: instructor radio never pre-selected "Yes" (permission vs permissions typo)可能已有人在做 @ThakuraAnki 今天认领。 未关闭bug
难度 1/5 1 小时以内 新手友好度 72/100
WikiEducationFoundation/WikiEduDashboard#7235 ·
维护者通常 1 天内回复
-
Component: Frontend Component: Web Component Type: Maintenance
难度 2/5 1-3 小时 新手友好度 76/100
it-at-m/refarch-templates#1944 ·
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
gnosis/gnosis_vpn#661 ·
维护者通常 1 天内回复
-
kind/bug
难度 2/5 1-3 小时 新手友好度 82/100
kubernetes-sigs/headlamp#8175 ·
维护者通常 2 天内回复