Create Projects icon component + routing

未关闭
  • 哪里不对？
#20 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
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. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

OpenSourceFellows/map_dashboard_hackathon 的其他 Issue

查看 OpenSourceFellows/map_dashboard_hackathon 的全部 Issue

相似的 Issue

更多 Web Dev Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。