Skip to content

Commit 75a3293

Browse files
CamSoperclaude
CamSoper
and
claude
authored
Add search box to tutorials left navigation and unify layout structure (#16310)
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 <[email protected]>
1 parent dffff2c commit 75a3293

File tree

8 files changed

+166
-94
lines changed

8 files changed

+166
-94
lines changed

‎layouts/partials/tutorials/nav.html‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
1-
<div class="docs-list-main">
2-
<div class="docs-main-nav-toggle-wrapper">
3-
<div class="docs-main-nav-wrapper">
4-
<div class="docs-main-nav">
5-
<nav class="main-nav">
1+
{{/* Search box moved from top nav */}}
2+
<div class="docs-search mb-4">
3+
{{ if getenv "ALGOLIA_APP_ID" }}
4+
<div
5+
id="search"
6+
data-app-id="{{ getenv "ALGOLIA_APP_ID" }}"
7+
data-search-key="{{ getenv "ALGOLIA_APP_SEARCH_KEY" }}"
8+
data-facets="Docs,Registry,Tutorials,Blog"
9+
data-index="production"
10+
></div>
11+
{{ else }}
12+
<!-- Visual placeholder styled like real search input -->
13+
<div class="border border-gray-300 rounded bg-gray-50 px-3 py-2">
14+
<div class="text-gray-500 text-sm">🔍 Search box location</div>
15+
<div class="text-xs text-gray-400 mt-1">Algolia search would render here in production</div>
16+
</div>
17+
{{ end }}
18+
</div>
619

7-
{{ $menuItems := slice }}
8-
{{ $currentPath := .RelPermalink}}
20+
{{ $menuItems := slice }}
21+
{{ $currentPath := .RelPermalink}}
922

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

6982
{{ end }}
7083

71-
{{ template "tutorials-menu" (dict "items" $menuItems) }}
72-
</nav>
73-
</div>
74-
</div>
75-
<div class="docs-nav-toggle">
76-
<div class="docs-nav-toggle-icon icon icon-24-24 open-docs-main-nav"></div>
77-
</div>
78-
</div>
79-
</div>
84+
{{ template "tutorials-menu" (dict "items" $menuItems) }}
8085

8186
{{ define "tutorials-menu" }}
8287
{{ range $item := .items }}

‎layouts/tutorials/glossary/list.html‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,52 @@
11
{{ define "main" }}
2-
<div class="container mx-auto flex items-start px-4 md:px-0">
3-
<div class="md:w-3/12 my-8 sticky-sidebar md:pr-8">
4-
<nav></nav>
2+
<div class="docs-list-main">
3+
<div class="docs-main-nav-toggle-wrapper">
4+
<div class="docs-main-nav-wrapper">
5+
<div id="docs-main-nav" class="docs-main-nav">
6+
<nav class="main-nav">
7+
{{ partial "tutorials/nav.html" . }}
8+
</nav>
9+
</div>
10+
</div>
11+
<div class="docs-nav-toggle">
12+
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
13+
</div>
514
</div>
6-
<div class="md:w-7/12 my-8">
7-
<header class="container mx-auto">
8-
{{ partial "docs/breadcrumb.html" . }}
9-
<h1>{{ .Title }}</h1>
10-
</header>
11-
<section class="container mx-auto my-8">
12-
{{ .Content }}
13-
</section>
1415

15-
{{ $terms := sort $.Site.Data.learn.glossary.entries "term" }}
16-
{{ $page := . }}
16+
<div class="docs-main-content-wrapper">
17+
<div class="docs-main-content">
18+
<header>
19+
{{ partial "docs/breadcrumb.html" . }}
20+
<h1>{{ .Title }}</h1>
21+
</header>
22+
<section class="my-8">
23+
{{ .Content }}
24+
</section>
25+
26+
{{ $terms := sort $.Site.Data.learn.glossary.entries "term" }}
27+
{{ $page := . }}
1728

29+
<ul>
30+
{{ range $terms }}
31+
{{ $anchor := .term | anchorize }}
32+
<li><a href="#{{ $anchor }}">{{ .term }}</a></li>
33+
{{ end }}
34+
</ul>
1835

19-
<ul>
2036
{{ range $terms }}
2137
{{ $anchor := .term | anchorize }}
22-
<li><a href="#{{ $anchor }}">{{ .term }}</a></li>
23-
{{ end }}
24-
</ul>
25-
26-
{{ range $terms }}
27-
{{ $anchor := .term | anchorize }}
28-
<div class="flex-1 mt-8">
29-
<h2 id="{{ $anchor }}" class="mt-2 mb-0">{{ .term }}</h2>
30-
<p>{{ .description | markdownify }}</p>
38+
<div class="flex-1 mt-8">
39+
<h2 id="{{ $anchor }}" class="mt-2 mb-0">{{ .term }}</h2>
40+
<p>{{ .description | markdownify }}</p>
3141

32-
{{ if .link }}
33-
<p>
34-
<a href="{{ relref $page .link }}">Read more &rarr;</a>
35-
</p>
36-
{{ end }}
37-
</div>
38-
{{ end }}
42+
{{ if .link }}
43+
<p>
44+
<a href="{{ relref $page .link }}">Read more &rarr;</a>
45+
</p>
46+
{{ end }}
47+
</div>
48+
{{ end }}
49+
</div>
3950
</div>
40-
41-
<div class="md:w-2/12 md:ml-8 m8-8 "></div>
4251
</div>
4352
{{ end }}

‎layouts/tutorials/glossary/single.html‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
{{ define "main" }}
2-
<div class="container mx-auto flex items-start px-4 md:px-0">
3-
<div class="md:w-3/12 my-8 sticky-sidebar md:pr-8">
4-
<nav></nav>
5-
</div>
6-
<div class="md:w-7/12 my-8">
7-
<header class="container mx-auto">
8-
{{ partial "docs/breadcrumb.html" . }}
9-
<h1>{{ .Title }}</h1>
10-
</header>
11-
<section class="container mx-auto my-8">
12-
{{ .Content }}
13-
</section>
14-
<p>
15-
<a href="/tutorials/glossary">&larr; Go back to the Glossary</a>
16-
</p>
2+
<div class="docs-list-main">
3+
<div class="docs-main-nav-toggle-wrapper">
4+
<div class="docs-main-nav-wrapper">
5+
<div id="docs-main-nav" class="docs-main-nav">
6+
<nav class="main-nav">
7+
{{ partial "tutorials/nav.html" . }}
8+
</nav>
9+
</div>
10+
</div>
11+
<div class="docs-nav-toggle">
12+
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
13+
</div>
1714
</div>
1815

19-
<div class="md:w-2/12 md:ml-8 m8-8 "></div>
16+
<div class="docs-main-content-wrapper">
17+
<div class="docs-main-content">
18+
<header>
19+
{{ partial "docs/breadcrumb.html" . }}
20+
<h1>{{ .Title }}</h1>
21+
</header>
22+
<section class="my-8">
23+
{{ .Content }}
24+
</section>
25+
<p>
26+
<a href="/tutorials/glossary">&larr; Go back to the Glossary</a>
27+
</p>
28+
</div>
29+
</div>
2030
</div>
2131
{{ end }}

‎layouts/tutorials/module.html‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
{{ define "main" }}
2-
<div class="flex mb-16 docs-list-main">
3-
<div class="sticky top-12 max-h-75 xl:w-2/12">
4-
{{ partial "tutorials/nav.html" . }}
2+
<div class="docs-list-main">
3+
<div class="docs-main-nav-toggle-wrapper">
4+
<div class="docs-main-nav-wrapper">
5+
<div id="docs-main-nav" class="docs-main-nav">
6+
<nav class="main-nav">
7+
{{ partial "tutorials/nav.html" . }}
8+
</nav>
9+
</div>
10+
</div>
11+
<div class="docs-nav-toggle">
12+
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
13+
</div>
514
</div>
6-
<div class="mr-6 ml-4 flex justify-center xl:w-8/12 docs-main-content-wrapper">
15+
16+
<div class="docs-main-content-wrapper">
717
<div class="max-w-3xl docs-main-content">
818
<header class="mb-6">
919
{{ partial "tutorials/breadcrumb.html" . }}
@@ -82,10 +92,11 @@ <h2>Topics</h2>
8292
</div>
8393
</div>
8494
</div>
85-
</div>
86-
<div class="sticky top-10 pt-8 max-h-75 xl:w-2/12 hidden xl:block">
87-
{{ partial "tutorials/feedback.html" . }}
88-
{{ partial "tutorials/right-nav-ad.html" }}
95+
96+
<div class="docs-table-of-contents docs-toc-desktop">
97+
{{ partial "tutorials/feedback.html" . }}
98+
{{ partial "tutorials/right-nav-ad.html" }}
99+
</div>
89100
</div>
90101
</div>
91102
{{ end }}

‎layouts/tutorials/section.html‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
{{ define "main" }}
2-
<div class="flex mb-16">
3-
<div class="sticky top-12 max-h-75">
4-
{{ partial "tutorials/nav.html" . }}
2+
<div class="docs-list-main">
3+
<div class="docs-main-nav-toggle-wrapper">
4+
<div class="docs-main-nav-wrapper">
5+
<div id="docs-main-nav" class="docs-main-nav">
6+
<nav class="main-nav">
7+
{{ partial "tutorials/nav.html" . }}
8+
</nav>
9+
</div>
10+
</div>
11+
<div class="docs-nav-toggle">
12+
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
13+
</div>
514
</div>
6-
<div class="mt-8 mr-6 ml-4 flex justify-center w-full">
15+
16+
<div class="docs-main-content-wrapper">
17+
<div class="docs-main-content">
718
<div class="max-w-5xl">
819
<header class="mb-6">
920
{{ partial "tutorials/breadcrumb.html" . }}
@@ -128,6 +139,7 @@ <h3 class="no-anchor font-normal text-xl flex items-center">
128139
</ul>
129140
</div>
130141
</div>
142+
</div>
131143
</div>
132144
</div>
133145
{{ end }}

‎layouts/tutorials/single.html‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
{{ define "main" }}
2-
<div class="flex mb-16 docs-list-main">
3-
<div class="sticky top-12 max-h-75 xl:w-2/12">
4-
<div class="xl:w-56 xl:px-4">
5-
{{ partial "tutorials/nav.html" . }}
2+
<div class="docs-list-main">
3+
<div class="docs-main-nav-toggle-wrapper">
4+
<div class="docs-main-nav-wrapper">
5+
<div id="docs-main-nav" class="docs-main-nav">
6+
<nav class="main-nav">
7+
{{ partial "tutorials/nav.html" . }}
8+
</nav>
9+
</div>
10+
</div>
11+
<div class="docs-nav-toggle">
12+
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
613
</div>
714
</div>
8-
<div class="mr-6 ml-4 flex justify-center w-8/12 docs-main-content-wrapper">
15+
16+
<div class="docs-main-content-wrapper">
917
<div class="max-w-3xl docs-main-content">
1018
<header class="mb-6">
1119
{{ partial "templates/breadcrumb.html" . }}
@@ -64,10 +72,11 @@ <h2 class="mb-4">Prerequisites:</h2>
6472
{{ .Content }}
6573
</div>
6674
</div>
67-
</div>
68-
<div class="sticky top-10 pt-8 max-h-75 xl:w-2/12 hidden xl:block">
69-
{{ partial "tutorials/feedback.html" . }}
70-
{{ partial "tutorials/right-nav-ad.html" }}
75+
76+
<div class="docs-table-of-contents docs-toc-desktop">
77+
{{ partial "tutorials/feedback.html" . }}
78+
{{ partial "tutorials/right-nav-ad.html" }}
79+
</div>
7180
</div>
7281
</div>
7382
{{ end }}

‎layouts/tutorials/topic.html‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
{{ define "main" }}
2-
<div class="flex mb-16 docs-list-main">
3-
<div class="sticky top-12 max-h-75 xl:w-2/12">
4-
<div class="xl:w-56 xl:px-4">
5-
{{ partial "tutorials/nav.html" . }}
2+
<div class="docs-list-main">
3+
<div class="docs-main-nav-toggle-wrapper">
4+
<div class="docs-main-nav-wrapper">
5+
<div id="docs-main-nav" class="docs-main-nav">
6+
<nav class="main-nav">
7+
{{ partial "tutorials/nav.html" . }}
8+
</nav>
9+
</div>
10+
</div>
11+
<div class="docs-nav-toggle">
12+
<div class="docs-nav-toggle-icon icon icon-24-24"></div>
613
</div>
714
</div>
8-
<div class="mr-6 ml-4 flex justify-center xl:w-8/12 docs-main-content-wrapper">
15+
16+
<div class="docs-main-content-wrapper">
917
<div class="max-w-3xl docs-main-content">
1018
<header class="mb-6">
1119
{{ partial "tutorials/breadcrumb.html" . }}
@@ -25,10 +33,11 @@ <h1>{{ .Title }}</h1>
2533
{{ .Content }}
2634
</div>
2735
</div>
28-
</div>
29-
<div class="sticky top-10 pt-8 max-h-75 xl:w-2/12 hidden xl:block">
30-
{{ partial "tutorials/feedback.html" . }}
31-
{{ partial "tutorials/right-nav-ad.html" }}
36+
37+
<div class="docs-table-of-contents docs-toc-desktop">
38+
{{ partial "tutorials/feedback.html" . }}
39+
{{ partial "tutorials/right-nav-ad.html" }}
40+
</div>
3241
</div>
3342
</div>
3443
{{ end }}

‎theme/src/scss/docs/_tutorials.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@
1010
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%);
1111
}
1212

13+
// Adjust search box spacing in tutorials
14+
.docs-search {
15+
@apply mr-4;
16+
}
17+
1318
nav.main-nav {
19+
padding-top: 1.5rem !important;
20+
1421
div.toc-header {
1522
@apply ml-0;
1623

0 commit comments

Comments
 (0)