feat(web): add skip link to top navigation (#7091)

* feat(web): add skip link to top nav

* Styling skip link with tailwind
This commit is contained in:
Ben Basten 2024-02-18 03:34:27 +00:00 committed by GitHub
parent 70e5febb72
commit 9c1dd373a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 33 additions and 0 deletions

View file

@ -3,6 +3,7 @@
import { page } from '$app/stores';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { resetSavedUser, user } from '$lib/stores/user.store';
@ -39,6 +40,7 @@
</script>
<section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
<SkipLink>Skip to content</SkipLink>
<div
class="grid h-full grid-cols-[theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
>

View file

@ -3,6 +3,7 @@
<section
id="sidebar"
tabindex="-1"
class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
>
<slot />