Skip to content
This repository has been archived by the owner on Nov 25, 2024. It is now read-only.

Commit

Permalink
fix: Dont render empty DocsOnThisPage, remove the pesky hr in NavCont…
Browse files Browse the repository at this point in the history 
…extMenu (#235)
  • Loading branch information
@PuruVJ
PuruVJ authored Sep 20, 2023
1 parent 5867964 commit 31580c0
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 97 deletions.
5 changes: 5 additions & 0 deletions .changeset/kind-ways-move.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/site-kit': patch
---

fix: Dont render empty DocsOnThisPage, remove the pesky hr in NavContextMenu
124 changes: 65 additions & 59 deletions packages/site-kit/src/lib/docs/DocsOnThisPage.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,10 @@
afterUpdate(() => {
// bit of a hack — prevent sidebar scrolling if
// TOC is open on mobile, or scroll came from within sidebar
if (show_contents && window.innerWidth < 832) return;
const active = containerEl.querySelector('.active');
if ((show_contents && window.innerWidth < 832) || !content) return;
const active = containerEl?.querySelector('.active');
if (active) {
const { top, bottom } = active.getBoundingClientRect();
const min = 100;
Expand Down Expand Up @@ -133,6 +135,8 @@
}
function highlight() {
if (!content) return;
const { top, bottom } = content.getBoundingClientRect();
let i = headings.length;
while (i--) {
Expand Down Expand Up @@ -173,67 +177,69 @@
on:hashchange={() => select($page.url)}
/>
<aside
class="on-this-page"
class:mobile={$is_mobile}
class:dark={$theme.current === 'dark'}
style:z-index={mobile_z_index}
bind:this={containerEl}
use:click_outside={() => $is_mobile && ($on_this_page_open = false)}
use:focus_outside={() => $is_mobile && ($on_this_page_open = false)}
>
<h2>
<button
class="heading"
aria-expanded={$on_this_page_open}
on:click={() => ($on_this_page_open = !$on_this_page_open)}
>
<span class="h2"><slot>On this page</slot></span>
<span class="expand-icon" class:inverted={$on_this_page_open}>
<Icon name="chevron-down" />
</span>
</button>
<span class="h2 desktop-only-heading"><slot>On this page</slot></span>
</h2>
{#if (browser && !$is_mobile) || ($is_mobile && $on_this_page_open)}
<nav
aria-label="On this page"
transition:slide={{ axis: 'y', easing: expoOut, duration: $reduced_motion ? 0 : 400 }}
on:introstart={() => $on_this_page_open && (mobile_z_index = Z_INDICES.OPEN)}
on:outrostart={async () => {
await tick();
if (!$on_this_page_open && $nav_open) {
mobile_z_index = Z_INDICES.BASE;
}
}}
on:outroend={() => !$on_this_page_open && (mobile_z_index = Z_INDICES.BASE)}
>
<ul>
<li>
<a
href={details.path}
aria-current={hash === '' ? 'page' : false}
on:click={on_link_click}>{details.title}</a
>
</li>
{#each details.sections as { title, slug }}
{#if $is_mobile && details.sections.length > 0}
<aside
class="on-this-page"
class:mobile={$is_mobile}
class:dark={$theme.current === 'dark'}
style:z-index={mobile_z_index}
bind:this={containerEl}
use:click_outside={() => $is_mobile && ($on_this_page_open = false)}
use:focus_outside={() => $is_mobile && ($on_this_page_open = false)}
>
<h2>
<button
class="heading"
aria-expanded={$on_this_page_open}
on:click={() => ($on_this_page_open = !$on_this_page_open)}
>
<span class="h2"><slot>On this page</slot></span>
<span class="expand-icon" class:inverted={$on_this_page_open}>
<Icon name="chevron-down" />
</span>
</button>
<span class="h2 desktop-only-heading"><slot>On this page</slot></span>
</h2>
{#if (browser && !$is_mobile) || ($is_mobile && $on_this_page_open)}
<nav
aria-label="On this page"
transition:slide={{ axis: 'y', easing: expoOut, duration: $reduced_motion ? 0 : 400 }}
on:introstart={() => $on_this_page_open && (mobile_z_index = Z_INDICES.OPEN)}
on:outrostart={async () => {
await tick();
if (!$on_this_page_open && $nav_open) {
mobile_z_index = Z_INDICES.BASE;
}
}}
on:outroend={() => !$on_this_page_open && (mobile_z_index = Z_INDICES.BASE)}
>
<ul>
<li>
<a
href={`#${slug}`}
aria-current={`#${slug}` === hash ? 'page' : false}
on:click={on_link_click}
href={details.path}
aria-current={hash === '' ? 'page' : false}
on:click={on_link_click}>{details.title}</a
>
{title}
</a>
</li>
{/each}
</ul>
</nav>
{/if}
</aside>
{#each details.sections as { title, slug }}
<li>
<a
href={`#${slug}`}
aria-current={`#${slug}` === hash ? 'page' : false}
on:click={on_link_click}
>
{title}
</a>
</li>
{/each}
</ul>
</nav>
{/if}
</aside>
{/if}
<style>
.on-this-page {
Expand Down
78 changes: 40 additions & 38 deletions packages/site-kit/src/lib/nav/NavContextMenu.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,44 +34,46 @@
</script>

<nav bind:this={nav}>
{#each contents ?? [] as { sections, title }, index}
<section>
<h3>{title}</h3>

{#if sections.length !== 0}
<ul>
{#each sections as { title, sections: subsections }}
<li>
{#if title}
<h4>
{title}
</h4>
{/if}

<ul>
{#each subsections as { path, title, badge }}
<li>
<a href={path} aria-current={path === $page.url.pathname}>
{title}

{#if badge}
<span style="flex: 1 1 auto" />
<span class="badge">{badge}</span>
{/if}
</a>
</li>
{/each}
</ul>
</li>
{/each}
</ul>
{/if}

{#if index !== sections.length - 1}
<hr />
{/if}
</section>
{/each}
{#if contents}
{#each contents as { sections, title }, index}
<section>
<h3>{title}</h3>

{#if sections.length !== 0}
<ul>
{#each sections as { title, sections: subsections }}
<li>
{#if title}
<h4>
{title}
</h4>
{/if}

<ul>
{#each subsections as { path, title, badge }}
<li>
<a href={path} aria-current={path === $page.url.pathname}>
{title}

{#if badge}
<span style="flex: 1 1 auto" />
<span class="badge">{badge}</span>
{/if}
</a>
</li>
{/each}
</ul>
</li>
{/each}
</ul>
{/if}

{#if contents.length !== 1 && index !== contents.length - 1}
<hr />
{/if}
</section>
{/each}
{/if}
</nav>

<style>
Expand Down

0 comments on commit 31580c0

Please sign in to comment.