From ccbdabd4aefe6da388d42ae9ec54718db688a958 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 13 May 2025 11:06:30 +0100 Subject: [PATCH 1/5] Sidebar: Fix scroll height, remove chad comments --- assets/css/v2/style.css | 11 ++++------- assets/js/sidebar-v2.js | 16 ---------------- 2 files changed, 4 insertions(+), 23 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index ff2184f..9b19186 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -459,12 +459,11 @@ nav { .sidebar-layout { display: flex; flex-direction: column; - position: relative; /* required for absolute-positioned pseudo element */ + position: relative; z-index: 2; - min-height: 100vh; + min-height: 74vh; } -/* this is the complete, corrected CSS you can directly copy/paste clearly: */ .sidebar-layout::before { content: ""; position: absolute; @@ -785,9 +784,9 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { padding-top: 1.5rem; align-items: start; overflow-y: auto; + overflow-x: hidden; color: var(--color-foreground); - /* Reset/Renormalize lists to remove default browser styling */ .sidebar__container, .sidebar__container button, .sidebar__container ul, @@ -1481,10 +1480,8 @@ a:has(code:not(pre code)) { padding: 0.15rem 0.5rem; font-size: 0.75rem; z-index: 999; - /* position: absolute; */ background-color: white; margin: 0 0 -1px 0; - /* box-shadow: 2px 2px 0px var(--color-shadow); */ } .code-container { @@ -1636,7 +1633,7 @@ hr { background-repeat: no-repeat; background-size: contain; background-position: left center; - width: 200px; /* Adjust the width as needed to fit the logo */ + width: 200px; img { display: none; diff --git a/assets/js/sidebar-v2.js b/assets/js/sidebar-v2.js index 3efb8c5..a55e256 100644 --- a/assets/js/sidebar-v2.js +++ b/assets/js/sidebar-v2.js @@ -16,19 +16,3 @@ document.addEventListener('click', (e) => { } } }); - -document.addEventListener('DOMContentLoaded', () => { - const sidebar = document.querySelector('.sidebar__ul'); - - if (!sidebar) return; - - const activeLink = sidebar.querySelector('.sidebar__link--current'); - - if (activeLink) { - activeLink.scrollIntoView({ - behavior: 'auto', - block: 'center', - inline: 'nearest', - }); - } -}); From 2860b63b0ecf8e5c916856f0f4605c366aa2c407 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 13 May 2025 11:45:09 +0100 Subject: [PATCH 2/5] Sidebar: Add overview page where _index.md has content --- .../test-product/sidebar/nesting-1b/_index.md | 3 ++ layouts/partials/sidebar-list.html | 30 +++++++++---------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/exampleSite/content/test-product/sidebar/nesting-1b/_index.md b/exampleSite/content/test-product/sidebar/nesting-1b/_index.md index 23035ac..c626598 100644 --- a/exampleSite/content/test-product/sidebar/nesting-1b/_index.md +++ b/exampleSite/content/test-product/sidebar/nesting-1b/_index.md @@ -2,3 +2,6 @@ description: Nesting-1b title: Nesting-1b --- + +1b has some content, but also some nested stuff. +This should cause an overview page to render. \ No newline at end of file diff --git a/layouts/partials/sidebar-list.html b/layouts/partials/sidebar-list.html index 5707779..10a7e66 100644 --- a/layouts/partials/sidebar-list.html +++ b/layouts/partials/sidebar-list.html @@ -2,7 +2,6 @@ {{ $currentPage := .currentPage }} {{ $firstSection := .firstSection }} {{ $idPrefix := .idPrefix }} - {{ with $firstSection }}
    {{ $pages := .Pages.ByWeight }} @@ -10,13 +9,10 @@ {{- $onPage := eq $currentUrl $p.Permalink -}} {{- $isAncestor := $p.IsAncestor $currentPage -}} {{- $shouldExpand := or $onPage $isAncestor -}} - {{/* These variables are used to create a unique id to be attached to every link - that accessibility users can correctly "Skip Table Of Contents" */}} {{- $sectionID := printf "%ssection-%s" $idPrefix (urlize $p.Permalink) -}} {{- $linkID := printf "%slink-%s" $idPrefix (urlize $p.Permalink) -}} {{- $nextIndex := add $index 1 -}} {{- $nextLink := index $pages $nextIndex -}} - {{ if eq $p.Kind "section" }}
    • - {{ else if eq $p.Kind "page" }} {{- $tocHasItems := (in $p.TableOfContents "
  • ") -}} {{- $pageHasTOC := (and $onPage $tocHasItems $p.Params.toc) -}} @@ -82,15 +91,6 @@ {{ end }}
    • {{ end }} - {{ end }}
-{{ end }} - -{{/* {{ if gt (.WordCount) 0 }} -
    -
  • - {{ .Title }} - Overview -
    • -
-{{ end }} */}} \ No newline at end of file +{{ end }} \ No newline at end of file From ebf9ec7abb137131bc4125d58034b41b35d77cc0 Mon Sep 17 00:00:00 2001 From: Lam <150060045+lamATnginx@users.noreply.github.com> Date: Tue, 13 May 2025 13:17:03 -0700 Subject: [PATCH 3/5] Spacing: Updated OL and UL tag spacing (#250) --- assets/css/v2/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 9b19186..27f89c9 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -187,7 +187,7 @@ p { ul, ol { padding: 0; - margin: 0.5rem 0 0.5rem 0; + margin: 0.5rem 0 0.5rem 1rem; } ul li, From 049c78817e1f76d63924f86f8eb706574011842f Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Wed, 14 May 2025 11:30:35 +0100 Subject: [PATCH 4/5] Sidebar: Fix empty whitespace --- assets/css/v2/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 27f89c9..e152fca 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -912,6 +912,12 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { padding: 0.25rem 0.75rem; } + /* handles bug in hugo where non-rendered headers cause empty li */ + /* https://github.com/gohugoio/hugo/issues/7128 */ + li:empty { + display: none; + } + li:first-child { padding-top: 0; } From 8b79679c3ac457b28ddff9c7752596385c60672e Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Wed, 7 May 2025 13:08:36 -0700 Subject: [PATCH 5/5] Sidebar: Mobile support --- assets/css/v2/style.css | 95 +++++++++++++++++++++++++++++++- assets/js/sidebar-v2.js | 44 +++++++++++++++ layouts/_default/docs.html | 5 +- layouts/_default/list.html | 3 +- layouts/partials/breadcrumb.html | 1 + 5 files changed, 143 insertions(+), 5 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index e152fca..279ccc4 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -91,6 +91,7 @@ --sidebar-line-box-left: 12px; --sidebar-width: 22rem; --sidebar-line-width: 11.5px; + --sidebar-mobile-top-displacement: 5rem; --side-gutter-width: 20rem; --table-top-bottom-spacing: 1rem; --table-row-space-between: 1.5rem; @@ -266,6 +267,10 @@ header { padding: 20px 10px; } + .nav-item-explore { + margin: 0; + } + .navbar-button { padding: 0.5rem 0.5rem; border: none; @@ -525,8 +530,82 @@ nav { column-gap: var(--grid-column-gutter); } - .sidebar-layout { - display: none; + .breadcrumb-layout { + position: sticky !important; + top: 0; + z-index: 3; + } + + body:has(.sidebar__mobile-open) { + /* Disable scrolling in main content + hide footer if the sidebar is visible */ + overflow-y: hidden; + + .sidebar-layout { + position: absolute; + height: 100%; + } + + footer { + display: none; + } + + .sidebar-layout .sidebar__mobile__toggle { + display: flex !important; + align-items: center; + position: sticky; + top: 1rem; + margin-top: 2rem; + margin-left: 2rem; + margin-right: 2rem; + padding: 0.5rem; + color: white; + background-color: oklch(var(--color-brand)); + } + } + + .breadcrumb .sidebar__mobile__toggle { + display: inline !important; + padding: 0; + } + + .sidebar__mobile__toggle { + background-color: transparent; + border: none; + + .lucide { + margin-right: 1rem; + } + } + + .main-layout { + /* Mobile support for sidebar */ + display: flex; + flex-direction: column; + position: relative; + + .sidebar-layout { + min-height: fit-content; + background: white; + z-index: 999; + width: calc(100% + 4rem); + margin-left: -2rem; + + &::before { + display: none; + } + + nav { + width: 100%; + display: none; + top: var(--sidebar-mobile-top-displacement); + max-height: calc(100vh - var(--sidebar-mobile-top-displacement)); + padding: 0 2rem; + + .sidebar__container { + width: 100%; + } + } + } } main { @@ -933,6 +1012,10 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { } } +.sidebar__mobile-open { + display: block !important; +} + /* MARK: Content */ @@ -941,6 +1024,14 @@ p { line-height: 1.5rem; } +.breadcrumb-layout { + position: relative; + background-color: white; + width: calc(100% + 4rem); + margin-left: -2rem; + padding: 1rem 2rem; +} + .breadcrumb { color: var(--color-foreground); text-decoration: none; diff --git a/assets/js/sidebar-v2.js b/assets/js/sidebar-v2.js index a55e256..042d8c6 100644 --- a/assets/js/sidebar-v2.js +++ b/assets/js/sidebar-v2.js @@ -1,5 +1,6 @@ document.addEventListener('click', (e) => { const toggle = e.target.closest('.sidebar__toggle'); + const sidebarMobileToggle = e.target.closest('.sidebar__mobile__toggle'); if (toggle) { const chevron = toggle.querySelector('.sidebar__chevron'); const expanded = toggle.getAttribute('aria-expanded') === 'true'; @@ -14,5 +15,48 @@ document.addEventListener('click', (e) => { if (chevron) { chevron.classList.toggle('sidebar__chevron--open', !expanded); } + } else if (sidebarMobileToggle) { + // Show the sidebar + const sidebar = document.getElementById('sidebar-v2'); + const expanded = + sidebarMobileToggle.getAttribute('aria-expanded') === 'true'; + + if (!expanded) { + sidebar.classList.add('sidebar__mobile-open'); + } else { + sidebar.classList.remove('sidebar__mobile-open'); + } + + // Set the aria for all the toggle buttons so they are in lockstep + const toggleButtons = document.getElementsByClassName( + 'sidebar__mobile__toggle' + ); + for (const button of [...toggleButtons]) { + button.setAttribute('aria-expanded', String(!expanded)); + } } }); + +const debounce = (callback, wait) => { + let timeoutId = null; + return (...args) => { + window.clearTimeout(timeoutId); + timeoutId = window.setTimeout(() => { + callback(...args); + }, wait); + }; +}; + +window.addEventListener( + 'resize', + debounce(() => { + const sidebar = document.getElementById('sidebar-v2'); + + if ( + window.innerWidth > 88 * 16 && + sidebar.classList.contains('sidebar__mobile-open') + ) { + sidebar.classList.remove('sidebar__mobile-open'); + } + }, 200) +); diff --git a/layouts/_default/docs.html b/layouts/_default/docs.html index 43b4d6e..a5d560e 100644 --- a/layouts/_default/docs.html +++ b/layouts/_default/docs.html @@ -69,14 +69,15 @@
-
+ +
{{ partial "sidebar-v2.html" . }}
-
+
{{ if not .IsHome }} {{ if not (in .Params.display_breadcrumb "false" ) }} {{ partial "breadcrumb" .}} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 8d9fd72..ee3848b 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -13,6 +13,7 @@
+
{{ partial "sidebar-v2.html" . }}
@@ -20,7 +21,7 @@
-
+
{{ if not .IsHome }} {{ if not (in .Params.display_breadcrumb "false" ) }} {{ partial "breadcrumb" .}} diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html index eeba1ad..74669b2 100644 --- a/layouts/partials/breadcrumb.html +++ b/layouts/partials/breadcrumb.html @@ -1,6 +1,7 @@
    +
  1. Home
    2. {{- define "breadcrumb" -}} {{- with .Parent -}}