@grove-dev/starlight 0.1.9

package/components/overrides/Search.astro

@@ -0,0 +1,549 @@
+---
+import '@pagefind/default-ui/css/ui.css';
+import project from 'virtual:starlight/project-context';
+
+const pagefindTranslations = {
+    placeholder: Astro.locals.t('search.label'),
+    ...Object.fromEntries(
+        Object.entries(Astro.locals.t.all())
+            .filter(([key]) => key.startsWith('pagefind.'))
+            .map(([key, value]) => [key.replace('pagefind.', ''), value])
+    ),
+};
+
+const dataAttributes: DOMStringMap = { 'data-translations': JSON.stringify(pagefindTranslations) };
+if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash'] = '';
+---
+
+<site-search class={Astro.props.class} {...dataAttributes}>
+    <button
+        data-open-modal
+        disabled
+        aria-label={Astro.locals.t('search.label')}
+        aria-keyshortcuts="Control+K"
+    >
+        <span aria-hidden="true">{Astro.locals.t('search.label')}</span>
+        <kbd class="sl-hidden md:sl-flex" style="display: none;">
+            <kbd>{Astro.locals.t('search.ctrlKey')}</kbd><kbd>K</kbd>
+        </kbd>
+    </button>
+
+    <dialog style="padding:0" aria-label={Astro.locals.t('search.label')}>
+        <div class="dialog-frame sl-flex">
+            {
+                /* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
+            }
+            <button data-close-modal class="sl-flex md:sl-hidden">
+                {Astro.locals.t('search.cancelLabel')}
+            </button>
+            {
+                import.meta.env.DEV ? (
+                    <div style="margin: auto; text-align: center; white-space: pre-line;" dir="ltr">
+                        <p>{Astro.locals.t('search.devWarning')}</p>
+                    </div>
+                ) : (
+                    <div class="search-container">
+                        <div id="starlight__search" />
+                    </div>
+                )
+            }
+        </div>
+    </dialog>
+</site-search>
+
+{
+    /**
+     * This is intentionally inlined to avoid briefly showing an invalid shortcut.
+     * Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the
+     * user agent is spoofed by some browsers when opening the devtools.
+     */
+}
+<script is:inline>
+    (() => {
+        const openBtn = document.querySelector('button[data-open-modal]');
+        const shortcut = openBtn?.querySelector('kbd');
+        if (!openBtn || !(shortcut instanceof HTMLElement)) {
+            return;
+        }
+        const updateShortcutDisplay = () => {
+            shortcut.style.setProperty(
+                'display',
+                matchMedia('(min-width: 40rem)').matches ? 'flex' : 'none',
+                'important'
+            );
+        };
+        const platformKey = shortcut.querySelector('kbd');
+        // eslint-disable-next-line regexp/no-unused-capturing-group
+        if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+            platformKey.textContent = '⌘';
+            openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+        }
+        updateShortcutDisplay();
+        matchMedia('(min-width: 40rem)').addEventListener('change', updateShortcutDisplay);
+    })();
+</script>
+
+<script>
+    import { pagefindUserConfig } from 'virtual:starlight/pagefind-config';
+
+    class SiteSearch extends HTMLElement {
+        constructor() {
+            super();
+            const openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
+            const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
+            const dialog = this.querySelector('dialog')!;
+            const dialogFrame = this.querySelector('.dialog-frame')!;
+
+            /** Close the modal if a user clicks on a link or outside of the modal. */
+            const onClick = (event: MouseEvent) => {
+                const isLink = 'href' in (event.target || {});
+                if (
+                    isLink ||
+                    (document.body.contains(event.target as Node) &&
+                        !dialogFrame.contains(event.target as Node))
+                ) {
+                    closeModal();
+                }
+            };
+
+            const openModal = (event?: MouseEvent) => {
+                dialog.showModal();
+                document.body.toggleAttribute('data-search-modal-open', true);
+                this.querySelector('input')?.focus();
+                event?.stopPropagation();
+                window.addEventListener('click', onClick);
+            };
+
+            const closeModal = () => dialog.close();
+
+            openBtn.addEventListener('click', openModal);
+            openBtn.disabled = false;
+            closeBtn.addEventListener('click', closeModal);
+
+            dialog.addEventListener('close', () => {
+                document.body.toggleAttribute('data-search-modal-open', false);
+                window.removeEventListener('click', onClick);
+            });
+
+            // Listen for `ctrl + k` and `cmd + k` keyboard shortcuts.
+            window.addEventListener('keydown', (e) => {
+                if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
+                    dialog.open ? closeModal() : openModal();
+                    e.preventDefault();
+                }
+            });
+
+            let translations = {};
+            try {
+                translations = JSON.parse(this.dataset.translations || '{}');
+            } catch {}
+
+            const shouldStrip = this.dataset.stripTrailingSlash !== undefined;
+            const stripTrailingSlash = (path: string) => path.replace(/(.)\/(#.*)?$/, '$1$2');
+            const formatURL = shouldStrip ? stripTrailingSlash : (path: string) => path;
+
+            window.addEventListener('DOMContentLoaded', () => {
+                if (import.meta.env.DEV) return;
+                const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+                onIdle(async () => {
+                    // @ts-expect-error — Missing types for @pagefind/default-ui package.
+                    const { PagefindUI } = await import('@pagefind/default-ui');
+                    new PagefindUI({
+                        ...pagefindUserConfig,
+                        element: '#starlight__search',
+                        baseUrl: import.meta.env.BASE_URL,
+                        bundlePath: `${import.meta.env.BASE_URL.replace(/\/$/, '')}/pagefind/`,
+                        showImages: false,
+                        translations,
+                        showSubResults: true,
+                        processResult: (result: {
+                            url: string;
+                            sub_results: Array<{ url: string }>;
+                        }) => {
+                            result.url = formatURL(result.url);
+                            result.sub_results = result.sub_results.map((sub_result) => {
+                                sub_result.url = formatURL(sub_result.url);
+                                return sub_result;
+                            });
+                        },
+                    });
+                });
+            });
+        }
+    }
+    customElements.define('site-search', SiteSearch);
+</script>
+
+<style>
+    site-search {
+        flex: 1 1 0%;
+        width: 100%;
+    }
+
+    @media (min-width: 768px) {
+        site-search {
+            flex: none;
+            width: auto;
+        }
+    }
+
+    button[data-open-modal] {
+        transition-property:
+            color, background-color, border-color, text-decoration-color, fill, stroke;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.15s;
+        color: color-mix(in oklab, var(--foreground) 88%, var(--muted-foreground));
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding-top: calc(var(--spacing) * 2);
+        padding-bottom: calc(var(--spacing) * 2);
+        padding-left: calc(var(--spacing) * 4);
+        padding-right: calc(var(--spacing) * 4);
+        background-color: color-mix(in oklab, var(--background) 92%, var(--card));
+        border-color: color-mix(in oklab, var(--foreground) 15%, transparent);
+        border-width: 1px;
+        border-style: solid;
+        border-radius: var(--radius);
+        white-space: nowrap;
+        gap: calc(var(--spacing) * 2);
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
+        height: 2rem;
+        display: inline-flex;
+        position: relative;
+        cursor: pointer;
+
+        background-image: none;
+        -webkit-appearance: button;
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        letter-spacing: inherit;
+        margin: 0;
+    }
+
+    button[data-open-modal]:hover {
+        color: var(--foreground);
+        border-color: color-mix(in oklab, var(--foreground) 30%, transparent);
+        background-color: color-mix(in oklab, var(--muted) 45%, var(--background));
+    }
+
+    @media (min-width: 640px) {
+        button[data-open-modal] {
+            padding-right: calc(var(--spacing) * 12);
+        }
+    }
+
+    @media (min-width: 768px) {
+        button[data-open-modal] {
+            width: 12rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        button[data-open-modal] {
+            width: 16rem;
+        }
+    }
+
+    button[data-open-modal] > span {
+        display: inline-flex;
+    }
+
+    button[data-open-modal] > kbd {
+        transition-property: color, background-color, border-color;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.15s;
+        opacity: 1;
+        font-weight: 500;
+        font-size: 10px;
+        padding-left: calc(var(--spacing) * 1.5);
+        padding-right: calc(var(--spacing) * 1.5);
+        background-color: color-mix(in oklab, var(--muted) 78%, var(--background));
+        border-width: 1px;
+        border-style: solid;
+        border-color: transparent;
+        border-radius: 0.25rem;
+        color: var(--muted-foreground);
+        gap: 0.25rem;
+        align-items: center;
+        height: 1.25rem;
+        display: none;
+        top: 0.3rem;
+        right: 0.3rem;
+        position: absolute;
+        pointer-events: none;
+        display: none !important;
+    }
+
+    @media (min-width: 640px) {
+        button > kbd {
+            display: flex !important;
+        }
+    }
+
+    button[data-open-modal] kbd {
+        font-family: var(--__sl-font-mono);
+    }
+
+    button[data-open-modal]:hover > kbd {
+        color: var(--foreground);
+        background-color: color-mix(in oklab, var(--accent) 92%, var(--background));
+    }
+
+    dialog {
+        margin: 0;
+        background-color: var(--sl-color-gray-6);
+        border: 1px solid var(--sl-color-gray-5);
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        max-height: 100%;
+        box-shadow: var(--sl-shadow-lg);
+    }
+    dialog[open] {
+        display: flex;
+    }
+
+    dialog::backdrop {
+        background-color: var(--sl-color-backdrop-overlay);
+        -webkit-backdrop-filter: blur(0.25rem);
+        backdrop-filter: blur(0.25rem);
+    }
+
+    .dialog-frame {
+        position: relative;
+        overflow: auto;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: 1rem;
+        padding: 1rem;
+    }
+
+    button[data-close-modal] {
+        position: absolute;
+        z-index: 1;
+        align-items: center;
+        align-self: flex-end;
+        height: calc(64px * var(--pagefind-ui-scale));
+        padding: 0.25rem;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        color: var(--sl-color-text-accent);
+    }
+
+    #starlight__search {
+        --pagefind-ui-primary: var(--sl-color-accent-light);
+        --pagefind-ui-text: var(--sl-color-gray-2);
+        --pagefind-ui-font: var(--__sl-font);
+        --pagefind-ui-background: var(--sl-color-black);
+        --pagefind-ui-border: var(--sl-color-gray-5);
+        --pagefind-ui-border-width: 1px;
+        --sl-search-cancel-space: 5rem;
+    }
+
+    @media (min-width: 50rem) {
+        #starlight__search {
+            --sl-search-cancel-space: 0px;
+        }
+
+        dialog {
+            margin: 4rem auto auto;
+            border-radius: 0.5rem;
+            width: 90%;
+            max-width: 40rem;
+            height: max-content;
+            min-height: 15rem;
+            max-height: calc(100% - 8rem);
+        }
+
+        .dialog-frame {
+            padding: 1.5rem;
+        }
+    }
+</style>
+
+<style is:global>
+    [data-search-modal-open] {
+        overflow: hidden;
+    }
+
+    #starlight__search {
+        --sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
+        --sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
+        --sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
+        --sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
+        --sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
+        --sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
+        --sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
+        --sl-search-page-icon-inline-start: calc(
+            (var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2
+        );
+        --sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
+        --sl-search-tree-diagram-inline-start: calc(
+            (var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2
+        );
+    }
+
+    #starlight__search .pagefind-ui__form::before {
+        --pagefind-ui-text: var(--sl-color-gray-1);
+        opacity: 1;
+    }
+
+    #starlight__search .pagefind-ui__search-input {
+        color: var(--sl-color-white);
+        font-weight: 400;
+        width: calc(100% - var(--sl-search-cancel-space));
+    }
+
+    #starlight__search input:focus {
+        --pagefind-ui-border: var(--sl-color-accent);
+    }
+
+    #starlight__search .pagefind-ui__search-clear {
+        inset-inline-end: var(--sl-search-cancel-space);
+        width: calc(60px * var(--pagefind-ui-scale));
+        padding: 0;
+        background-color: transparent;
+        overflow: hidden;
+    }
+    #starlight__search .pagefind-ui__search-clear:focus {
+        outline: 1px solid var(--sl-color-accent);
+    }
+    #starlight__search .pagefind-ui__search-clear::before {
+        content: '';
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+            center / 50% no-repeat;
+        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+            center / 50% no-repeat;
+        background-color: var(--sl-color-text-accent);
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    #starlight__search .pagefind-ui__results > * + * {
+        margin-top: var(--sl-search-result-spacing);
+    }
+    #starlight__search .pagefind-ui__result {
+        border: 0;
+        padding: 0;
+    }
+
+    #starlight__search .pagefind-ui__result-nested {
+        position: relative;
+        padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+        padding-inline-start: var(--sl-search-result-pad-inline-start);
+    }
+
+    #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+    #starlight__search .pagefind-ui__result-nested {
+        position: relative;
+        background-color: var(--sl-color-black);
+    }
+
+    #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
+    #starlight__search
+        .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+    #starlight__search .pagefind-ui__result-nested:hover,
+    #starlight__search .pagefind-ui__result-nested:focus-within {
+        outline: 1px solid var(--sl-color-accent-high);
+    }
+
+    #starlight__search
+        .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+    #starlight__search .pagefind-ui__result-nested:focus-within {
+        background-color: var(--sl-color-accent-low);
+    }
+
+    #starlight__search .pagefind-ui__result-thumb,
+    #starlight__search .pagefind-ui__result-inner {
+        margin-top: 0;
+    }
+
+    #starlight__search .pagefind-ui__result-inner > :first-child {
+        border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
+    }
+    #starlight__search .pagefind-ui__result-inner > :last-child {
+        border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
+    }
+
+    #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
+        padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
+        padding-inline-start: var(--sl-search-result-pad-inline-start);
+    }
+    #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: var(--sl-search-page-icon-inline-start);
+        width: var(--sl-search-page-icon-size);
+        background: var(--sl-color-gray-3);
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+            center no-repeat;
+        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+            center no-repeat;
+    }
+
+    #starlight__search .pagefind-ui__result-inner {
+        align-items: stretch;
+        gap: 1px;
+    }
+
+    #starlight__search .pagefind-ui__result-link {
+        position: unset;
+        --pagefind-ui-text: var(--sl-color-white);
+        font-weight: 600;
+    }
+
+    #starlight__search .pagefind-ui__result-link:hover {
+        text-decoration: none;
+    }
+
+    #starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
+        content: unset;
+    }
+
+    #starlight__search .pagefind-ui__result-nested::before {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: var(--sl-search-tree-diagram-inline-start);
+        width: var(--sl-search-tree-diagram-size);
+        background: var(--sl-color-gray-4);
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+            0% 0% / 100% no-repeat;
+        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+            0% 0% / 100% no-repeat;
+    }
+    #starlight__search .pagefind-ui__result-nested:last-child::before {
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+    }
+
+    /* Flip page and tree icons around the vertical axis when in an RTL layout. */
+    [dir='rtl'] .pagefind-ui__result-title::before,
+    [dir='rtl'] .pagefind-ui__result-nested::before {
+        transform: matrix(-1, 0, 0, 1, 0, 0);
+    }
+
+    #starlight__search .pagefind-ui__result-link::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+    }
+
+    #starlight__search .pagefind-ui__result-excerpt {
+        font-size: calc(1rem * var(--pagefind-ui-scale));
+        overflow-wrap: anywhere;
+    }
+
+    #starlight__search mark {
+        color: var(--sl-color-gray-2);
+        background-color: transparent;
+        font-weight: 600;
+    }
+</style>

package/components/overrides/Sidebar.astro

@@ -0,0 +1,111 @@
+---
+import SidebarSublist from './parts/SidebarSublist.astro';
+
+const { sidebar } = Astro.locals.starlightRoute;
+---
+
+<div class="sidebar">
+    <div class="sidebar-border-gradient"></div>
+    <div class="sidebar-spacer"></div>
+    <div class="sidebar-fade-top"></div>
+    <div class="container-sidebar">
+        <div class="sidebar-entries">
+            <SidebarSublist sublist={sidebar} />
+        </div>
+        <div class="sidebar-fade-bottom"></div>
+    </div>
+</div>
+
+<style>
+    .sidebar {
+        scrollbar-width: none;
+        overflow: hidden;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sidebar-spacer {
+        height: 2.25rem;
+        flex-shrink: 0;
+    }
+
+    .sidebar-border-gradient {
+        position: absolute;
+        top: 0rem;
+        right: 0.5rem;
+        bottom: 0;
+        width: 1px;
+        background: linear-gradient(to bottom, transparent 0%, var(--border) 50%, transparent 100%);
+        display: none;
+        z-index: 1;
+    }
+
+    @media (min-width: 1024px) {
+        .sidebar-border-gradient {
+            display: flex;
+        }
+    }
+
+    .sidebar-fade-top {
+        position: absolute;
+        top: 2rem;
+        left: 0;
+        z-index: 10;
+        height: 2rem;
+        width: calc(100% - 1rem);
+        flex-shrink: 0;
+        pointer-events: none;
+        background-image: linear-gradient(
+            to bottom,
+            var(--background) 0%,
+            color-mix(in srgb, var(--background) 80%, transparent) 50%,
+            color-mix(in srgb, var(--background) 50%, transparent) 100%
+        );
+        filter: blur(2px);
+    }
+
+    .sidebar-fade-bottom {
+        position: sticky;
+        bottom: -2px;
+        z-index: 10;
+        height: 4rem;
+        flex-shrink: 0;
+        margin-top: calc(var(--spacing) * -16);
+        pointer-events: none;
+        background-image: linear-gradient(
+            to top,
+            var(--background) 0%,
+            color-mix(in srgb, var(--background) 80%, transparent) 50%,
+            color-mix(in srgb, var(--background) 50%, transparent) 100%
+        );
+        filter: blur(2px);
+    }
+
+    .container-sidebar {
+        flex-direction: column;
+        display: flex;
+        overflow: auto;
+        scrollbar-width: none;
+        flex: 1;
+        min-height: 0;
+        padding-top: calc(var(--spacing) * 6);
+        padding-right: calc(var(--spacing) * 6);
+        padding-left: calc(var(--spacing) * 2);
+        margin: 0 2rem;
+    }
+
+    .sidebar-entries {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--spacing) * 6);
+        padding-bottom: calc(var(--spacing) * 16);
+    }
+
+    @media (min-width: 1024px) {
+        .container-sidebar {
+            max-height: calc(100svh - 10rem - 2.25rem);
+        }
+    }
+</style>