Skip to content

docs: Fix navbar collapse behavior #2802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Aug 13, 2025
Merged

docs: Fix navbar collapse behavior #2802

merged 1 commit into from
Aug 13, 2025
+116 −86

Conversation

dwgray
Copy link
Member

@dwgray dwgray commented Aug 6, 2025 •
edited by coderabbitai bot
Loading

Describe the PR

Clean up how navbar collapse/table of contents/on this page interact. Move it closer to how vite does things where on smaller screens the toc and top offcanvas components are controlled by link-style buttons below the navbar and the hamburger on the navbar controls the collapsed part of that component.

Also fix several marginally related esthetic issues that I ran across while doing the functional work above.

closes #2797

Small replication

A small replication or video walkthrough can help demonstrate the changes made. This is optional, but can help observe the intended changes. A mentioned issue that contains a replication also works.

PR checklist

What kind of change does this PR introduce? (check at least one)

  • Bugfix 🐛 - fix(...)
  • Feature - feat(...)
  • ARIA accessibility - fix(...)
  • Documentation update - docs(...)
  • Other (please describe)

The PR fulfills these requirements:

  • Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

Summary by CodeRabbit

  • New Features

    • Added a "Browse docs" button alongside the "On this page" toggle for improved navigation on small screens.
    • Enhanced responsive behavior of the navigation bar, including better alignment and grouping of navigation and utility elements.

  • Style

    • Improved spacing and alignment of icons and text in the table of contents navigation for a cleaner look.
    • Updated styling and layout of navbar elements for better usability across different screen sizes.

@bolt-new-by-stackblitz Bolt.new (by StackBlitz)
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai coderabbitai
Copy link

coderabbitai bot commented Aug 6, 2025 •
edited
Loading

Walkthrough

The navigation bar in the documentation layout was restructured for improved responsive behavior. The collapse mechanism was refactored, toggles were clarified and separated for the navbar and sidebar, and layout adjustments were made for better alignment and usability on small screens. Table of contents navigation styling was also refined.

Changes

Cohort / File(s) Change Summary
Docs Layout Navbar Refactor
apps/docs/.vitepress/theme/Layout.vue		 Refactored navbar collapse logic for responsiveness, moved toggle button, assigned explicit collapse IDs, reorganized right-aligned elements, introduced separate sidebar and on-this-page toggles for small screens, added new icon, and improved SSR media query handling.
Table of Contents Styling
apps/docs/src/components/TableOfContentsNav.vue		 Enhanced icon and header alignment by adding margin and flex alignment classes, improving visual layout without changing logic.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Navbar (Layout.vue)
    participant Sidebar (OnThisPage/Docs)
    participant CollapseMenu

    User->>Navbar: Clicks hamburger menu
    Navbar->>CollapseMenu: Toggles navbar links (collapsed/expanded)
    User->>Navbar: Clicks "Browse docs" button
    Navbar->>Sidebar: Toggles sidebar menu
    User->>Navbar: Clicks "On this page" button
    Navbar->>Sidebar: Toggles on-this-page menu
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Assessment against linked issues

Objective Addressed Explanation
Fix navbar collapse behavior on small screens so hamburger toggles collapsed navbar contents (#2797) ✅
Add a bar below navbar for sidebar/on-this-page toggles and clarify toggle controls (#2797) ✅
Emulate Vite's approach for responsive navbar/sidebar toggling (#2797) ✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes found.

Poem

A navbar hops, now crisp and neat,
Toggles clear for docs and cheats.
With icons bright and menus tight,
Responsive magic, day and night.
Sidebar, contents, all in tune—
This rabbit’s work will make you swoon!
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c50e0ef and d9fe1fa.

📒 Files selected for processing (2)
  • apps/docs/.vitepress/theme/Layout.vue (3 hunks)
  • apps/docs/src/components/TableOfContentsNav.vue (3 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings 
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.

Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
📚 Learning: the generic type parameter for table items should use the singular form `item` rather than the plura... 
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.

Applied to files:

  • apps/docs/src/components/TableOfContentsNav.vue
📚 Learning: in btabs component (packages/bootstrap-vue-next/src/components/btabs/btabs.vue), the complex initial... 
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.

Applied to files:

  • apps/docs/.vitepress/theme/Layout.vue
📚 Learning: the `` component in the bootstrap-vue-next documentation automatically renders t... 
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.

Applied to files:

  • apps/docs/.vitepress/theme/Layout.vue
📚 Learning: btooltip is a very thin wrapper around bpopover in bootstrap-vue-next. there is no separate `usetool... 
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.

Applied to files:

  • apps/docs/.vitepress/theme/Layout.vue
📚 Learning: in btabs component (packages/bootstrap-vue-next/src/components/btabs/btabs.vue), the activeindex and... 
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.

Applied to files:

  • apps/docs/.vitepress/theme/Layout.vue
🔇 Additional comments (4)
apps/docs/src/components/TableOfContentsNav.vue (1)

5-5: LGTM! Clean styling improvements for icon spacing and alignment.

The addition of me-2 class for icons and the expanded headerInsideClasses with flexbox properties properly aligns the icons and text within the navigation headers.

Also applies to: 16-16, 77-83

apps/docs/.vitepress/theme/Layout.vue (3)

8-8: Good implementation of responsive container switching with SSR support.

The conditional container property and the SSR width hint (ssrWidth: 1024) ensure consistent behavior between server and client rendering.

Also applies to: 263-263

34-88: Excellent fix for the navbar collapse behavior issue.

The restructuring correctly addresses issue #2797 by:

  1. Having the hamburger menu control the navbar collapse (nav-collapse) instead of the TOC
  2. Properly wrapping both main navigation and right-aligned items within the collapse component
  3. Maintaining proper alignment with ms-auto for the right-side items

This implementation aligns perfectly with the PR objectives.

91-116: Well-implemented toggle controls following the Vite pattern.

The separate toggle buttons for "Browse docs" (TOC) and "On this page" are properly:

  1. Positioned below the navbar as intended
  2. Only displayed on small screens when content exists
  3. Styled consistently with appropriate icons and link-style appearance
  4. Using the correct toggle directives for their respective offcanvas components

Also applies to: 214-214

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Aug 6, 2025

bsvn-vite-ts

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2802

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2802

commit: d9fe1fa

@dwgray dwgray mentioned this pull request Aug 9, 2025
Open
6 tasks
@VividLemon VividLemon merged commit 516ba8b into bootstrap-vue-next:main Aug 13, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@VividLemon VividLemon VividLemon approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Collapse behavior in the documentation navbar is broken
2 participants
@dwgray @VividLemon