youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-28 10:53:50 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: close mobile toc when link is clicked

Browse source
This commit is contained in:
Youwen Wu 2024-04-07 02:40:19 -07:00
parent f26ec6bd43
commit f6b4dfa709
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lib/components/Toc/TocHeader.svelte
View file

@ -15,10 +15,16 @@
}; };
$: currentDisplayed = $tocStore.activeItem ? $tocStore.activeItem.text : placeholder; $: currentDisplayed = $tocStore.activeItem ? $tocStore.activeItem.text : placeholder;
let value: string;
const close = () => {
value = '';
};
</script> </script>
<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden"> <nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
<Accordion.Root class="px-8"> <Accordion.Root class="px-8" bind:value>
<Accordion.Item value="toc"> <Accordion.Item value="toc">
<Accordion.Trigger <Accordion.Trigger
class="text-xl flex w-full flex-1 items-center justify-between py-1 font-medium transition-all [&[data-state=open]>span>svg]:rotate-180" class="text-xl flex w-full flex-1 items-center justify-between py-1 font-medium transition-all [&[data-state=open]>span>svg]:rotate-180"
@ -34,9 +40,11 @@
{#each $tocStore.items.values() as tocItem} {#each $tocStore.items.values() as tocItem}
{@const selected = $tocStore.activeItem === tocItem} {@const selected = $tocStore.activeItem === tocItem}
<li class="border-l-secondary border-l-4 py-1" class:highlighted={selected}> <li class="border-l-secondary border-l-4 py-1" class:highlighted={selected}>
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content --> <!-- svelte-ignore a11y-missing-attribute a11y-missing-content a11y-click-events-have-key-events a11y-interactive-supports-focus a11y -->
<a <a
use:toclink={{ store: tocStore, tocItem, observe: true }} use:toclink={{ store: tocStore, tocItem, observe: true }}
on:click={close}
role="button"
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all ${calcTextClasses(tocItem.element)}`} class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all ${calcTextClasses(tocItem.element)}`}
/> />
</li> </li>