Skip to content

fix: make TopNavbar sticky on scroll#138

Open
ankitkr104 wants to merge 1 commit intoStabilityNexus:mainfrom
ankitkr104:fix/sticky-topnavbar-137
Open

fix: make TopNavbar sticky on scroll#138
ankitkr104 wants to merge 1 commit intoStabilityNexus:mainfrom
ankitkr104:fix/sticky-topnavbar-137

Conversation

@ankitkr104
Copy link
Copy Markdown

@ankitkr104 ankitkr104 commented Apr 3, 2026

The navbar had no sticky/fixed positioning, so it scrolled away with the page content — making nav links, the wallet connector, and theme toggle completely inaccessible mid-page. and the elements of navbar this ([Reactor],[Swap],[History],[Docs]) are not in center. so, i fix it in center

Addressed Issues:

Fixes #137

Recordings:

Gold.mp4

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

  • This PR does not contain AI-generated code at all.
  • This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: TODO

Checklist

  • My PR addresses a single issue, fixes a single bug or makes a single improvement.
  • My code follows the project's code style and conventions
  • If applicable, I have made corresponding changes or additions to the documentation
  • If applicable, I have made corresponding changes or additions to tests
  • My changes generate no new warnings or errors
  • I have joined the Discord server and I will share a link to this PR with the project maintainers there
  • I have read the Contribution Guidelines
  • Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
  • I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

  • Style
    • Navigation bar now remains fixed at the top of the page when scrolling, improving accessibility and usability.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 3, 2026

Walkthrough

The TopNavbar component was updated to remain visible during page scrolling by applying sticky positioning (top-0 z-50), and its internal flex containers were adjusted to distribute space appropriately using flex-1 and justify-end properties.

Changes

Cohort / File(s) Summary
TopNavbar Layout Fix
src/lib/components/layout/TopNavbar.tsx
Added sticky positioning to navbar root container; updated left wrapper to use flex-1 for space distribution; updated right wrapper to use flex-1 and justify-end to align actions to the end.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

Typescript Lang

Poem

🐰 The navbar now sticks like a dream,
No more scrolling off-screen!
Sticky and true, with space-distribution flow,
Users can navigate high and low.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'fix: make TopNavbar sticky on scroll' directly and clearly summarizes the main change: adding sticky positioning to the TopNavbar component.
Linked Issues check ✅ Passed The changes implement the core requirement from issue #137: adding sticky positioning to TopNavbar so it remains visible during page scrolling, directly addressing the reported bug.
Out of Scope Changes check ✅ Passed All changes are narrowly scoped to making TopNavbar sticky with proper flex layout adjustments; no unrelated modifications are present.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: TopNavbar scrolls out of view on page scroll

1 participant