Epic Feature – Side Navigation (Expandable Nav + Routing + Account Access)
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- react, typescript
调研方向
先检查现有的 routing 配置和 components/layout 文件夹，再创建 SideNav.tsx。使用链接的 Figma 设计和列出的 layout 规范定义导航结构，然后验证 Projects、Ecosystem Map 和 Account Settings 路由。满足验收标准即表示完成，包括桌面端悬停行为、活动状态样式、响应式 fallback 以及基本 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 文件
- 有 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
-
难度 2/5 1-3 小时 新手友好度 75/100
killbill/killbill-admin-ui#673 ·
-
难度 2/5 1-3 小时 新手友好度 75/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 75/100
cloudflare/vinext#4301 ·
维护者通常 1 天内回复
-
bug Frontend
难度 2/5 1-3 小时 新手友好度 70/100
nextcloud/cookbook#3497 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
farion1231/cc-switch#8863 · 1 条评论 ·
维护者通常 1 天内回复