bug: align the Notes navbar with the full-width student workspace header

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

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
62/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
nextjs, react, typescript
领域
frontend

调研方向

从 src/components/site-header.tsx 开始，其中工作区路由条件列出了 /account、/learn 和 /practice，但没有 /dashboard，而 Notes 设置了 max-w-7xl 和 relative 定位。将 Notes 的页头类名与 Practice 的处理方式进行比较，然后在浏览器中于 360px、768px 和 1440px 宽度下检查 Notes 及其嵌套路由。完成标准是：Notes 与 Practice 的 logo 和账户菜单对齐方式以及页头尺寸一致，没有水平溢出，并且点击目标至少为 44px。

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

描述

area:frontend bug

What happened?

The Notes section does not use the same full-width navbar alignment as the student workspace. In the owner's production screenshot of /dashboard, the logo and account menu are inset inside a centered container. In the supplied /practice reference, the logo sits near the left viewport edge and the account menu sits near the right edge.

Practice is the approved reference for the Notes navbar. Shared navigation should feel consistent across the application.

Steps to reproduce

  1. Open https://procoderji.com/dashboard on desktop.
  2. Observe the horizontal positions of the logo, main navigation and account menu.
  3. Open https://procoderji.com/practice at the same viewport width.
  4. Compare: the Notes header is constrained, while the Practice header uses the available width.

Expected behavior

Use the existing Practice navbar's full-width alignment, spacing, typography, white background, subtle border and scrolling behavior for Notes and its nested pages. Continue using one shared SiteHeader with the same logo, links/order and account menu; highlight the current section.

Code pointers

In src/components/site-header.tsx, the workspace route condition includes /account, /learn and /practice but excludes /dashboard. It selects w-full and sticky positioning for workspace routes, while Notes receives max-w-7xl and relative positioning. Review this route treatment before introducing any additional header component.

This observation comes from the current source and owner-supplied screenshots; desktop/mobile browser verification remains part of implementation.

Acceptance criteria

  • At the same desktop viewport, Notes and Practice have matching logo/account-menu alignment and header dimensions.
  • Nested Notes routes retain the same shared-header treatment and active Browse Notes link.
  • Header scrolling behavior is consistent with the approved student-workspace reference.
  • At 360px, 768px and 1440px, menus remain usable with no horizontal overflow and at least 44px tap targets.
  • Preserve the existing Notes catalogue/reader functionality, current copy and yellow brand design.
  • Keep Home's hero transparency behavior covered separately by #101, and signed-in display names by #102.

Planning

Backlog bug report. Record the Practice screenshot as the expected reference; implementation will be scheduled separately through an issue-linked contribution.

Production release at reporting: 9e2b9c00556de0387b09e937ffbefbd4eb9e0919.

主要语言
TypeScript
星标
1
派生
1
平均合并
8 小时 58 分钟
30 天内合并 PR
37

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

procoderji-com/procoderji 的其他 Issue

查看 procoderji-com/procoderji 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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