<template>
    <SidebarProvider>
        <AppSidebar />
        <SidebarInset
            class="md:peer-data-[variant=inset]:rounded md:peer-data-[variant=inset]:shadow-sm"
        >
            <header class="flex h-11 shrink-0 items-center gap-2 border-b px-4">
                <SidebarTrigger class="-ml-1" />
                <Separator class="mr-2 h-4" orientation="vertical" />
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem class="text-[13px]">
                            <BreadcrumbPage>My issues</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </header>
            <div class="flex flex-1 flex-col gap-4 p-4">
                <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                    <div class="aspect-video rounded-xl bg-gray-100" />
                    <div class="aspect-video rounded-xl bg-gray-100" />
                    <div class="aspect-video rounded-xl bg-gray-100" />
                </div>
                <div
                    class="min-h-[100vh] flex-1 rounded-xl bg-gray-100 md:min-h-min"
                />
            </div>
        </SidebarInset>
    </SidebarProvider>
</template>

<script lang="ts" setup>
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from '@/registry/ui/sidebar'
import AppSidebar from '@/registry/blocks/sidebar-linear/components/AppSidebar.vue'
import { Separator } from '@/registry/ui/separator'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
    BreadcrumbPage,
} from '@/registry/ui/breadcrumb'
</script>

<template>
    <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
            <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                <SidebarTrigger class="-ml-1" />
                <Separator class="mr-2 h-4" orientation="vertical" />
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem class="hidden md:block">
                            <BreadcrumbLink href="#">
                                Building your application
                            </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator class="hidden md:block" />
                        <BreadcrumbItem>
                            <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </header>
            <div class="flex flex-1 flex-col gap-4 p-4">
                <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                </div>
                <div
                    class="min-h-[100vh] flex-1 rounded-xl bg-gray-200/50 md:min-h-min"
                />
            </div>
        </SidebarInset>
    </SidebarProvider>
</template>

<script lang="ts" setup>
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from '@/registry/ui/sidebar'
import AppSidebar from '@/registry/blocks/sidebar-01/components/AppSidebar.vue'
import { Separator } from '@/registry/ui/separator'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/registry/ui/breadcrumb'
</script>

<template>
    <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
            <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                <SidebarTrigger class="-ml-1" />
                <Separator class="mr-2 h-4" orientation="vertical" />
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem class="hidden md:block">
                            <BreadcrumbLink href="#">
                                Building your application
                            </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator class="hidden md:block" />
                        <BreadcrumbItem>
                            <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </header>
            <div class="flex flex-1 flex-col gap-4 p-4">
                <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                </div>
                <div
                    class="min-h-[100vh] flex-1 rounded-xl bg-gray-200/50 md:min-h-min"
                />
            </div>
        </SidebarInset>
    </SidebarProvider>
</template>

<script lang="ts" setup>
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from '@/registry/ui/sidebar'
import AppSidebar from '@/registry/blocks/sidebar-02/components/AppSidebar.vue'
import { Separator } from '@/registry/ui/separator'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/registry/ui/breadcrumb'
</script>

<template>
    <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
            <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                <SidebarTrigger class="-ml-1" />
                <Separator class="mr-2 h-4" orientation="vertical" />
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem class="hidden md:block">
                            <BreadcrumbLink href="#">
                                Building your application
                            </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator class="hidden md:block" />
                        <BreadcrumbItem>
                            <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </header>
            <div class="flex flex-1 flex-col gap-4 p-4">
                <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                    <div class="aspect-video rounded-xl bg-gray-200/50" />
                </div>
                <div
                    class="min-h-[100vh] flex-1 rounded-xl bg-gray-200/50 md:min-h-min"
                />
            </div>
        </SidebarInset>
    </SidebarProvider>
</template>

<script lang="ts" setup>
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from '@/registry/ui/sidebar'
import AppSidebar from '@/registry/blocks/sidebar-03/components/AppSidebar.vue'
import { Separator } from '@/registry/ui/separator'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/registry/ui/breadcrumb'
</script>

<template>
    <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
            <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                <SidebarTrigger class="-ml-1" />
                <Separator class="mr-2 h-4" orientation="vertical" />
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem class="hidden md:block">
                            <BreadcrumbLink href="#">
                                Building your application
                            </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator class="hidden md:block" />
                        <BreadcrumbItem>
                            <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </header>
            <div class="flex flex-1 flex-col gap-4 p-4">
                <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                    <div class="aspect-video rounded-xl bg-gray-100" />
                    <div class="aspect-video rounded-xl bg-gray-100" />
                    <div class="aspect-video rounded-xl bg-gray-100" />
                </div>
                <div
                    class="min-h-[100vh] flex-1 rounded-xl bg-gray-100 md:min-h-min"
                />
            </div>
        </SidebarInset>
    </SidebarProvider>
</template>

<script lang="ts" setup>
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from '@/registry/ui/sidebar'
import AppSidebar from '@/registry/blocks/sidebar-08/components/AppSidebar.vue'
import { Separator } from '@/registry/ui/separator'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/registry/ui/breadcrumb'
</script>