@php
$teams = [
['name' => 'Acme Inc', 'logo' => 'command', 'plan' => 'Enterprise'],
['name' => 'Acme Corp.', 'logo' => 'audio-waveform', 'plan' => 'Startup'],
['name' => 'Evil Corp.', 'logo' => 'command', 'plan' => 'Free'],
];
$navMain = [
['title' => 'Search', 'icon' => 'search'],
['title' => 'Ask AI', 'icon' => 'sparkles'],
['title' => 'Home', 'icon' => 'home', 'isActive' => true],
['title' => 'Inbox', 'icon' => 'inbox', 'badge' => '10'],
];
$navSecondary = [
['title' => 'Calendar', 'icon' => 'calendar'],
['title' => 'Settings', 'icon' => 'settings-2'],
['title' => 'Templates', 'icon' => 'blocks'],
['title' => 'Trash', 'icon' => 'trash-2'],
['title' => 'Help', 'icon' => 'message-circle-question'],
];
$favorites = [
['name' => 'Project Management & Task Tracking', 'emoji' => '📊'],
['name' => 'Family Recipe Collection & Meal Planning', 'emoji' => '🍳'],
['name' => 'Fitness Tracker & Workout Routines', 'emoji' => '💪'],
['name' => 'Book Notes & Reading List', 'emoji' => '📚'],
['name' => 'Sustainable Gardening Tips & Plant Care', 'emoji' => '🌱'],
['name' => 'Language Learning Progress & Resources', 'emoji' => '🗣️'],
['name' => 'Home Renovation Ideas & Budget Tracker', 'emoji' => '🏠'],
['name' => 'Personal Finance & Investment Portfolio', 'emoji' => '💰'],
['name' => 'Movie & TV Show Watchlist with Reviews', 'emoji' => '🎬'],
['name' => 'Daily Habit Tracker & Goal Setting', 'emoji' => '✅'],
];
$workspaces = [
['name' => 'Personal Life Management', 'emoji' => '🏠', 'pages' => [
['name' => 'Daily Journal & Reflection', 'emoji' => '📔'],
['name' => 'Health & Wellness Tracker', 'emoji' => '🍏'],
['name' => 'Personal Growth & Learning Goals', 'emoji' => '🌟'],
]],
['name' => 'Professional Development', 'emoji' => '💼', 'pages' => [
['name' => 'Career Objectives & Milestones', 'emoji' => '🎯'],
['name' => 'Skill Acquisition & Training Log', 'emoji' => '🧠'],
['name' => 'Networking Contacts & Events', 'emoji' => '🤝'],
]],
['name' => 'Creative Projects', 'emoji' => '🎨', 'pages' => [
['name' => 'Writing Ideas & Story Outlines', 'emoji' => '✍️'],
['name' => 'Art & Design Portfolio', 'emoji' => '🖼️'],
['name' => 'Music Composition & Practice Log', 'emoji' => '🎵'],
]],
['name' => 'Home Management', 'emoji' => '🏡', 'pages' => [
['name' => 'Household Budget & Expense Tracking', 'emoji' => '💰'],
['name' => 'Home Maintenance Schedule & Tasks', 'emoji' => '🔧'],
['name' => 'Family Calendar & Event Planning', 'emoji' => '📅'],
]],
['name' => 'Travel & Adventure', 'emoji' => '🧳', 'pages' => [
['name' => 'Trip Planning & Itineraries', 'emoji' => '🗺️'],
['name' => 'Travel Bucket List & Inspiration', 'emoji' => '🌎'],
['name' => 'Travel Journal & Photo Gallery', 'emoji' => '📸'],
]],
];
$navActions = [
[['label' => 'Customize Page', 'icon' => 'settings-2'], ['label' => 'Turn into wiki', 'icon' => 'file-text']],
[['label' => 'Copy Link', 'icon' => 'link'], ['label' => 'Duplicate', 'icon' => 'copy'], ['label' => 'Move to', 'icon' => 'corner-up-right'], ['label' => 'Move to Trash', 'icon' => 'trash-2']],
[['label' => 'Undo', 'icon' => 'corner-up-left'], ['label' => 'View analytics', 'icon' => 'line-chart'], ['label' => 'Version History', 'icon' => 'gallery-vertical-end'], ['label' => 'Show delete pages', 'icon' => 'trash'], ['label' => 'Notifications', 'icon' => 'bell']],
[['label' => 'Import', 'icon' => 'arrow-up'], ['label' => 'Export', 'icon' => 'arrow-down']],
];
@endphp
<x-layouts.app title="Sidebar 10">
<x-ui.sidebar-provider>
<x-ui.sidebar class="border-r-0">
<x-ui.sidebar-header>
<x-ui.sidebar-menu x-data="{ active: 0 }">
<x-ui.sidebar-menu-item>
<x-ui.dropdown-menu>
<x-ui.dropdown-menu-trigger>
<x-ui.sidebar-menu-button class="w-fit px-1.5">
<div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
@foreach ($teams as $i => $team)
<span x-show="active === {{ $i }}"><x-dynamic-component :component="'lucide-'.$team['logo']" class="size-3" /></span>
@endforeach
</div>
<span class="truncate font-medium" x-text="{{ \Illuminate\Support\Js::from(array_column($teams, 'name')) }}[active]"></span>
<x-lucide-chevron-down class="opacity-50" />
</x-ui.sidebar-menu-button>
</x-ui.dropdown-menu-trigger>
<x-ui.dropdown-menu-content class="w-64 rounded-lg" align="start" side="bottom" :side-offset="4">
<x-ui.dropdown-menu-label class="text-muted-foreground text-xs">Teams</x-ui.dropdown-menu-label>
@foreach ($teams as $i => $team)
<x-ui.dropdown-menu-item x-on:click="active = {{ $i }}" class="gap-2 p-2">
<div class="flex size-6 items-center justify-center rounded-xs border">
<x-dynamic-component :component="'lucide-'.$team['logo']" class="size-4 shrink-0" />
</div>
{{ $team['name'] }}
<x-ui.dropdown-menu-shortcut>⌘{{ $i + 1 }}</x-ui.dropdown-menu-shortcut>
</x-ui.dropdown-menu-item>
@endforeach
<x-ui.dropdown-menu-separator />
<x-ui.dropdown-menu-item class="gap-2 p-2">
<div class="bg-background flex size-6 items-center justify-center rounded-md border">
<x-lucide-plus class="size-4" />
</div>
<div class="text-muted-foreground font-medium">Add team</div>
</x-ui.dropdown-menu-item>
</x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>
</x-ui.sidebar-menu-item>
</x-ui.sidebar-menu>
<x-ui.sidebar-menu>
@foreach ($navMain as $item)
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button href="#" :is-active="$item['isActive'] ?? false">
<x-dynamic-component :component="'lucide-'.$item['icon']" />
<span>{{ $item['title'] }}</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
@endforeach
</x-ui.sidebar-menu>
</x-ui.sidebar-header>
<x-ui.sidebar-content>
<x-ui.sidebar-group class="group-data-[collapsible=icon]:hidden">
<x-ui.sidebar-group-label>Favorites</x-ui.sidebar-group-label>
<x-ui.sidebar-menu>
@foreach ($favorites as $item)
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button href="#" title="{{ $item['name'] }}">
<span>{{ $item['emoji'] }}</span>
<span>{{ $item['name'] }}</span>
</x-ui.sidebar-menu-button>
<x-ui.dropdown-menu>
<x-ui.dropdown-menu-trigger>
<x-ui.sidebar-menu-action :show-on-hover="true">
<x-lucide-more-horizontal />
<span class="sr-only">More</span>
</x-ui.sidebar-menu-action>
</x-ui.dropdown-menu-trigger>
<x-ui.dropdown-menu-content class="w-56 rounded-lg" side="right" align="start">
<x-ui.dropdown-menu-item><x-lucide-star-off class="text-muted-foreground" /><span>Remove from Favorites</span></x-ui.dropdown-menu-item>
<x-ui.dropdown-menu-separator />
<x-ui.dropdown-menu-item><x-lucide-link class="text-muted-foreground" /><span>Copy Link</span></x-ui.dropdown-menu-item>
<x-ui.dropdown-menu-item><x-lucide-arrow-up-right class="text-muted-foreground" /><span>Open in New Tab</span></x-ui.dropdown-menu-item>
<x-ui.dropdown-menu-separator />
<x-ui.dropdown-menu-item><x-lucide-trash-2 class="text-muted-foreground" /><span>Delete</span></x-ui.dropdown-menu-item>
</x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>
</x-ui.sidebar-menu-item>
@endforeach
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button class="text-sidebar-foreground/70">
<x-lucide-more-horizontal />
<span>More</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
</x-ui.sidebar-menu>
</x-ui.sidebar-group>
<x-ui.sidebar-group>
<x-ui.sidebar-group-label>Workspaces</x-ui.sidebar-group-label>
<x-ui.sidebar-group-content>
<x-ui.sidebar-menu>
@foreach ($workspaces as $workspace)
<x-ui.collapsible>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button href="#">
<span>{{ $workspace['emoji'] }}</span>
<span>{{ $workspace['name'] }}</span>
</x-ui.sidebar-menu-button>
<x-ui.sidebar-menu-action class="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90" :show-on-hover="true" x-on:click="open = !open" ::data-state="open ? 'open' : 'closed'">
<x-lucide-chevron-right />
</x-ui.sidebar-menu-action>
<x-ui.sidebar-menu-action :show-on-hover="true">
<x-lucide-plus />
</x-ui.sidebar-menu-action>
<x-ui.collapsible-content>
<x-ui.sidebar-menu-sub>
@foreach ($workspace['pages'] as $page)
<x-ui.sidebar-menu-sub-item>
<x-ui.sidebar-menu-sub-button href="#">
<span>{{ $page['emoji'] }}</span>
<span>{{ $page['name'] }}</span>
</x-ui.sidebar-menu-sub-button>
</x-ui.sidebar-menu-sub-item>
@endforeach
</x-ui.sidebar-menu-sub>
</x-ui.collapsible-content>
</x-ui.sidebar-menu-item>
</x-ui.collapsible>
@endforeach
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button class="text-sidebar-foreground/70">
<x-lucide-more-horizontal />
<span>More</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
</x-ui.sidebar-menu>
</x-ui.sidebar-group-content>
</x-ui.sidebar-group>
<x-ui.sidebar-group class="mt-auto">
<x-ui.sidebar-group-content>
<x-ui.sidebar-menu>
@foreach ($navSecondary as $item)
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button href="#">
<x-dynamic-component :component="'lucide-'.$item['icon']" />
<span>{{ $item['title'] }}</span>
</x-ui.sidebar-menu-button>
@isset($item['badge'])
<x-ui.sidebar-menu-badge>{{ $item['badge'] }}</x-ui.sidebar-menu-badge>
@endisset
</x-ui.sidebar-menu-item>
@endforeach
</x-ui.sidebar-menu>
</x-ui.sidebar-group-content>
</x-ui.sidebar-group>
</x-ui.sidebar-content>
<x-ui.sidebar-rail />
</x-ui.sidebar>
<x-ui.sidebar-inset>
<header class="flex h-14 shrink-0 items-center gap-2">
<div class="flex flex-1 items-center gap-2 px-3">
<x-ui.sidebar-trigger />
<x-ui.separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
<x-ui.breadcrumb>
<x-ui.breadcrumb-list>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-page class="line-clamp-1">Project Management & Task Tracking</x-ui.breadcrumb-page>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>
</div>
<div class="ml-auto px-3">
<div class="flex items-center gap-2 text-sm">
<div class="text-muted-foreground hidden font-medium md:inline-block">Edit Oct 08</div>
<x-ui.button variant="ghost" size="icon" class="h-7 w-7"><x-lucide-star /></x-ui.button>
<x-ui.popover x-init="open = true">
<x-ui.popover-trigger>
<x-ui.button variant="ghost" size="icon" class="h-7 w-7 data-[state=open]:bg-accent" ::data-state="open ? 'open' : 'closed'"><x-lucide-more-horizontal /></x-ui.button>
</x-ui.popover-trigger>
<x-ui.popover-content class="w-56 overflow-hidden rounded-lg p-0" align="end">
<x-ui.sidebar collapsible="none" class="bg-transparent">
<x-ui.sidebar-content>
@foreach ($navActions as $group)
<x-ui.sidebar-group class="border-b last:border-none">
<x-ui.sidebar-group-content class="gap-0">
<x-ui.sidebar-menu>
@foreach ($group as $item)
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button>
<x-dynamic-component :component="'lucide-'.$item['icon']" />
<span>{{ $item['label'] }}</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
@endforeach
</x-ui.sidebar-menu>
</x-ui.sidebar-group-content>
</x-ui.sidebar-group>
@endforeach
</x-ui.sidebar-content>
</x-ui.sidebar>
</x-ui.popover-content>
</x-ui.popover>
</div>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 px-4 py-10">
<div class="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl"></div>
<div class="bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl"></div>
</div>
</x-ui.sidebar-inset>
</x-ui.sidebar-provider>
</x-layouts.app>