---
import type {ContentFolder, ContentFile} from '../lib/content';

interface Props {
    folder: ContentFolder;
}

const {folder} = Astro.props;
const currentUrl = Astro.url.pathname;
const isAnchorNav = folder.folders[0]?.files[0]?.url?.startsWith('#');

const isReference = folder.folder === 'reference';
const showIcons = folder.folder === 'patterns' || folder.folder === 'extensions';

const linkClasses = 'sidebar-link flex items-center gap-2.5 px-3 py-2 text-sm rounded-lg text-neutral-600 dark:text-neutral-400 interact:bg-neutral-100 dark:interact:bg-neutral-850 interact:text-black dark:interact:text-neutral-200 aria-[current]:bg-neutral-150 dark:aria-[current]:bg-neutral-800 aria-[current]:text-black dark:aria-[current]:text-neutral-50 aria-[current]:font-semibold';
---

<aside id="sidebar" class="fixed top-(--header-height) inset-x-0 isolate z-40 group/sidebar">

    <nav id="sidebar-nav" aria-label="Sidebar Navigation" class="
            bg-neutral-25 dark:bg-neutral-920 overflow-y-auto border-neutral-200 dark:border-neutral-850 transition
            px-3 sm:px-5 lg:px-6
            pb-10
            max-lg:absolute max-lg:top-full max-lg:inset-x-0 max-lg:z-30
            max-lg:h-[calc(100lvh-var(--header-height))]
            max-lg:overscroll-contain
            max-lg:opacity-0 max-lg:pointer-events-none max-lg:duration-200
            [html:has(#sidebar-toggle-mobile:checked)_&]:opacity-100 [html:has(#sidebar-toggle-mobile:checked)_&]:pointer-events-auto
            lg:fixed lg:top-(--header-height) lg:left-0 lg:bottom-0 lg:w-[320px] lg:border-r
         ">

        <div class="h-7.5 shrink-0"></div>

        <div _={isAnchorNav ? `install Scrollspy` : undefined}>

            {!isAnchorNav && (
                    <a href={folder.url}
                       aria-current={currentUrl === folder.url ? 'page' : undefined}
                       class:list={[linkClasses, 'block mb-2 truncate']}>
                        Overview
                    </a>
            )}

            {folder.folders.map((subFolder) => {
                const files = subFolder.files;

                return (
                        <div class="w-full not-first:mt-3">
                            <h3 class="text-tertiary truncate min-w-0 px-3 py-1"
                                set:html={subFolder.frontmatter.title}/>

                            {files.length > 0 && (
                                    <ul class="space-y-0.5 mt-2 mb-4">
                                        {files.map((file: ContentFile) => {
                                            const isActive = currentUrl === file.url;
                                            const isSoon = file.frontmatter.soon;
                                            return (
                                                    <li>
                                                        <a href={isSoon ? undefined : file.url}
                                                           title={file.frontmatter.description}
                                                           aria-current={isActive ? 'page' : undefined}
                                                           aria-disabled={isSoon ? 'true' : undefined}
                                                           hx-boost={isSoon && 'false'}
                                                           class:list={[
                                                               linkClasses,
                                                               isReference && 'font-mono',
                                                               isSoon && 'opacity-50 cursor-not-allowed',
                                                           ]}>
                                                            {showIcons && file.frontmatter.icon && (
                                                                    <i class:list={[file.frontmatter.icon, "size-4 shrink-0"]}></i>
                                                            )}
                                                            <span class="truncate" set:html={file.frontmatter.title}/>
                                                            {isSoon && (
                                                                    <span class="text-[9px] px-1.5 py-0.5 shrink-0 rounded bg-yellow-300/5 text-yellow-700 dark:text-yellow-300 border border-yellow-600/50 dark:border-yellow-300 font-medium uppercase tracking-wide ml-auto">Soon</span>
                                                            )}
                                                        </a>
                                                    </li>
                                            );
                                        })}
                                    </ul>
                            )}
                        </div>
                );
            })}

            {folder.files.map((f: ContentFile) => {
                const isActive = currentUrl === f.url;
                return (
                        <a href={f.url}
                           title={f.frontmatter.description}
                           aria-current={isActive ? 'page' : undefined}
                           class:list={[linkClasses, 'block truncate']}>
                            <span set:html={f.frontmatter.title}/>
                        </a>
                );
            })}
        </div>
    </nav>

    <input id="sidebar-toggle-mobile" type="checkbox" class="sr-only" _="on click from <a/> set my.checked to false">
</aside>
