You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
13 KiB
PHTML
135 lines
13 KiB
PHTML
@php
|
|
$sidebarLinks = [
|
|
[
|
|
'link' => '/dashboard',
|
|
'name' => 'Dashboard',
|
|
'icon' => '<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
|
|
</svg>',
|
|
],
|
|
[
|
|
'link' => '#',
|
|
'name' => 'Pages',
|
|
'icon' => '<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z">
|
|
</path>
|
|
</svg>',
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
<div class="group peer hidden md:block" :data-state="sidebar.open ? 'expanded' : 'collapsed'" :data-collapsible="sidebar.open ? '' : 'icon'"
|
|
data-variant="inset" data-side="left">
|
|
<!-- This is what handles the sidebar gap on desktop -->
|
|
<div
|
|
class="relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]">
|
|
</div>
|
|
<div
|
|
class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]">
|
|
<div data-sidebar="sidebar"
|
|
class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow">
|
|
<div data-sidebar="header" class="flex flex-col gap-2 p-2">
|
|
<ul data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1">
|
|
<li data-sidebar="menu-item" class="group/menu-item relative"><a data-sidebar="menu-button"
|
|
data-size="lg" data-active="false"
|
|
class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-12 text-sm group-data-[collapsible=icon]:!p-0"
|
|
href="/dashboard">
|
|
LOGO
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
<div data-sidebar="content"
|
|
class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden">
|
|
<div data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2 px-2 py-0">
|
|
<div data-sidebar="group-label"
|
|
class="flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">
|
|
Platform</div>
|
|
<ul data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1">
|
|
@foreach ($sidebarLinks as $sidebarLink)
|
|
<li data-sidebar="menu-item" class="group/menu-item relative">
|
|
<a data-sidebar="menu-button" data-size="default" data-active="true"
|
|
class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate ![&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm"
|
|
href="{{ $sidebarLink['link'] }}">
|
|
{!! $sidebarLink['icon'] !!}
|
|
<span>{{ $sidebarLink['name'] }}</span>
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-sidebar="footer" class="flex flex-col gap-2 p-2">
|
|
<div data-sidebar="group"
|
|
class="relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:p-0">
|
|
<div data-sidebar="group-content" class="w-full text-sm">
|
|
<ul data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1">
|
|
<li data-sidebar="menu-item" class="group/menu-item relative"><a
|
|
href="https://github.com/leafsphp/leaf" target="_blank"
|
|
rel="noopener noreferrer" data-sidebar="menu-button" data-size="default"
|
|
data-active="false"
|
|
class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent h-8 text-sm text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"><svg
|
|
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="lucide lucide-folder-icon">
|
|
<path
|
|
d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z">
|
|
</path>
|
|
</svg><span>Github Repo</span></a></li>
|
|
<li data-sidebar="menu-item" class="group/menu-item relative"><a
|
|
href="https://leafphp.dev" target="_blank"
|
|
rel="noopener noreferrer" data-sidebar="menu-button" data-size="default"
|
|
data-active="false"
|
|
class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent h-8 text-sm text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"><svg
|
|
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="lucide lucide-book-open-icon">
|
|
<path d="M12 7v14"></path>
|
|
<path
|
|
d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z">
|
|
</path>
|
|
</svg><span>Documentation</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<ul data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1">
|
|
<li data-sidebar="menu-item" class="group/menu-item relative" x-data="{ showUserMenu: false }"
|
|
@click.outside="showUserMenu = false">
|
|
<button data-sidebar="menu-button" @click="showUserMenu = !showUserMenu" data-size="lg"
|
|
data-active="false"
|
|
class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-12 text-sm group-data-[collapsible=icon]:!p-0 outline-none data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
type="button" aria-haspopup="menu" aria-expanded="false" data-state="closed">
|
|
<span
|
|
class="inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary text-xs h-8 w-8 overflow-hidden rounded-lg"><!--v-if--><span
|
|
class="rounded-lg text-black dark:text-white">
|
|
{{ strtoupper(auth()->user()->name[0]) }}
|
|
</span>
|
|
</span>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-medium">{{ auth()->user()->name }}</span>
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="lucide lucide-chevrons-up-down-icon ml-auto size-4">
|
|
<path d="m7 15 5 5 5-5"></path>
|
|
<path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
@include('components.layout.user-menu-context')
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|