<script lang="ts" module>
    // sample data
    const data = {
        versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
        navMain: [
            {
                title: 'Getting Started',
                url: '#',
                items: [
                    {
                        title: 'Installation',
                        url: '#'
                    },
                    {
                        title: 'Project Structure',
                        url: '#'
                    }
                ]
            },
            {
                title: 'Building Your Application',
                url: '#',
                items: [
                    {
                        title: 'Routing',
                        url: '#'
                    },
                    {
                        title: 'Data Fetching',
                        url: '#',
                        isActive: true
                    },
                    {
                        title: 'Rendering',
                        url: '#'
                    },
                    {
                        title: 'Caching',
                        url: '#'
                    },
                    {
                        title: 'Styling',
                        url: '#'
                    },
                    {
                        title: 'Optimizing',
                        url: '#'
                    },
                    {
                        title: 'Configuring',
                        url: '#'
                    },
                    {
                        title: 'Testing',
                        url: '#'
                    },
                    {
                        title: 'Authentication',
                        url: '#'
                    },
                    {
                        title: 'Deploying',
                        url: '#'
                    },
                    {
                        title: 'Upgrading',
                        url: '#'
                    },
                    {
                        title: 'Examples',
                        url: '#'
                    }
                ]
            },
            {
                title: 'API Reference',
                url: '#',
                items: [
                    {
                        title: 'Components',
                        url: '#'
                    },
                    {
                        title: 'File Conventions',
                        url: '#'
                    },
                    {
                        title: 'Functions',
                        url: '#'
                    },
                    {
                        title: 'next.config.js Options',
                        url: '#'
                    },
                    {
                        title: 'CLI',
                        url: '#'
                    },
                    {
                        title: 'Edge Runtime',
                        url: '#'
                    }
                ]
            },
            {
                title: 'Architecture',
                url: '#',
                items: [
                    {
                        title: 'Accessibility',
                        url: '#'
                    },
                    {
                        title: 'Fast Refresh',
                        url: '#'
                    },
                    {
                        title: 'Svelte Compiler',
                        url: '#'
                    },
                    {
                        title: 'Supported Browsers',
                        url: '#'
                    },
                    {
                        title: 'Rollup',
                        url: '#'
                    }
                ]
            }
        ]
    };
</script>

<script lang="ts">
    import SearchForm from './search-form.svelte';
    import VersionSwitcher from './version-switcher.svelte';
    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
    import type { ComponentProps } from 'svelte';

    let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
</script>

<Sidebar.Root {...restProps} bind:ref>
    <Sidebar.Header>
        <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} />
        <SearchForm />
    </Sidebar.Header>
    <Sidebar.Content>
        <!-- We create a Sidebar.Group for each parent. -->
        {#each data.navMain as group (group.title)}
            <Sidebar.Group>
                <Sidebar.GroupLabel>{group.title}</Sidebar.GroupLabel>
                <Sidebar.GroupContent>
                    <Sidebar.Menu>
                        {#each group.items as item (item.title)}
                            <Sidebar.MenuItem>
                                <Sidebar.MenuButton isActive={item.isActive}>
                                    {#snippet child({ props })}
                                        <a href={item.url} {...props}>{item.title}</a>
                                    {/snippet}
                                </Sidebar.MenuButton>
                            </Sidebar.MenuItem>
                        {/each}
                    </Sidebar.Menu>
                </Sidebar.GroupContent>
            </Sidebar.Group>
        {/each}
    </Sidebar.Content>
    <Sidebar.Rail />
</Sidebar.Root>
