A composable, themeable and customizable sidebar component.
<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>If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:sidebar --force