Skip to content

Commit

Permalink
fix(docs/Sidebar): fixed Sidebar's scrolling being reset
Browse files Browse the repository at this point in the history
  • Loading branch information
@DuCanhGH
DuCanhGH committed Apr 29, 2024
1 parent 946042a commit 15b658e
Show file tree
Hide file tree
Showing 12 changed files with 207 additions and 640 deletions.
2 changes: 1 addition & 1 deletion docs/src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
@keyframes details-show {
from {
opacity: 0;
transform: var(--details-translate, translateY(-2em));
transform: var(--details-translate, translateY(-1rem));
}
}
details.details-anim[open] > *:not(summary) {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/Toc.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
});
</script>

<details bind:this={tocDetails} class="flex h-full flex-col overflow-y-auto hyphens-auto text-lg md:text-base xl:text-sm">
<details bind:this={tocDetails} class="flex h-full flex-col overflow-y-auto hyphens-auto text-lg md:text-base xl:text-sm details-anim">
<summary class="mb-4 flex items-center">
<p class="font-semibold tracking-tight text-black dark:text-white">On This Page</p>
<ChevronRight class="details-chevron ml-2 transition-transform duration-100" width={18} height={18} />
Expand Down
230 changes: 120 additions & 110 deletions docs/src/lib/constants.ts
View file

Large diffs are not rendered by default.

54 changes: 36 additions & 18 deletions docs/src/routes/(vertical)/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@
: DOCS_SIDEBAR_LINKS
);
const { children } = $props();
let sidebarDetails = $state<HTMLDetailsElement | undefined>(undefined);
let menuCheckbox = $state<HTMLInputElement | null>(null);
$effect(() => {
$page.url.pathname;
if (sidebarDetails) {
sidebarDetails.open = window.innerWidth >= BREAKPOINTS.md;
const isMenuOpen = window.innerWidth >= BREAKPOINTS.md;
if (menuCheckbox) {
menuCheckbox.checked = isMenuOpen;
menuCheckbox.ariaExpanded = isMenuOpen ? "true" : "false";
}
});
</script>
Expand All @@ -36,21 +39,36 @@
>
<VerticalNavbar />
{#if sidebarLinks && sidebarLinks.length > 0}
<details bind:this={sidebarDetails} id="sidebar-mobile-menu" class="overflow-y-auto">
<summary
class="z-20 flex h-fit w-full flex-row items-center justify-start gap-2 px-3 py-2 text-base font-medium text-black duration-100 md:mt-[5px] md:text-sm dark:text-white"
>
Menu
<ChevronRight class="details-chevron transition-transform duration-100" width={18} height={18} />
</summary>
<aside class="self-stretch">
<ul>
{#each sidebarLinks as sidebarLink}
<SidebarLink {...sidebarLink} />
{/each}
</ul>
</aside>
</details>
<input
type="checkbox"
id="sidebar-menu-toggle"
class="peer hidden"
aria-labelledby="sidebar-menu-toglab"
aria-controls="sidebar-menu"
bind:this={menuCheckbox}
/>
<label
id="sidebar-menu-toglab"
for="sidebar-menu-toggle"
class={clsx(
"z-20 flex h-fit w-full cursor-pointer select-none flex-row items-center justify-start gap-2 px-3 py-2 text-base font-medium",
"text-black duration-100 md:mt-[5px] md:text-sm dark:text-white peer-checked:[&>svg]:rotate-90"
)}
aria-label="Toggle navbar menu"
>
Menu
<ChevronRight class="transition-transform duration-100" width={18} height={18} />
</label>
<aside
id="sidebar-menu"
class="hidden animate-[details-show_100ms_ease-out] overflow-y-auto overscroll-contain peer-checked:block md:animate-none"
>
<ul>
{#each sidebarLinks as sidebarLink}
<SidebarLink {...sidebarLink} />
{/each}
</ul>
</aside>
{/if}
</div>
{@render children()}
Expand Down
11 changes: 5 additions & 6 deletions docs/src/routes/(vertical)/SidebarLink.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,25 @@
const { title, href, children }: SidebarLinkProps = $props();
const isActive = $derived(href === $page.url.pathname || href === `${$page.url.pathname}/`);
let details = $state<HTMLDetailsElement | null>(null);
let isOpen = $state(false);
$effect(() => {
if (details && !details.open) {
details.open = $page.url.pathname.startsWith(href);
if (!isOpen) {
isOpen = $page.url.pathname.startsWith(href);
}
});
</script>

<li class="flex flex-col pt-[5px]">
{#if children}
<details bind:this={details} class="[&[open]>summary>div>svg]:rotate-90">
<details open={isOpen || $page.url.pathname.startsWith(href)} class="[&[open]>summary>div>svg]:rotate-90">
<summary class={clsx("flex flex-row", isActive && "[&>span]:rounded-e-none")}>
<NavLink {href} textCenter={false} {isActive}>
{title}
</NavLink>
<div
class={clsx(
"flex items-center px-1 text-black transition-all duration-100 dark:text-white",
"flex items-center px-2 text-black transition-all duration-100 dark:text-white",
isActive
? "bg-neutral-250 rounded-e border-l border-black/40 dark:border-white/40 dark:bg-neutral-800"
: "hover:bg-neutral-250 rounded hover:dark:bg-neutral-800"
Expand Down
83 changes: 8 additions & 75 deletions docs/src/routes/(vertical)/docs/build/configuring/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,17 @@
<script>
import ICD from "$components/InlineCode.svelte";
import { DOCS_BUILD_OPTIONS } from "$lib/constants";
</script>

<h1 id="configuring">Configuring</h1>
<h2 id="available-options">Available options</h2>
<p>There are various options you can use to customize the behaviour of the plugin:</p>
<ul class="list">
<li>
<ICD>
<a class="link" href="/docs/build/configuring/additional-precache-entries">additionalPrecacheEntries</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/disable-precache-manifest">disablePrecacheManifest</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/dont-cache-bust-urls-matching">dontCacheBustURLsMatching</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/glob-directory">globDirectory</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/glob-follow">globFollow</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/glob-ignores">globIgnores</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/glob-patterns">globPatterns</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/glob-strict">globStrict</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/injection-point">injectionPoint (InjectManifest only)</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/manifest-transforms">manifestTransforms</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/maximum-file-size-to-cache-in-bytes">maximumFileSizeToCacheInBytes</a>
</ICD>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/modify-url-prefix">modifyURLPrefix</a>
</ICD>
</li>
<li>
<a class="link" href="/docs/build/configuring/sw-dest">
<ICD>swDest</ICD> (InjectManifest only)
</a>
</li>
<li>
<a class="link" href="/docs/build/configuring/sw-src">
<ICD>swSrc</ICD> (InjectManifest only)
</a>
</li>
<li>
<ICD>
<a class="link" href="/docs/build/configuring/templated-urls">templatedURLs</a>
</ICD>
</li>
{#each DOCS_BUILD_OPTIONS as { title, href }}
<li>
<ICD>
<a class="link" {href}>{title}</a>
</ICD>
</li>
{/each}
</ul>
108 changes: 8 additions & 100 deletions docs/src/routes/(vertical)/docs/next/configuring/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,17 @@
<script>
import ICD from "$components/InlineCode.svelte";
import { DOCS_NEXT_OPTIONS } from "$lib/constants";
</script>

<h1 id="configuring">Configuring</h1>
<h2 id="available-options">Available options</h2>
<p>There are various options you can use to customize the behaviour of the plugin:</p>
<ul class="list">
<li>
<a class="link" href="/docs/next/configuring/additional-precache-entries">
<ICD>additionalPrecacheEntries</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/cache-on-navigation">
<ICD>cacheOnNavigation</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/chunks">
<ICD>chunks</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/compile-src">
<ICD>compileSrc</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/disable">
<ICD>disable</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/dont-cache-bust-urls-matching">
<ICD>dontCacheBustURLsMatching</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/exclude">
<ICD>exclude</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/exclude-chunks">
<ICD>excludeChunks</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/include">
<ICD>include</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/injection-point">
<ICD>injectionPoint</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/manifest-transforms">
<ICD>manifestTransforms</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/maximum-file-size-to-cache-in-bytes">
<ICD>maximumFileSizeToCacheInBytes</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/modify-url-prefix">
<ICD>modifyURLPrefix</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/register">
<ICD>register</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/reload-on-online">
<ICD>reloadOnOnline</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/scope">
<ICD>scope</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/sw-dest">
<ICD>swDest</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/sw-src">
<ICD>swSrc</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/sw-url">
<ICD>swUrl</ICD>
</a>
</li>
<li>
<a class="link" href="/docs/next/configuring/webpack-compilation-plugins">
<ICD>webpackCompilationPlugins</ICD>
</a>
</li>
{#each DOCS_NEXT_OPTIONS as { title, href }}
<li>
<ICD>
<a class="link" {href}>{title}</a>
</ICD>
</li>
{/each}
</ul>
Loading

0 comments on commit 15b658e

Please sign in to comment.