0fd2848475
- Updated login and registration forms with improved layout and new components for better user experience. - Removed unused favicon and replaced references with updated logo image.
323 lines
14 KiB
PHP
323 lines
14 KiB
PHP
<?php
|
|
|
|
use App\Data\Ui\Sidebar\NavItemData;
|
|
use App\Data\Ui\Sidebar\NavSubItemData;
|
|
use App\Enums\Permissions\AccessManager;
|
|
use App\Enums\Permissions\Apps;
|
|
use App\Enums\Permissions\Settings;
|
|
use Livewire\Component;
|
|
use Spatie\LaravelData\DataCollection;
|
|
|
|
new class extends Component {
|
|
/** Collapsed = icons-only mode */
|
|
public bool $collapsed = false;
|
|
|
|
public function mount(): void
|
|
{
|
|
$this->collapsed = session('sidebar_collapsed', false);
|
|
}
|
|
|
|
public function toggle(): void
|
|
{
|
|
$this->collapsed = !$this->collapsed;
|
|
session(['sidebar_collapsed' => $this->collapsed]);
|
|
}
|
|
|
|
/**
|
|
* @return DataCollection<int, NavItemData>
|
|
*/
|
|
public function navItems(): DataCollection
|
|
{
|
|
$items = NavItemData::collect([
|
|
new NavItemData(
|
|
label: 'Dashboard',
|
|
icon: 'lucide.house',
|
|
active_pattern: 'dashboard',
|
|
route: 'dashboard',
|
|
),
|
|
|
|
new NavItemData(
|
|
label: 'Apps',
|
|
icon: 'lucide.grid-2x2-plus',
|
|
active_pattern: 'apps.*',
|
|
sub_menu: NavSubItemData::collect([
|
|
new NavSubItemData(
|
|
label: 'All Apps',
|
|
route: 'apps.index',
|
|
active_pattern: 'apps.index',
|
|
permission: Apps::AllApps
|
|
),
|
|
new NavSubItemData(
|
|
label: 'Providers',
|
|
route: 'apps.connectionProviders.index',
|
|
active_pattern: 'apps.connectionProviders.*',
|
|
permission: Apps::Providers
|
|
)
|
|
], DataCollection::class)
|
|
),
|
|
|
|
new NavItemData(
|
|
label: 'Access Manager',
|
|
icon: 'lucide.shield',
|
|
active_pattern: 'access-manager.*',
|
|
sub_menu: NavSubItemData::collect([
|
|
new NavSubItemData(
|
|
label: 'Roles and Apps',
|
|
route: 'access-manager.roles-and-apps.index',
|
|
active_pattern: 'access-manager.roles-and-apps.*',
|
|
permission: AccessManager::RoleAndApps
|
|
),
|
|
new NavSubItemData(
|
|
label: 'Users',
|
|
route: 'access-manager.users.index',
|
|
active_pattern: 'access-manager.users.*',
|
|
permission: AccessManager::Users
|
|
),
|
|
], DataCollection::class)
|
|
),
|
|
|
|
new NavItemData(
|
|
label: 'Settings',
|
|
icon: 'lucide.settings',
|
|
active_pattern: 'settings.*', // Kept as fallback, but handled dynamically in view
|
|
sub_menu: NavSubItemData::collect([
|
|
new NavSubItemData(
|
|
label: 'Profile',
|
|
route: 'profile.edit',
|
|
active_pattern: 'profile.edit',
|
|
permission: Settings::Profile
|
|
),
|
|
new NavSubItemData(
|
|
label: 'Security',
|
|
route: 'security.edit',
|
|
active_pattern: 'security.edit',
|
|
permission: Settings::Security
|
|
),
|
|
], DataCollection::class)
|
|
),
|
|
], DataCollection::class);
|
|
|
|
// Filter out items the user shouldn't see
|
|
return $this->filterNavMenu($items);
|
|
}
|
|
|
|
/**
|
|
* Filter out menus that the current user does not have permission.
|
|
* @param DataCollection<NavItemData> $items
|
|
* @returns DataCollection<NavItemData>
|
|
*/
|
|
private function filterNavMenu(DataCollection $items): DataCollection
|
|
{
|
|
$filteredItems = $items->toCollection()->filter(function (NavItemData $item) {
|
|
if ($item->sub_menu) {
|
|
$allowedSubItems = $item->sub_menu->toCollection()->filter(function (NavSubItemData $subItem) {
|
|
$permission = $subItem->permission instanceof UnitEnum
|
|
? $subItem->permission->value
|
|
: $subItem->permission;
|
|
|
|
return auth()->user()->can($permission);
|
|
});
|
|
|
|
// If the user has NO access to any submenus, discard the parent menu item
|
|
if ($allowedSubItems->isEmpty()) {
|
|
return false;
|
|
}
|
|
|
|
// Update the DataCollection with authorized items
|
|
$item->sub_menu = NavSubItemData::collect($allowedSubItems, DataCollection::class);
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
return NavItemData::collect($filteredItems->values()->all(), DataCollection::class);
|
|
}
|
|
};
|
|
?>
|
|
|
|
<aside
|
|
x-data="{ collapsed: @entangle('collapsed') }"
|
|
:class="collapsed ? 'w-12' : 'w-64'"
|
|
class="relative flex flex-col h-screen bg-white border-r border-gray-100
|
|
transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden"
|
|
:aria-expanded="String(!collapsed)"
|
|
>
|
|
|
|
<div class="flex items-center h-20 px-2 border-b border-gray-100 shrink-0">
|
|
<a
|
|
href="{{ route('dashboard') }}"
|
|
wire:navigate
|
|
class="shrink-0 flex items-center justify-center w-8 h-8
|
|
rounded-lg
|
|
focus-visible:outline-none
|
|
focus-visible:ring-2 focus-visible:ring-cyan-400"
|
|
aria-label="Go to dashboard"
|
|
>
|
|
<img src="{{asset('images/logo.png')}}" width="32px" height="32px" alt="">
|
|
</a>
|
|
|
|
<span
|
|
x-cloak
|
|
x-show="!collapsed"
|
|
x-transition:enter="transition-all duration-200 delay-150 ease-out"
|
|
x-transition:enter-start="opacity-0 -translate-x-2"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="transition-opacity duration-100"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="ml-3 text-sm font-semibold text-gray-900 whitespace-nowrap tracking-tight"
|
|
>
|
|
<h1 class="text-lg">Company SSO</h1>
|
|
<h2 class="text-sm font-light">Admin Panel</h2>
|
|
</span>
|
|
</div>
|
|
|
|
<nav
|
|
class="flex-1 py-3 px-2 space-y-1 overflow-y-auto overflow-x-hidden"
|
|
aria-label="Main navigation"
|
|
>
|
|
@foreach ($this->navItems() as $item)
|
|
@php
|
|
$isActive = request()->routeIs($item->active_pattern);
|
|
|
|
// Check sub-menu active states without triggering Arrayable casting
|
|
if (! $isActive && $item->sub_menu) {
|
|
foreach ($item->sub_menu as $subItem) {
|
|
if (request()->routeIs($subItem->active_pattern)) {
|
|
$isActive = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
@endphp
|
|
|
|
@if ($item->sub_menu)
|
|
{{-- ITEM WITH SUBMENU --}}
|
|
<div x-data="{ expanded: {{ $isActive ? 'true' : 'false' }} }">
|
|
<button
|
|
@click="expanded = !expanded; if(collapsed) collapsed = false"
|
|
@class([
|
|
'group relative w-full flex items-center justify-between px-2 py-2.5 rounded-lg',
|
|
'text-sm font-medium transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400',
|
|
'bg-gray-100 text-gray-900' => $isActive,
|
|
'text-gray-500 hover:bg-gray-50 hover:text-gray-800' => ! $isActive,
|
|
])
|
|
aria-haspopup="true"
|
|
:aria-expanded="String(expanded)"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<x-mary-icon :name="$item->icon" class="w-4 h-4 shrink-0"/>
|
|
<span
|
|
x-cloak
|
|
x-show="!collapsed"
|
|
class="whitespace-nowrap overflow-hidden leading-none"
|
|
>
|
|
{{ $item->label }}
|
|
</span>
|
|
</div>
|
|
|
|
{{-- Chevron Arrow (Hidden when collapsed) --}}
|
|
<span x-cloak x-show="!collapsed" class="shrink-0 transition-transform duration-200"
|
|
:class="expanded ? 'rotate-90' : ''">
|
|
<x-mary-icon name="lucide.chevron-right" class="w-4 h-4"/>
|
|
</span>
|
|
|
|
{{-- Tooltip (Collapsed Mode) --}}
|
|
<span x-cloak x-show="collapsed" role="tooltip"
|
|
class="pointer-events-none absolute left-full ml-3 z-50 whitespace-nowrap rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-75">
|
|
{{ $item->label }}
|
|
<span
|
|
class="absolute right-full top-1/2 -translate-y-1/2 border-[5px] border-transparent border-r-gray-900"
|
|
aria-hidden="true"></span>
|
|
</span>
|
|
</button>
|
|
|
|
{{-- Submenu Dropdown --}}
|
|
<div x-cloak x-show="expanded && !collapsed" x-collapse>
|
|
<div class="mt-1 space-y-1 pl-9 pr-2">
|
|
@foreach ($item->sub_menu as $subItem)
|
|
@php $isSubActive = request()->routeIs($subItem->active_pattern); @endphp
|
|
@can($subItem->permission)
|
|
<a
|
|
href="{{ route($subItem->route) }}"
|
|
wire:navigate
|
|
@class([
|
|
'block px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
|
'bg-gray-100 text-blue-700' => $isSubActive,
|
|
'text-gray-500 hover:bg-gray-50 hover:text-gray-900' => ! $isSubActive,
|
|
])
|
|
>
|
|
{{ $subItem->label }}
|
|
</a>
|
|
@endcan
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
{{-- STANDARD ITEM --}}
|
|
<a
|
|
href="{{ route($item->route) }}"
|
|
wire:navigate
|
|
@class([
|
|
'group relative flex items-center gap-3 px-2 py-2.5 rounded-lg',
|
|
'text-sm font-medium transition-colors duration-150',
|
|
'bg-gray-100 text-gray-900' => $isActive,
|
|
'text-gray-500 hover:bg-gray-50 hover:text-gray-800' => ! $isActive,
|
|
])
|
|
aria-current="{{ $isActive ? 'page' : 'false' }}"
|
|
>
|
|
@if ($isActive)
|
|
<span class="absolute left-0 inset-y-2 w-0.5 rounded-r-full bg-blue-600"
|
|
aria-hidden="true"></span>
|
|
@endif
|
|
|
|
<x-mary-icon :name="$item->icon" class="w-4 h-4 shrink-0"/>
|
|
|
|
<span
|
|
x-cloak
|
|
x-show="!collapsed"
|
|
class="whitespace-nowrap overflow-hidden leading-none"
|
|
>
|
|
{{ $item->label }}
|
|
</span>
|
|
|
|
{{-- Tooltip (Collapsed Mode) --}}
|
|
<span x-cloak x-show="collapsed" role="tooltip"
|
|
class="pointer-events-none absolute left-full ml-3 z-50 whitespace-nowrap rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-75">
|
|
{{ $item->label }}
|
|
<span
|
|
class="absolute right-full top-1/2 -translate-y-1/2 border-[5px] border-transparent border-r-gray-900"
|
|
aria-hidden="true"></span>
|
|
</span>
|
|
</a>
|
|
@endif
|
|
@endforeach
|
|
</nav>
|
|
|
|
{{-- Toggle Footer --}}
|
|
<div class="border-t border-gray-100 px-2 py-3 shrink-0">
|
|
<button
|
|
wire:click="toggle"
|
|
type="button"
|
|
class="group w-full flex items-center gap-3 px-2 py-2.5 rounded-lg
|
|
text-sm font-medium text-gray-400
|
|
hover:bg-gray-50 hover:text-gray-700
|
|
transition-colors duration-150
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400"
|
|
:aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
|
|
>
|
|
<span class="shrink-0 flex items-center justify-center w-5 h-5" aria-hidden="true">
|
|
<svg :class="collapsed ? 'rotate-180' : 'rotate-0'"
|
|
class="w-4 h-4 transition-transform duration-300 ease-in-out" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
|
|
</svg>
|
|
</span>
|
|
<span x-cloak x-show="!collapsed" class="whitespace-nowrap">
|
|
Collapse
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|