Skip to content

Add search box to tutorials left navigation #16310

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

Merged
CamSoper merged 2 commits into from
Oct 17, 2025
Merged

Add search box to tutorials left navigation #16310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ba2e1e
Add search box to tutorials left navigation and unify layout structure
CamSoper Oct 17, 2025
725b847
Merge branch 'master' into CamSoper/issue16263
CamSoper Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 21 additions & 16 deletions layouts/partials/tutorials/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
<div class="docs-list-main">
<div class="docs-main-nav-toggle-wrapper">
<div class="docs-main-nav-wrapper">
<div class="docs-main-nav">
<nav class="main-nav">
{{/* Search box moved from top nav */}}
<div class="docs-search mb-4">
{{ if getenv "ALGOLIA_APP_ID" }}
<div
id="search"
data-app-id="{{ getenv "ALGOLIA_APP_ID" }}"
data-search-key="{{ getenv "ALGOLIA_APP_SEARCH_KEY" }}"
data-facets="Docs,Registry,Tutorials,Blog"
data-index="production"
></div>
{{ else }}
<!-- Visual placeholder styled like real search input -->
<div class="border border-gray-300 rounded bg-gray-50 px-3 py-2">
<div class="text-gray-500 text-sm">🔍 Search box location</div>
<div class="text-xs text-gray-400 mt-1">Algolia search would render here in production</div>
</div>
{{ end }}
</div>

{{ $menuItems := slice }}
{{ $currentPath := .RelPermalink}}
{{ $menuItems := slice }}
{{ $currentPath := .RelPermalink}}

{{/* On the home page and collection pages, show the getting-started guides and a list of non-empty collections. */}}
{{ if or (eq $currentPath "/tutorials/") (eq .Kind "term") }}
Expand Down Expand Up @@ -68,15 +81,7 @@

{{ end }}

{{ template "tutorials-menu" (dict "items" $menuItems) }}
</nav>
</div>
</div>
<div class="docs-nav-toggle">
<div class="docs-nav-toggle-icon icon icon-24-24 open-docs-main-nav"></div>
</div>
</div>
</div>
{{ template "tutorials-menu" (dict "items" $menuItems) }}

{{ define "tutorials-menu" }}
{{ range $item := .items }}
Expand Down
73 changes: 41 additions & 32 deletions layouts/tutorials/glossary/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,52 @@
{{ define "main" }}
<div class="container mx-auto flex items-start px-4 md:px-0">
<div class="md:w-3/12 my-8 sticky-sidebar md:pr-8">
<nav></nav>
<div class="docs-list-main">
<div class="docs-main-nav-toggle-wrapper">
<div class="docs-main-nav-wrapper">
<div id="docs-main-nav" class="docs-main-nav">
<nav class="main-nav">
{{ partial "tutorials/nav.html" . }}
</nav>
</div>
</div>
<div class="docs-nav-toggle">
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
</div>
</div>
<div class="md:w-7/12 my-8">
<header class="container mx-auto">
{{ partial "docs/breadcrumb.html" . }}
<h1>{{ .Title }}</h1>
</header>
<section class="container mx-auto my-8">
{{ .Content }}
</section>

{{ $terms := sort $.Site.Data.learn.glossary.entries "term" }}
{{ $page := . }}
<div class="docs-main-content-wrapper">
<div class="docs-main-content">
<header>
{{ partial "docs/breadcrumb.html" . }}
<h1>{{ .Title }}</h1>
</header>
<section class="my-8">
{{ .Content }}
</section>

{{ $terms := sort $.Site.Data.learn.glossary.entries "term" }}
{{ $page := . }}

<ul>
{{ range $terms }}
{{ $anchor := .term | anchorize }}
<li><a href="#{{ $anchor }}">{{ .term }}</a></li>
{{ end }}
</ul>

<ul>
{{ range $terms }}
{{ $anchor := .term | anchorize }}
<li><a href="#{{ $anchor }}">{{ .term }}</a></li>
{{ end }}
</ul>

{{ range $terms }}
{{ $anchor := .term | anchorize }}
<div class="flex-1 mt-8">
<h2 id="{{ $anchor }}" class="mt-2 mb-0">{{ .term }}</h2>
<p>{{ .description | markdownify }}</p>
<div class="flex-1 mt-8">
<h2 id="{{ $anchor }}" class="mt-2 mb-0">{{ .term }}</h2>
<p>{{ .description | markdownify }}</p>

{{ if .link }}
<p>
<a href="{{ relref $page .link }}">Read more &rarr;</a>
</p>
{{ end }}
</div>
{{ end }}
{{ if .link }}
<p>
<a href="{{ relref $page .link }}">Read more &rarr;</a>
</p>
{{ end }}
</div>
{{ end }}
</div>
</div>

<div class="md:w-2/12 md:ml-8 m8-8 "></div>
</div>
{{ end }}
42 changes: 26 additions & 16 deletions layouts/tutorials/glossary/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
{{ define "main" }}
<div class="container mx-auto flex items-start px-4 md:px-0">
<div class="md:w-3/12 my-8 sticky-sidebar md:pr-8">
<nav></nav>
</div>
<div class="md:w-7/12 my-8">
<header class="container mx-auto">
{{ partial "docs/breadcrumb.html" . }}
<h1>{{ .Title }}</h1>
</header>
<section class="container mx-auto my-8">
{{ .Content }}
</section>
<p>
<a href="/tutorials/glossary">&larr; Go back to the Glossary</a>
</p>
<div class="docs-list-main">
<div class="docs-main-nav-toggle-wrapper">
<div class="docs-main-nav-wrapper">
<div id="docs-main-nav" class="docs-main-nav">
<nav class="main-nav">
{{ partial "tutorials/nav.html" . }}
</nav>
</div>
</div>
<div class="docs-nav-toggle">
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
</div>
</div>

<div class="md:w-2/12 md:ml-8 m8-8 "></div>
<div class="docs-main-content-wrapper">
<div class="docs-main-content">
<header>
{{ partial "docs/breadcrumb.html" . }}
<h1>{{ .Title }}</h1>
</header>
<section class="my-8">
{{ .Content }}
</section>
<p>
<a href="/tutorials/glossary">&larr; Go back to the Glossary</a>
</p>
</div>
</div>
</div>
{{ end }}
27 changes: 19 additions & 8 deletions layouts/tutorials/module.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
{{ define "main" }}
<div class="flex mb-16 docs-list-main">
<div class="sticky top-12 max-h-75 xl:w-2/12">
{{ partial "tutorials/nav.html" . }}
<div class="docs-list-main">
<div class="docs-main-nav-toggle-wrapper">
<div class="docs-main-nav-wrapper">
<div id="docs-main-nav" class="docs-main-nav">
<nav class="main-nav">
{{ partial "tutorials/nav.html" . }}
</nav>
</div>
</div>
<div class="docs-nav-toggle">
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
</div>
</div>
<div class="mr-6 ml-4 flex justify-center xl:w-8/12 docs-main-content-wrapper">

<div class="docs-main-content-wrapper">
<div class="max-w-3xl docs-main-content">
<header class="mb-6">
{{ partial "tutorials/breadcrumb.html" . }}
Expand Down Expand Up @@ -82,10 +92,11 @@ <h2>Topics</h2>
</div>
</div>
</div>
</div>
<div class="sticky top-10 pt-8 max-h-75 xl:w-2/12 hidden xl:block">
{{ partial "tutorials/feedback.html" . }}
{{ partial "tutorials/right-nav-ad.html" }}

<div class="docs-table-of-contents docs-toc-desktop">
{{ partial "tutorials/feedback.html" . }}
{{ partial "tutorials/right-nav-ad.html" }}
</div>
</div>
</div>
{{ end }}
Expand Down
20 changes: 16 additions & 4 deletions layouts/tutorials/section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
{{ define "main" }}
<div class="flex mb-16">
<div class="sticky top-12 max-h-75">
{{ partial "tutorials/nav.html" . }}
<div class="docs-list-main">
<div class="docs-main-nav-toggle-wrapper">
<div class="docs-main-nav-wrapper">
<div id="docs-main-nav" class="docs-main-nav">
<nav class="main-nav">
{{ partial "tutorials/nav.html" . }}
</nav>
</div>
</div>
<div class="docs-nav-toggle">
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
</div>
</div>
<div class="mt-8 mr-6 ml-4 flex justify-center w-full">

<div class="docs-main-content-wrapper">
<div class="docs-main-content">
<div class="max-w-5xl">
<header class="mb-6">
{{ partial "tutorials/breadcrumb.html" . }}
Expand Down Expand Up @@ -128,6 +139,7 @@ <h3 class="no-anchor font-normal text-xl flex items-center">
</ul>
</div>
</div>
</div>
</div>
</div>
{{ end }}
Expand Down
27 changes: 18 additions & 9 deletions layouts/tutorials/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
{{ define "main" }}
<div class="flex mb-16 docs-list-main">
<div class="sticky top-12 max-h-75 xl:w-2/12">
<div class="xl:w-56 xl:px-4">
{{ partial "tutorials/nav.html" . }}
<div class="docs-list-main">
<div class="docs-main-nav-toggle-wrapper">
<div class="docs-main-nav-wrapper">
<div id="docs-main-nav" class="docs-main-nav">
<nav class="main-nav">
{{ partial "tutorials/nav.html" . }}
</nav>
</div>
</div>
<div class="docs-nav-toggle">
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
</div>
</div>
<div class="mr-6 ml-4 flex justify-center w-8/12 docs-main-content-wrapper">

<div class="docs-main-content-wrapper">
<div class="max-w-3xl docs-main-content">
<header class="mb-6">
{{ partial "templates/breadcrumb.html" . }}
Expand Down Expand Up @@ -64,10 +72,11 @@ <h2 class="mb-4">Prerequisites:</h2>
{{ .Content }}
</div>
</div>
</div>
<div class="sticky top-10 pt-8 max-h-75 xl:w-2/12 hidden xl:block">
{{ partial "tutorials/feedback.html" . }}
{{ partial "tutorials/right-nav-ad.html" }}

<div class="docs-table-of-contents docs-toc-desktop">
{{ partial "tutorials/feedback.html" . }}
{{ partial "tutorials/right-nav-ad.html" }}
</div>
</div>
</div>
{{ end }}
Expand Down
27 changes: 18 additions & 9 deletions layouts/tutorials/topic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
{{ define "main" }}
<div class="flex mb-16 docs-list-main">
<div class="sticky top-12 max-h-75 xl:w-2/12">
<div class="xl:w-56 xl:px-4">
{{ partial "tutorials/nav.html" . }}
<div class="docs-list-main">
<div class="docs-main-nav-toggle-wrapper">
<div class="docs-main-nav-wrapper">
<div id="docs-main-nav" class="docs-main-nav">
<nav class="main-nav">
{{ partial "tutorials/nav.html" . }}
</nav>
</div>
</div>
<div class="docs-nav-toggle">
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
</div>
</div>
<div class="mr-6 ml-4 flex justify-center xl:w-8/12 docs-main-content-wrapper">

<div class="docs-main-content-wrapper">
<div class="max-w-3xl docs-main-content">
<header class="mb-6">
{{ partial "tutorials/breadcrumb.html" . }}
Expand All @@ -25,10 +33,11 @@ <h1>{{ .Title }}</h1>
{{ .Content }}
</div>
</div>
</div>
<div class="sticky top-10 pt-8 max-h-75 xl:w-2/12 hidden xl:block">
{{ partial "tutorials/feedback.html" . }}
{{ partial "tutorials/right-nav-ad.html" }}

<div class="docs-table-of-contents docs-toc-desktop">
{{ partial "tutorials/feedback.html" . }}
{{ partial "tutorials/right-nav-ad.html" }}
</div>
</div>
</div>
{{ end }}
Expand Down
7 changes: 7 additions & 0 deletions theme/src/scss/docs/_tutorials.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@
background: linear-gradient(90deg, map-get($brand, "yellow") 0%, map-get($brand, "salmon") 18.23%, map-get($brand, "fuchsia-darker") 38.02%, map-get($brand, "purple") 53.65%, map-get($brand, "violet") 74.48%, map-get($brand, "blue-lighter") 100%);
}

// Adjust search box spacing in tutorials
.docs-search {
@apply mr-4;
}

nav.main-nav {
padding-top: 1.5rem !important;

div.toc-header {
@apply ml-0;

Expand Down
Loading