<x-portal::sidebar.provider>

    <x-portal::sidebar>
        <x-portal::sidebar.logo 
            title="Portal UI" 
            description="Administrator" 
            logo="{{ asset('logo.jpg') }}" 
        />
        <x-portal::sidebar.content>
            <x-portal::sidebar.item.group>
                <x-portal::sidebar.item.label>General</x-portal::sidebar.item.label>
                <x-portal::sidebar.items>
                    <x-portal::sidebar.item href="" label="Dashboard">
                        <x-tabler-layout-dashboard class="icon" />
                        Dashboard
                    </x-portal::sidebar.item>
                    <x-portal::sidebar.item href="" label="Task">
                        <x-tabler-checklist class="icon" />
                        Task
                    </x-portal::sidebar.item>
                    <x-portal::sidebar.item href="" label="Apps">
                        <x-tabler-packages class="icon" />
                        Apps
                    </x-portal::sidebar.item>
                    <x-portal::sidebar.item href="" label="Chats">
                        <x-tabler-messages class="icon" />
                        Chats
                        <x-portal::sidebar.item.badge label="3" />
                    </x-portal::sidebar.item>
                    <x-portal::sidebar.item href="" label="Users">
                        <x-tabler-users class="icon" />
                        Users
                    </x-portal::sidebar.item>
                </x-portal::sidebar.items>
            </x-portal::sidebar.item.group>

            <x-portal::sidebar.item.group>
                <x-portal::sidebar.item.label>Pages</x-portal::sidebar.item.label>
                <x-portal::sidebar.items>
                    <x-portal::sidebar.item.dropdown label="Auth" icon="lock-access" active>
                        <x-portal::sidebar.item href="" active>Sign In</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">Sign In (2 Col)</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">Sign Up</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">Forgot Password</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">OTP</x-portal::sidebar.item>
                    </x-portal::sidebar.item.dropdown>
                    <x-portal::sidebar.item.dropdown label="Documentation" icon="book">
                        <x-portal::sidebar.item href="">Introducing</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">Get Started</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">Instalation</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">Tutorials</x-portal::sidebar.item>
                        <x-portal::sidebar.item href="">Changelog</x-portal::sidebar.item>
                    </x-portal::sidebar.item.dropdown>
                </x-portal::sidebar.items>
            </x-portal::sidebar.item.group>

        </x-portal::sidebar.content>

        <x-portal::sidebar.footer>
            <x-portal::sidebar.items>
                <x-portal::sidebar.item href="" label="Integragion">
                    <x-tabler-layout-dashboard class="icon" />
                    Integragion
                </x-portal::sidebar.item>
                <x-portal::sidebar.item href="" label="Task">
                    <x-tabler-checklist class="icon" />
                    Task
                </x-portal::sidebar.item>
            </x-portal::sidebar.items>

            <x-portal::sidebar.footer.profile title="shadcn" description="m@example.com"
                profile="https://ui.shadcn.com/avatars/shadcn.jpg" alias="CN">
                <x-portal::dropdown-menu.separator />
                <x-portal::dropdown-menu.item as="a" href="/">
                    <x-tabler-sparkles class="h-4 w-4" />
                    Upgrade to Pro
                </x-portal::dropdown-menu.item>
                <x-portal::dropdown-menu.separator />
                <x-portal::dropdown-menu.item as="a" href="/">
                    <x-tabler-rosette-discount-check class="h-4 w-4" />
                    Account
                </x-portal::dropdown-menu.item>
                <x-portal::dropdown-menu.item as="a" href="/">
                    <x-tabler-credit-card class="h-4 w-4" />
                    Billing
                </x-portal::dropdown-menu.item>
                <x-portal::dropdown-menu.item as="a" href="/">
                    <x-tabler-bell class="h-4 w-4" />
                    Notification
                </x-portal::dropdown-menu.item>
                <x-portal::dropdown-menu.separator />
                <x-portal::dropdown-menu.item as="button" type="button" variant="danger">
                    <x-tabler-logout class="h-4 w-4" />
                    Logout
                </x-portal::dropdown-menu.item>
            </x-portal::sidebar.footer.profile>
        </x-portal::sidebar.footer>
    </x-portal::sidebar>

    <div class="w-full peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon)-1rem)] transition-[width] duration-200 ease-linear peer-data-[state=expanded]:w-[calc(100%-var(--sidebar-width))] flex flex-col">
        <x-portal::layout.header>
            <x-portal::sidebar.trigger />
            <x-portal::separator orientation="vertical" class="!h-4 me-2" />
            <div class="md:block hidden">
                <x-portal::breadcrumb>
                    <x-portal::breadcrumb.item href="/">Building Your Application</x-portal::breadcrumb.item>
                    <x-portal::breadcrumb.item>Data Fetching</x-portal::breadcrumb.item>
                </x-portal::breadcrumb>
            </div>

            <div class="ml-auto flex items-center space-x-4">
                <x-portal::layout.theme-toggle />
                <x-portal::layout.profile title="shadcn" description="m@example.com"
                    profile="https://ui.shadcn.com/avatars/shadcn.jpg" alias="CN">
                    <x-portal::dropdown-menu.separator />
                    <x-portal::dropdown-menu.item as="a" href="/">
                        <x-tabler-sparkles class="h-4 w-4" />
                        Upgrade to Pro
                    </x-portal::dropdown-menu.item>
                    <x-portal::dropdown-menu.separator />
                    <x-portal::dropdown-menu.item as="a" href="/">
                        <x-tabler-rosette-discount-check class="h-4 w-4" />
                        Account
                    </x-portal::dropdown-menu.item>
                    <x-portal::dropdown-menu.item as="a" href="/">
                        <x-tabler-credit-card class="h-4 w-4" />
                        Billing
                    </x-portal::dropdown-menu.item>
                    <x-portal::dropdown-menu.item as="a" href="/">
                        <x-tabler-bell class="h-4 w-4" />
                        Notification
                    </x-portal::dropdown-menu.item>
                    <x-portal::dropdown-menu.separator />
                    <x-portal::dropdown-menu.item as="button" type="button" variant="danger">
                        <x-tabler-logout class="h-4 w-4" />
                        Logout
                    </x-portal::dropdown-menu.item>
                </x-portal::layout.profile>
            </div>
        </x-portal::layout.header>

        <x-portal::layout.content>
            <x-portal::heading size="xl" class="!font-bold">Tasks</x-portal::heading>
            <x-portal::heading.sub>Here's a list of your tasks for this month!</x-portal::heading.sub>
        </x-portal::layout.content>
    </div>
</x-portal::sidebar.provider>