Create SideNav container component

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

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
54/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
冷清
技术栈
react, typescript
领域
frontend

调研方向

从 Figma 设计和规划中的入口 components/layout/SideNav.tsx 开始，然后检查 MUI Drawer、Box 和 Stack 的使用。完成的标准是 SideNav 容器能够按照指定的间距、边框和阴影，以及灵活的结构，渲染 logo、菜单和 profile 占位区域；路由和悬停行为不在范围内。

由索引模型根据 Issue 内容生成。

描述

Beginner California Tribal GIS Hackathon
Issue created with ChatGPT models' help¹

Description

Create the main SideNav container component using React + Material UI (MUI) + TypeScript, which will act as the structural wrapper for all side navigation elements (logo, menu items, profile icon)¹. The component should follow the Figma layout closely and serve as the base container where individual nav item components will later be plugged in².

The focus of this issue is layout + structure + styling, not full functionality. Routing, icon logic, and hover expansion behavior can be handled in separate sub-issues³. However, the container should be designed in a way that supports these future enhancements cleanly⁴.

Image

Goals

  • Create reusable SideNav container component¹
  • Use Material UI components for layout (Drawer/Box/etc.)²
  • Implement TypeScript structure and types integration³
  • Match Figma layout and spacing exactly⁴
  • Prepare container for future child components (icons, routing, hover)¹

Implementation Instructions

  • Create SideNav.tsx under components/layout folder¹
  • Use MUI components such as Drawer, Box, Stack for layout²
  • Define TypeScript interfaces/types (either local or from types folder)³
  • Structure layout into sections: logo → menu → profile icon⁴
  • Apply styles using MUI sx prop or styles/theme folder¹
  • Keep layout flexible for hover expansion (future enhancement)²
  • Add placeholder elements for menu items and profile icon³
  • Do not implement full routing or logic in this issue⁴

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 (future):

  • 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 (future):

  • Navigate to: "Account Settings";¹
  • Animate: Instant;²
  • animation-duration: 0ms;³
bottom spacer
  • Size="16px";¹
  • Show=false;²
  • width: 360;³
  • height: 16;⁴
  • angle: 0 deg;¹
  • opacity: 1;²

Notes

  • Hover expansion width is not finalized, developers can assume ~20% screen width for now¹
  • Ensure layout is flexible enough to support expansion without breaking structure²

Acceptance Criteria

  • SideNav container renders with correct layout and spacing¹
  • Uses MUI components for structure²
  • TypeScript types/interfaces are defined and used³
  • Layout matches Figma specifications⁴
  • Component is cleanly structured for future enhancements¹

Resources

¹ https://mui.com/material-ui/react-drawer/
² https://react.dev/learn/typescript
³ https://react.dev/learn/passing-props-to-a-component
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

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
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 摘要。