Skip to content

Conversation

@CamSoper
Copy link
Contributor

Summary

Adds a search box to the tutorials left navigation to match the docs navigation, and restructures tutorial layouts for consistent behavior with the main docs.

Changes

  1. Added search box to tutorials navigation

    • Integrated Algolia search component into layouts/partials/tutorials/nav.html
    • Includes conditional rendering for production vs. development
    • Added visual placeholder for local development
  2. Restructured tutorial layout templates

    • Updated all 7 tutorial templates to use docs-style wrapper hierarchy
    • Ensures consistent sticky header behavior and scroll handling
    • Removed old sticky positioning that caused border intersection issues
  3. Adjusted search box spacing

    • Reduced top padding on nav.main-nav for tutorials
    • Added right margin to search box for better visual spacing

Files Changed

  • layouts/partials/tutorials/nav.html - Added search box, removed wrapper divs
  • layouts/tutorials/single.html - Restructured to match docs layout
  • layouts/tutorials/module.html - Restructured to match docs layout
  • layouts/tutorials/topic.html - Restructured to match docs layout
  • layouts/tutorials/section.html - Restructured to match docs layout
  • layouts/tutorials/glossary/single.html - Restructured to match docs layout
  • layouts/tutorials/glossary/list.html - Restructured to match docs layout
  • theme/src/scss/docs/_tutorials.scss - Adjusted search box spacing

Testing

  • Verified search box appears in left navigation on all tutorial pages
  • Confirmed consistent sticky header behavior between docs and tutorials
  • Checked search box spacing matches design requirements
  • Ran make lint (passed)

Fixes #16263

🤖 Generated with Claude Code

This change addresses issue #16263 by adding a search box to the
tutorials left navigation and restructuring tutorial layouts to match
the docs navigation pattern for consistent behavior.

Changes:
- Added Algolia search box to tutorials/nav.html with conditional
  rendering and development placeholder
- Restructured all tutorial layout templates (single, module, topic,
  section, glossary) to use the same wrapper hierarchy as docs
- Adjusted search box spacing for tutorials (reduced top padding,
  added right margin)
- Removed sticky positioning wrapper that was causing different
  scroll behavior

This ensures tutorials have the same navigation experience as the
main docs, with proper sticky header behavior and consistent styling.

Fixes #16263

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@pulumi-bot
Copy link
Collaborator

@CamSoper CamSoper enabled auto-merge (squash) October 17, 2025 21:08
@pulumi-bot
Copy link
Collaborator

@CamSoper CamSoper merged commit 75a3293 into master Oct 17, 2025
8 checks passed
@CamSoper CamSoper deleted the CamSoper/issue16263 branch October 17, 2025 21:17
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.

Add search box to tutorial left navigation

4 participants