feat(web): add skip link to sidebar (#12330)

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Ben
2024-09-05 09:24:24 -04:00
committed by GitHub
parent ce2349d496
commit c5848112bb
6 changed files with 20 additions and 10 deletions
@@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
@@ -16,6 +16,7 @@
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
export let data: PageData;
@@ -48,6 +49,7 @@
<UserPageLayout title={data.meta.title}>
<SideBarSection slot="sidebar">
<SkipLink target={`#${headerId}`} text={$t('skip_to_folders')} />
<section>
<div class="text-xs pl-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
<div class="h-full">
@@ -4,7 +4,7 @@
import Button from '$lib/components/elements/buttons/button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import {
@@ -27,6 +27,7 @@
import type { PageData } from './$types';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
export let data: PageData;
@@ -132,6 +133,7 @@
<UserPageLayout title={data.meta.title} scrollbar={false}>
<SideBarSection slot="sidebar">
<SkipLink target={`#${headerId}`} text={$t('skip_to_tags')} />
<section>
<div class="text-xs pl-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
<div class="h-full">