chadtmiller.com/knotless
git that lives in your Atmosphere account
1
10
The account settings tabs fade at their edges on a phone
web/src/lib/templates/SettingsPage.svelte+2−6
| @@ -8,6 +8,7 @@ | ||
import type { Snippet } from 'svelte'; | ||
import Meta from '#lib/atoms/Meta.svelte'; | ||
import Icon from '#lib/atoms/Icon.svelte'; | ||
import { scrollRow } from '#lib/rows.ts'; | ||
/** | ||
* Settings, as GitHub lays them out: what they are of, `heading`, over | ||
* the `sections` down the side, the page at `current` marked, a group's | ||
| @@ -16,18 +17,13 @@ | ||
* leaves where it was scrolled. | ||
*/ | ||
let { heading, title, sections, current, children }: { heading: Snippet; title: string; sections: SettingsSection[]; current: string; children: Snippet } = $props(); | ||
let nav = $state<HTMLElement>(); | ||
// On a phone the sections are a row that scrolls: the one open is in it. | ||
$effect(() => { | ||
if (current) nav?.querySelector('[aria-current="page"]')?.scrollIntoView({ block: 'nearest', inline: 'nearest' }); | ||
}); | ||
</script> | ||
| ||
<Meta {title} /> | ||
| ||
<div class="settings-page"> | ||
<div class="settings-head">{@render heading()}</div> | ||
<nav class="account-nav" aria-label="Settings" data-sveltekit-reset="false" bind:this={nav}> | ||
<nav class="account-nav" aria-label="Settings" data-sveltekit-reset="false" {@attach scrollRow(current)}> | ||
{#each sections as s (s.href)} | ||
{@const within = !!s.pages?.some((p) => p.href === current)} | ||
{#if s.pages} | ||