Component: more NavBar variants (centered, floating, mega menu, sidebar, minimal, search)
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- react, tailwindcss, typescript
调研方向
Start by reading the existing NavBar component and its shared locale data, then review issues #44–#46 for the keyboard, RTL, and preview requirements. The issue asks for one separately claimed variant per PR; choose a variant and identify its registry, barrel export, docs, demo, and test entry points. Done when that variant meets the listed requirements and its acceptance checks pass.
由索引模型根据 Issue 内容生成。
描述
Summary
NavBar is the only navigation component. Add more navbar variants so users can pick a layout without restyling the base one. Each variant is a separate component and a separate PR; comment below to claim one.
Proposed variants
| Component | Description |
|---|---|
NavBarCentered |
Logo centered, links split left/right, language selector and CTA at the end. |
NavBarFloating |
Detached, rounded "pill" bar that floats over content with a blurred backdrop, and shrinks on scroll. |
NavBarMega |
Links can open a mega-menu panel with grouped sub-links and descriptions. |
NavBarSidebar |
Vertical side navigation for docs and dashboards, collapsible to icons, with the language selector in the footer. |
NavBarMinimal |
Logo plus language selector only, using LanguageSwitcherPill as the inline locale control. |
NavBarWithSearch |
Base bar plus a search field / command-palette trigger (⌘K). |
Requirements (every variant)
- Same conventions as
NavBar:value/defaultValue/onValueChangefor the locale.locales: Locale[]from./types.linkComponentfor router links.- Ref forwarding and passthrough of extra props to the root element.
- Locale labels and flags from the shared
./locale-datamodule. No local copies. - Language menus use
useListboxNavigation(#44) for keyboard support. - RTL:
dirderived from the active locale, logical utilities only (start/end,ms/me,text-start). See #45. - Responsive with a mobile menu at narrow widths; dark mode.
- Registry entry with correct
registryDependencies(npm run test:registrymust pass), a barrel export, a docs page with Installation / Usage / Props / Examples, a live demo, and tests. - Docs preview tall enough for the variant's popups (see #46).
Acceptance per PR
- One variant per PR, linked to this issue.
-
lint,format:check,typecheck,test,build:lib,test:packpass. - Screenshots: LTR and RTL, desktop and ~390px, light and dark.
- 主要语言
- TypeScript
- 星标
- 39
- 派生
- 16
- 平均合并
- 2 天 5 小时
- 30 天内合并 PR
- 12
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
babelize/babelize-elements 的其他 Issue
-
bug website
难度 2/5 1-3 小时 新手友好度 78/100
babelize/babelize-elements#46 ·
维护者通常 1 天内回复
-
bug language-switcher priority: medium
难度 2/5 1-3 小时 新手友好度 72/100
babelize/babelize-elements#26 ·
维护者通常 1 天内回复
-
bug component rtl-layout
难度 3/5 1-2 天 新手友好度 68/100
babelize/babelize-elements#45 ·
维护者通常 1 天内回复
-
Website: revamp and improve the landing page可能已有人在做 @anjalinayak01 于 7 天前认领。 未关闭enhancement help wanted priority: medium website
难度 4/5 一周以上 新手友好度 30/100
babelize/babelize-elements#37 · 已指派 1 人 ·
维护者通常 1 天内回复
-
component good first issue pluralization
难度 3/5 1-2 天 新手友好度 58/100
babelize/babelize-elements#34 ·
维护者通常 1 天内回复
查看 babelize/babelize-elements 的全部 Issue
相似的 Issue
-
backend priority:P3 privacy-fix
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
bug desktop v3 windows
难度 2/5 1-3 小时 新手友好度 65/100
esengine/DeepSeek-Reasonix#13697 · 1 条评论 ·
维护者通常 1 天内回复
-
area:security documentation effort:S priority:P2
难度 2/5 1-3 小时 新手友好度 65/100
维护者通常 1 天内回复
-
app:web meta:ops
难度 2/5 半天 新手友好度 78/100
osu-tournament-rating/otr#1113 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 82/100