fully working menu system
This commit is contained in:
@@ -1,14 +1,193 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||||
@include('partials.head')
|
@include('partials.head')
|
||||||
<body class="min-h-screen bg-white text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
|
|
||||||
<div class="wms-app-shell" data-wms-shell data-wms-mobile-shell>
|
<script>
|
||||||
|
(function () {
|
||||||
|
const SIDEBAR_STATE_KEY = 'wms-sidebar-state';
|
||||||
|
const SIDEBAR_WIDTH_KEY = 'wms-sidebar-width';
|
||||||
|
|
||||||
|
const DEFAULT_WIDTH = 288;
|
||||||
|
const MIN_WIDTH = 224;
|
||||||
|
const MAX_WIDTH = 448;
|
||||||
|
|
||||||
|
function clamp(value, min, max) {
|
||||||
|
return Math.min(Math.max(value, min), max);
|
||||||
|
}
|
||||||
|
|
||||||
|
const savedWidth = Number.parseInt(localStorage.getItem(SIDEBAR_WIDTH_KEY) || DEFAULT_WIDTH, 10);
|
||||||
|
const width = clamp(Number.isFinite(savedWidth) ? savedWidth : DEFAULT_WIDTH, MIN_WIDTH, MAX_WIDTH);
|
||||||
|
const savedState = localStorage.getItem(SIDEBAR_STATE_KEY) || 'expanded';
|
||||||
|
|
||||||
|
document.documentElement.style.setProperty('--wms-sidebar-width', `${width}px`);
|
||||||
|
document.documentElement.dataset.wmsSidebar = savedState === 'collapsed' ? 'collapsed' : 'expanded';
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<body class="min-h-screen bg-white text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--wms-sidebar-width: 288px;
|
||||||
|
--wms-sidebar-min-width: 224px;
|
||||||
|
--wms-sidebar-max-width: 448px;
|
||||||
|
--wms-sidebar-collapsed-width: 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-app-shell {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||||
|
min-height: 100vh;
|
||||||
|
transition-property: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="expanded"] .wms-app-shell {
|
||||||
|
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-app-shell {
|
||||||
|
grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar {
|
||||||
|
position: relative;
|
||||||
|
width: var(--wms-sidebar-width);
|
||||||
|
min-width: var(--wms-sidebar-width);
|
||||||
|
max-width: var(--wms-sidebar-width);
|
||||||
|
transition-property: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-main-panel {
|
||||||
|
transition-property: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
||||||
|
width: var(--wms-sidebar-collapsed-width);
|
||||||
|
min-width: var(--wms-sidebar-collapsed-width);
|
||||||
|
max-width: var(--wms-sidebar-collapsed-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-resizer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -4px;
|
||||||
|
z-index: 30;
|
||||||
|
width: 8px;
|
||||||
|
height: 100%;
|
||||||
|
cursor: col-resize;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-resizer::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 3px;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
content: "";
|
||||||
|
background: rgba(148, 163, 184, 0.22);
|
||||||
|
transition: background 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-resizer:hover::after,
|
||||||
|
body.wms-sidebar-is-resizing .wms-sidebar-resizer::after {
|
||||||
|
background: rgba(59, 130, 246, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.wms-sidebar-is-resizing {
|
||||||
|
cursor: col-resize;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-resizer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-heading-button {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-heading-chevron {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
opacity: 0.65;
|
||||||
|
transition: transform 160ms ease, opacity 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-group[data-wms-menu-open="true"] .wms-sidebar-heading-chevron {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-group-items {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-group[data-wms-menu-open="true"] .wms-sidebar-group-items {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-chevron,
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.wms-app-shell {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar,
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
||||||
|
width: min(88vw, 22rem);
|
||||||
|
min-width: min(88vw, 22rem);
|
||||||
|
max-width: min(88vw, 22rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wms-sidebar-resizer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-chevron,
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-menu-open="true"] .wms-sidebar-group-items {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="wms-app-shell" data-wms-shell data-wms-mobile-shell>
|
||||||
<button type="button" class="wms-mobile-overlay" data-wms-mobile-close aria-label="{{ __('Close navigation menu') }}"></button>
|
<button type="button" class="wms-mobile-overlay" data-wms-mobile-close aria-label="{{ __('Close navigation menu') }}"></button>
|
||||||
|
|
||||||
<aside id="wms-main-sidebar" class="wms-sidebar" data-wms-sidebar aria-label="{{ __('Main navigation') }}">
|
<aside id="wms-main-sidebar" class="wms-sidebar" data-wms-sidebar aria-label="{{ __('Main navigation') }}">
|
||||||
<div class="wms-sidebar-header">
|
<div class="wms-sidebar-header">
|
||||||
<a href="{{ auth()->user()?->isMpbaPlatformAdmin() && Route::has('platform.dashboard') ? route('platform.dashboard') : route('dashboard') }}" wire:navigate class="wms-brand" aria-label="{{ __('Warehouse Management System') }}">
|
<a href="{{ auth()->user()?->isMpbaPlatformAdmin() && Route::has('platform.dashboard') ? route('platform.dashboard') : route('dashboard') }}" wire:navigate class="wms-brand" aria-label="{{ __('Warehouse Management System') }}">
|
||||||
<span class="wms-brand-mark" data-wms-brand-toggle title="{{ __('Expand sidebar') }}"><span class="wms-brand-mark-inner">W</span></span>
|
<span class="wms-brand-mark" data-wms-brand-toggle title="{{ __('Expand sidebar') }}">
|
||||||
|
<span class="wms-brand-mark-inner">W</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
<span class="wms-brand-copy" data-wms-sidebar-label>
|
<span class="wms-brand-copy" data-wms-sidebar-label>
|
||||||
<span class="wms-brand-title">{{ __('Warehouse Management System') }}</span>
|
<span class="wms-brand-title">{{ __('Warehouse Management System') }}</span>
|
||||||
<span class="wms-brand-subtitle">MPBA</span>
|
<span class="wms-brand-subtitle">MPBA</span>
|
||||||
@@ -23,9 +202,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="wms-sidebar-nav" aria-label="{{ __('Main navigation') }}">
|
<nav class="wms-sidebar-nav" aria-label="{{ __('Main navigation') }}">
|
||||||
<div class="wms-sidebar-group">
|
<div class="wms-sidebar-group" data-wms-menu-group="platform">
|
||||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Platform') }}</div>
|
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="true">
|
||||||
|
<span>{{ __('Platform') }}</span>
|
||||||
|
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="wms-sidebar-group-items" data-wms-menu-items>
|
||||||
@if(auth()->user()?->isMpbaPlatformAdmin() && Route::has('platform.dashboard'))
|
@if(auth()->user()?->isMpbaPlatformAdmin() && Route::has('platform.dashboard'))
|
||||||
<a href="{{ route('platform.dashboard') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.dashboard')) is-active @endif" title="{{ __('Platform') }}">
|
<a href="{{ route('platform.dashboard') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.dashboard')) is-active @endif" title="{{ __('Platform') }}">
|
||||||
<i class="fa-solid fa-screwdriver-wrench wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-screwdriver-wrench wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -37,43 +220,51 @@
|
|||||||
<span data-wms-sidebar-label>{{ __('Dashboard') }}</span>
|
<span data-wms-sidebar-label>{{ __('Dashboard') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="wms-sidebar-group">
|
<div class="wms-sidebar-group" data-wms-menu-group="operations">
|
||||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Operations') }}</div>
|
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
|
||||||
|
<span>{{ __('Operations') }}</span>
|
||||||
|
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="wms-sidebar-group-items" data-wms-menu-items>
|
||||||
@if(Route::has('analytics.index'))
|
@if(Route::has('analytics.index'))
|
||||||
<a href="{{ route('analytics.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('analytics.*')) is-active @endif" title="{{ __('Analytics') }}">
|
<a href="{{ route('analytics.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('analytics.*')) is-active @endif" title="{{ __('Analytics') }}">
|
||||||
<i class="fa-solid fa-chart-line wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-chart-line wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Analytics') }}</span>
|
<span data-wms-sidebar-label>{{ __('Analytics') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('inventory-management.index'))
|
@if(Route::has('inventory-management.index'))
|
||||||
<a href="{{ route('inventory-management.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('inventory-management.*')) is-active @endif" title="{{ __('Inventory') }}">
|
<a href="{{ route('inventory-management.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('inventory-management.*')) is-active @endif" title="{{ __('Inventory') }}">
|
||||||
<i class="fa-solid fa-boxes-stacked wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-boxes-stacked wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Inventory') }}</span>
|
<span data-wms-sidebar-label>{{ __('Inventory') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('replenishment.index'))
|
@if(Route::has('replenishment.index'))
|
||||||
<a href="{{ route('replenishment.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('replenishment.*')) is-active @endif" title="{{ __('Replenishment') }}">
|
<a href="{{ route('replenishment.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('replenishment.*')) is-active @endif" title="{{ __('Replenishment') }}">
|
||||||
<i class="fa-solid fa-arrows-rotate wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-arrows-rotate wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Replenishment') }}</span>
|
<span data-wms-sidebar-label>{{ __('Replenishment') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('shipping.index'))
|
@if(Route::has('shipping.index'))
|
||||||
<a href="{{ route('shipping.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('shipping.*')) is-active @endif" title="{{ __('Shipping') }}">
|
<a href="{{ route('shipping.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('shipping.*')) is-active @endif" title="{{ __('Shipping') }}">
|
||||||
<i class="fa-solid fa-truck-fast wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-truck-fast wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Shipping') }}</span>
|
<span data-wms-sidebar-label>{{ __('Shipping') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('transportation.index'))
|
@if(Route::has('transportation.index'))
|
||||||
<a href="{{ route('transportation.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('transportation.*')) is-active @endif" title="{{ __('Transportation') }}">
|
<a href="{{ route('transportation.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('transportation.*')) is-active @endif" title="{{ __('Transportation') }}">
|
||||||
<i class="fa-solid fa-truck-ramp-box wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-truck-ramp-box wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Transportation') }}</span>
|
<span data-wms-sidebar-label>{{ __('Transportation') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('carrier-management.index'))
|
@if(Route::has('carrier-management.index'))
|
||||||
<a href="{{ route('carrier-management.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('carrier-management.*')) is-active @endif" title="{{ __('Carriers') }}">
|
<a href="{{ route('carrier-management.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('carrier-management.*')) is-active @endif" title="{{ __('Carriers') }}">
|
||||||
<i class="fa-solid fa-route wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-route wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -81,8 +272,8 @@
|
|||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{-- Support Portal--}}
|
|
||||||
@php
|
@php
|
||||||
$helpdeskEnabled = Route::has('helpdesk.index') || Route::has('helpdesk.tickets.index');
|
$helpdeskEnabled = Route::has('helpdesk.index') || Route::has('helpdesk.tickets.index');
|
||||||
|
|
||||||
@@ -101,15 +292,22 @@
|
|||||||
$helpdeskWorkflowRoute = Route::has('helpdesk.workflow-templates.index')
|
$helpdeskWorkflowRoute = Route::has('helpdesk.workflow-templates.index')
|
||||||
? 'helpdesk.workflow-templates.index'
|
? 'helpdesk.workflow-templates.index'
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
$documentationEnabled = Route::has('documentation.index') || Route::has('documentation.documents.index');
|
$documentationEnabled = Route::has('documentation.index') || Route::has('documentation.documents.index');
|
||||||
$documentationRoute = Route::has('documentation.index') ? 'documentation.index'
|
|
||||||
|
$documentationRoute = Route::has('documentation.index')
|
||||||
|
? 'documentation.index'
|
||||||
: (Route::has('documentation.documents.index') ? 'documentation.documents.index' : null);
|
: (Route::has('documentation.documents.index') ? 'documentation.documents.index' : null);
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
@if($helpdeskEnabled || $documentationEnabled)
|
@if($helpdeskEnabled || $documentationEnabled)
|
||||||
<div class="wms-sidebar-group">
|
<div class="wms-sidebar-group" data-wms-menu-group="support">
|
||||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Support') }}</div>
|
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
|
||||||
|
<span>{{ __('Support') }}</span>
|
||||||
|
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="wms-sidebar-group-items" data-wms-menu-items>
|
||||||
@if(Route::has('helpdesk.index'))
|
@if(Route::has('helpdesk.index'))
|
||||||
<a href="{{ route('helpdesk.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('helpdesk.index')) is-active @endif" title="{{ __('Helpdesk Dashboard') }}">
|
<a href="{{ route('helpdesk.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('helpdesk.index')) is-active @endif" title="{{ __('Helpdesk Dashboard') }}">
|
||||||
<i class="fa-solid fa-headset wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-headset wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -151,12 +349,14 @@
|
|||||||
<span data-wms-sidebar-label>{{ __('Workflow Emails') }}</span>
|
<span data-wms-sidebar-label>{{ __('Workflow Emails') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if($documentationRoute)
|
@if($documentationRoute)
|
||||||
<a href="{{ route($documentationRoute) }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('documentation.*')) is-active @endif" title="{{ __('Documentation') }}">
|
<a href="{{ route($documentationRoute) }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('documentation.*')) is-active @endif" title="{{ __('Documentation') }}">
|
||||||
<i class="fa-solid fa-book-open wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-book-open wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Documentation') }}</span>
|
<span data-wms-sidebar-label>{{ __('Documentation') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if($helpdeskSettingsRoute)
|
@if($helpdeskSettingsRoute)
|
||||||
<a href="{{ route($helpdeskSettingsRoute) }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('helpdesk.settings*')) is-active @endif" title="{{ __('Helpdesk Settings') }}">
|
<a href="{{ route($helpdeskSettingsRoute) }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('helpdesk.settings*')) is-active @endif" title="{{ __('Helpdesk Settings') }}">
|
||||||
<i class="fa-solid fa-gears wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-gears wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -164,29 +364,37 @@
|
|||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
@endif
|
@endif
|
||||||
{{-- Support Portal end --}}
|
|
||||||
<div class="wms-sidebar-group">
|
|
||||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Integration & Reporting') }}</div>
|
|
||||||
|
|
||||||
|
<div class="wms-sidebar-group" data-wms-menu-group="integration-reporting">
|
||||||
|
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
|
||||||
|
<span>{{ __('Integration & Reporting') }}</span>
|
||||||
|
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="wms-sidebar-group-items" data-wms-menu-items>
|
||||||
@if(Route::has('m3-integration.index'))
|
@if(Route::has('m3-integration.index'))
|
||||||
<a href="{{ route('m3-integration.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('m3-integration.*')) is-active @endif" title="{{ __('M3 Integration') }}">
|
<a href="{{ route('m3-integration.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('m3-integration.*')) is-active @endif" title="{{ __('M3 Integration') }}">
|
||||||
<i class="fa-solid fa-plug-circle-bolt wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-plug-circle-bolt wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('M3 Integration') }}</span>
|
<span data-wms-sidebar-label>{{ __('M3 Integration') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('sentinel-integration.index'))
|
@if(Route::has('sentinel-integration.index'))
|
||||||
<a href="{{ route('sentinel-integration.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('sentinel-integration.*')) is-active @endif" title="{{ __('Sentinel') }}">
|
<a href="{{ route('sentinel-integration.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('sentinel-integration.*')) is-active @endif" title="{{ __('Sentinel') }}">
|
||||||
<i class="fa-solid fa-satellite-dish wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-satellite-dish wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Sentinel') }}</span>
|
<span data-wms-sidebar-label>{{ __('Sentinel') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('document-archive.index'))
|
@if(Route::has('document-archive.index'))
|
||||||
<a href="{{ route('document-archive.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('document-archive.*')) is-active @endif" title="{{ __('Documents') }}">
|
<a href="{{ route('document-archive.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('document-archive.*')) is-active @endif" title="{{ __('Documents') }}">
|
||||||
<i class="fa-solid fa-box-archive wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-box-archive wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Documents') }}</span>
|
<span data-wms-sidebar-label>{{ __('Documents') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('reporting.index'))
|
@if(Route::has('reporting.index'))
|
||||||
<a href="{{ route('reporting.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('reporting.*')) is-active @endif" title="{{ __('Reporting') }}">
|
<a href="{{ route('reporting.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('reporting.*')) is-active @endif" title="{{ __('Reporting') }}">
|
||||||
<i class="fa-solid fa-file-lines wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-file-lines wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -194,16 +402,22 @@
|
|||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="wms-sidebar-group">
|
<div class="wms-sidebar-group" data-wms-menu-group="administration">
|
||||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Administration') }}</div>
|
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
|
||||||
|
<span>{{ __('Administration') }}</span>
|
||||||
|
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="wms-sidebar-group-items" data-wms-menu-items>
|
||||||
@if(Route::has('warehouses.index'))
|
@if(Route::has('warehouses.index'))
|
||||||
<a href="{{ route('warehouses.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('warehouses.*')) is-active @endif" title="{{ __('Warehouses') }}">
|
<a href="{{ route('warehouses.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('warehouses.*')) is-active @endif" title="{{ __('Warehouses') }}">
|
||||||
<i class="fa-solid fa-warehouse wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-warehouse wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Warehouses') }}</span>
|
<span data-wms-sidebar-label>{{ __('Warehouses') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('warehouse-rules.index'))
|
@if(Route::has('warehouse-rules.index'))
|
||||||
<a href="{{ route('warehouse-rules.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('warehouse-rules.*')) is-active @endif" title="{{ __('Validation Rules') }}">
|
<a href="{{ route('warehouse-rules.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('warehouse-rules.*')) is-active @endif" title="{{ __('Validation Rules') }}">
|
||||||
<i class="fa-solid fa-shield-halved wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-shield-halved wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -217,18 +431,21 @@
|
|||||||
<span data-wms-sidebar-label>{{ __('Prices') }}</span>
|
<span data-wms-sidebar-label>{{ __('Prices') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('configuration.index'))
|
@if(Route::has('configuration.index'))
|
||||||
<a href="{{ route('configuration.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('configuration.*')) is-active @endif" title="{{ __('Configuration') }}">
|
<a href="{{ route('configuration.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('configuration.*')) is-active @endif" title="{{ __('Configuration') }}">
|
||||||
<i class="fa-solid fa-sliders wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-sliders wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Configuration') }}</span>
|
<span data-wms-sidebar-label>{{ __('Configuration') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('security.index'))
|
@if(Route::has('security.index'))
|
||||||
<a href="{{ route('security.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('security.*')) is-active @endif" title="{{ __('Security') }}">
|
<a href="{{ route('security.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('security.*')) is-active @endif" title="{{ __('Security') }}">
|
||||||
<i class="fa-solid fa-user-shield wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-user-shield wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Security') }}</span>
|
<span data-wms-sidebar-label>{{ __('Security') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('audit.index'))
|
@if(Route::has('audit.index'))
|
||||||
<a href="{{ route('audit.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('audit.*')) is-active @endif" title="{{ __('Audit') }}">
|
<a href="{{ route('audit.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('audit.*')) is-active @endif" title="{{ __('Audit') }}">
|
||||||
<i class="fa-solid fa-clipboard-check wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-clipboard-check wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -236,29 +453,37 @@
|
|||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@if(auth()->user()?->isMpbaPlatformAdmin())
|
@if(auth()->user()?->isMpbaPlatformAdmin())
|
||||||
<div class="wms-sidebar-group">
|
<div class="wms-sidebar-group" data-wms-menu-group="platform-administration">
|
||||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Platform Administration') }}</div>
|
<button type="button" class="wms-sidebar-heading wms-sidebar-heading-button" data-wms-menu-toggle data-wms-sidebar-label aria-expanded="false">
|
||||||
|
<span>{{ __('Platform Administration') }}</span>
|
||||||
|
<i class="fa-solid fa-chevron-down wms-sidebar-heading-chevron" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="wms-sidebar-group-items" data-wms-menu-items>
|
||||||
@if(Route::has('platform.companies.index'))
|
@if(Route::has('platform.companies.index'))
|
||||||
<a href="{{ route('platform.companies.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.companies.*')) is-active @endif" title="{{ __('Companies') }}">
|
<a href="{{ route('platform.companies.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.companies.*')) is-active @endif" title="{{ __('Companies') }}">
|
||||||
<i class="fa-solid fa-building wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-building wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Companies') }}</span>
|
<span data-wms-sidebar-label>{{ __('Companies') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('platform.licenses.index'))
|
@if(Route::has('platform.licenses.index'))
|
||||||
<a href="{{ route('platform.licenses.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.licenses.*')) is-active @endif" title="{{ __('Licences') }}">
|
<a href="{{ route('platform.licenses.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.licenses.*')) is-active @endif" title="{{ __('Licences') }}">
|
||||||
<i class="fa-solid fa-key wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-key wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Licences') }}</span>
|
<span data-wms-sidebar-label>{{ __('Licences') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('platform.payments.index'))
|
@if(Route::has('platform.payments.index'))
|
||||||
<a href="{{ route('platform.payments.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.payments.*')) is-active @endif" title="{{ __('Payments') }}">
|
<a href="{{ route('platform.payments.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.payments.*')) is-active @endif" title="{{ __('Payments') }}">
|
||||||
<i class="fa-solid fa-credit-card wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-credit-card wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
<span data-wms-sidebar-label>{{ __('Payments') }}</span>
|
<span data-wms-sidebar-label>{{ __('Payments') }}</span>
|
||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(Route::has('countries.index'))
|
@if(Route::has('countries.index'))
|
||||||
<a href="{{ route('countries.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('countries.*')) is-active @endif" title="{{ __('Countries') }}">
|
<a href="{{ route('countries.index') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('countries.*')) is-active @endif" title="{{ __('Countries') }}">
|
||||||
<i class="fa-solid fa-globe wms-sidebar-icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-globe wms-sidebar-icon" aria-hidden="true"></i>
|
||||||
@@ -266,6 +491,7 @@
|
|||||||
</a>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -273,10 +499,12 @@
|
|||||||
<flux:dropdown position="top" align="start">
|
<flux:dropdown position="top" align="start">
|
||||||
<button type="button" class="wms-user-card wms-user-card-button" data-wms-sidebar-label>
|
<button type="button" class="wms-user-card wms-user-card-button" data-wms-sidebar-label>
|
||||||
<div class="wms-user-avatar">{{ auth()->user()?->initials() ?? 'U' }}</div>
|
<div class="wms-user-avatar">{{ auth()->user()?->initials() ?? 'U' }}</div>
|
||||||
|
|
||||||
<div class="wms-user-copy">
|
<div class="wms-user-copy">
|
||||||
<div class="wms-user-name">{{ auth()->user()?->name ?? __('User') }}</div>
|
<div class="wms-user-name">{{ auth()->user()?->name ?? __('User') }}</div>
|
||||||
<div class="wms-user-email">{{ auth()->user()?->email ?? '' }}</div>
|
<div class="wms-user-email">{{ auth()->user()?->email ?? '' }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<i class="fa-solid fa-chevron-up wms-user-chevron" aria-hidden="true"></i>
|
<i class="fa-solid fa-chevron-up wms-user-chevron" aria-hidden="true"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@@ -285,6 +513,7 @@
|
|||||||
<div class="p-0 text-sm font-normal">
|
<div class="p-0 text-sm font-normal">
|
||||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||||
<flux:avatar :name="auth()->user()?->name ?? 'User'" :initials="auth()->user()?->initials() ?? 'U'" />
|
<flux:avatar :name="auth()->user()?->name ?? 'User'" :initials="auth()->user()?->initials() ?? 'U'" />
|
||||||
|
|
||||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||||
<flux:heading class="truncate">{{ auth()->user()?->name ?? __('User') }}</flux:heading>
|
<flux:heading class="truncate">{{ auth()->user()?->name ?? __('User') }}</flux:heading>
|
||||||
<flux:text class="truncate">{{ auth()->user()?->email ?? '' }}</flux:text>
|
<flux:text class="truncate">{{ auth()->user()?->email ?? '' }}</flux:text>
|
||||||
@@ -292,28 +521,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</flux:menu.radio.group>
|
</flux:menu.radio.group>
|
||||||
|
|
||||||
<flux:menu.separator />
|
<flux:menu.separator />
|
||||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
|
|
||||||
|
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||||
|
{{ __('Settings') }}
|
||||||
|
</flux:menu.item>
|
||||||
|
|
||||||
<flux:menu.separator />
|
<flux:menu.separator />
|
||||||
|
|
||||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||||
@csrf
|
@csrf
|
||||||
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full cursor-pointer" data-test="logout-button">{{ __('Log out') }}</flux:menu.item>
|
|
||||||
|
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full cursor-pointer" data-test="logout-button">
|
||||||
|
{{ __('Log out') }}
|
||||||
|
</flux:menu.item>
|
||||||
</form>
|
</form>
|
||||||
</flux:menu>
|
</flux:menu>
|
||||||
</flux:dropdown>
|
</flux:dropdown>
|
||||||
|
|
||||||
<flux:dropdown position="top" align="start">
|
<flux:dropdown position="top" align="start">
|
||||||
<button type="button" class="wms-user-rail-button" title="{{ __('Account') }}">{{ auth()->user()?->initials() ?? 'U' }}</button>
|
<button type="button" class="wms-user-rail-button" title="{{ __('Account') }}">
|
||||||
|
{{ auth()->user()?->initials() ?? 'U' }}
|
||||||
|
</button>
|
||||||
|
|
||||||
<flux:menu>
|
<flux:menu>
|
||||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
|
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||||
|
{{ __('Settings') }}
|
||||||
|
</flux:menu.item>
|
||||||
|
|
||||||
<flux:menu.separator />
|
<flux:menu.separator />
|
||||||
|
|
||||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||||
@csrf
|
@csrf
|
||||||
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full cursor-pointer">{{ __('Log out') }}</flux:menu.item>
|
|
||||||
|
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full cursor-pointer">
|
||||||
|
{{ __('Log out') }}
|
||||||
|
</flux:menu.item>
|
||||||
</form>
|
</form>
|
||||||
</flux:menu>
|
</flux:menu>
|
||||||
</flux:dropdown>
|
</flux:dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="wms-sidebar-resizer"
|
||||||
|
data-wms-sidebar-resizer
|
||||||
|
aria-label="{{ __('Resize sidebar') }}"
|
||||||
|
title="{{ __('Drag to resize sidebar') }}"
|
||||||
|
></button>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<div class="wms-main-panel">
|
<div class="wms-main-panel">
|
||||||
@@ -333,29 +589,197 @@
|
|||||||
{{ $slot }}
|
{{ $slot }}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@persist('toast')
|
@persist('toast')
|
||||||
<flux:toast.group><flux:toast /></flux:toast.group>
|
<flux:toast.group>
|
||||||
@endpersist
|
<flux:toast />
|
||||||
|
</flux:toast.group>
|
||||||
|
@endpersist
|
||||||
|
|
||||||
@fluxScripts
|
@fluxScripts
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
const STORAGE_KEY = 'wms-sidebar-state';
|
const SIDEBAR_STATE_KEY = 'wms-sidebar-state';
|
||||||
|
const SIDEBAR_WIDTH_KEY = 'wms-sidebar-width';
|
||||||
|
|
||||||
|
const DEFAULT_WIDTH = 288;
|
||||||
|
const MIN_WIDTH = 224;
|
||||||
|
const MAX_WIDTH = 448;
|
||||||
|
|
||||||
|
function clamp(value, min, max) {
|
||||||
|
return Math.min(Math.max(value, min), max);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSavedSidebarWidth() {
|
||||||
|
const savedWidth = Number.parseInt(localStorage.getItem(SIDEBAR_WIDTH_KEY) || DEFAULT_WIDTH, 10);
|
||||||
|
|
||||||
|
return clamp(Number.isFinite(savedWidth) ? savedWidth : DEFAULT_WIDTH, MIN_WIDTH, MAX_WIDTH);
|
||||||
|
}
|
||||||
|
|
||||||
|
function applySidebarWidth() {
|
||||||
|
const nextWidth = `${getSavedSidebarWidth()}px`;
|
||||||
|
|
||||||
|
document.documentElement.style.setProperty('--wms-sidebar-width', nextWidth);
|
||||||
|
}
|
||||||
|
|
||||||
function applySidebarState() {
|
function applySidebarState() {
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
const saved = localStorage.getItem(STORAGE_KEY) || 'expanded';
|
const saved = localStorage.getItem(SIDEBAR_STATE_KEY) || 'expanded';
|
||||||
|
|
||||||
root.dataset.wmsSidebar = saved === 'collapsed' ? 'collapsed' : 'expanded';
|
root.dataset.wmsSidebar = saved === 'collapsed' ? 'collapsed' : 'expanded';
|
||||||
|
|
||||||
document.querySelectorAll('[data-wms-sidebar-toggle]').forEach((button) => {
|
document.querySelectorAll('[data-wms-sidebar-toggle]').forEach((button) => {
|
||||||
const expanded = root.dataset.wmsSidebar !== 'collapsed';
|
const expanded = root.dataset.wmsSidebar !== 'collapsed';
|
||||||
|
|
||||||
button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
|
button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
|
||||||
button.setAttribute('aria-label', expanded ? '{{ __('Collapse sidebar') }}' : '{{ __('Expand sidebar') }}');
|
button.setAttribute('aria-label', expanded ? '{{ __('Collapse sidebar') }}' : '{{ __('Expand sidebar') }}');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setMenuGroupOpen(group, isOpen) {
|
||||||
|
group.dataset.wmsMenuOpen = isOpen ? 'true' : 'false';
|
||||||
|
|
||||||
|
const toggle = group.querySelector('[data-wms-menu-toggle]');
|
||||||
|
|
||||||
|
if (toggle) {
|
||||||
|
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeOtherNonPlatformMenus(currentGroup) {
|
||||||
|
document.querySelectorAll('[data-wms-menu-group]').forEach((group) => {
|
||||||
|
const key = group.dataset.wmsMenuGroup;
|
||||||
|
|
||||||
|
if (key === 'platform') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (group === currentGroup) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setMenuGroupOpen(group, false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyMenuState() {
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-wms-menu-group]').forEach((group) => {
|
||||||
|
const key = group.dataset.wmsMenuGroup;
|
||||||
|
const hasActiveLink = group.querySelector('.wms-sidebar-link.is-active') !== null;
|
||||||
|
/*
|
||||||
|
* Platform is always expanded.
|
||||||
|
* Any group containing the currently selected menu entry remains expanded.
|
||||||
|
* All other groups stay collapsed by default.
|
||||||
|
*/
|
||||||
|
setMenuGroupOpen(group, key === 'platform' || hasActiveLink);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindMenuControls() {
|
||||||
|
document.querySelectorAll('[data-wms-menu-toggle]').forEach((button) => {
|
||||||
|
if (button.dataset.wmsBound === '1') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.dataset.wmsBound = '1';
|
||||||
|
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
const group = button.closest('[data-wms-menu-group]');
|
||||||
|
|
||||||
|
if (!group) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const key = group.dataset.wmsMenuGroup;
|
||||||
|
const nextOpen = group.dataset.wmsMenuOpen !== 'true';
|
||||||
|
|
||||||
|
if (key !== 'platform' && nextOpen) {
|
||||||
|
closeOtherNonPlatformMenus(group);
|
||||||
|
}
|
||||||
|
|
||||||
|
setMenuGroupOpen(group, nextOpen);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindSidebarResize() {
|
||||||
|
document.querySelectorAll('[data-wms-sidebar-resizer]').forEach((handle) => {
|
||||||
|
if (handle.dataset.wmsBound === '1') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle.dataset.wmsBound = '1';
|
||||||
|
|
||||||
|
let startX = 0;
|
||||||
|
let startWidth = DEFAULT_WIDTH;
|
||||||
|
let isResizing = false;
|
||||||
|
|
||||||
|
function getClientX(event) {
|
||||||
|
if (event.touches && event.touches.length > 0) {
|
||||||
|
return event.touches[0].clientX;
|
||||||
|
}
|
||||||
|
|
||||||
|
return event.clientX;
|
||||||
|
}
|
||||||
|
|
||||||
|
function startResize(event) {
|
||||||
|
if (document.documentElement.dataset.wmsSidebar === 'collapsed') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isResizing = true;
|
||||||
|
startX = getClientX(event);
|
||||||
|
|
||||||
|
const currentWidth = Number.parseInt(
|
||||||
|
getComputedStyle(document.documentElement).getPropertyValue('--wms-sidebar-width'),
|
||||||
|
10
|
||||||
|
);
|
||||||
|
|
||||||
|
startWidth = Number.isFinite(currentWidth) ? currentWidth : DEFAULT_WIDTH;
|
||||||
|
|
||||||
|
document.body.classList.add('wms-sidebar-is-resizing');
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveResize(event) {
|
||||||
|
if (!isResizing) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const delta = getClientX(event) - startX;
|
||||||
|
const nextWidth = clamp(startWidth + delta, MIN_WIDTH, MAX_WIDTH);
|
||||||
|
|
||||||
|
document.documentElement.style.setProperty('--wms-sidebar-width', `${nextWidth}px`);
|
||||||
|
localStorage.setItem(SIDEBAR_WIDTH_KEY, String(nextWidth));
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopResize() {
|
||||||
|
if (!isResizing) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isResizing = false;
|
||||||
|
document.body.classList.remove('wms-sidebar-is-resizing');
|
||||||
|
}
|
||||||
|
|
||||||
|
handle.addEventListener('mousedown', startResize);
|
||||||
|
handle.addEventListener('touchstart', startResize, { passive: false });
|
||||||
|
|
||||||
|
window.addEventListener('mousemove', moveResize);
|
||||||
|
window.addEventListener('touchmove', moveResize, { passive: false });
|
||||||
|
|
||||||
|
window.addEventListener('mouseup', stopResize);
|
||||||
|
window.addEventListener('touchend', stopResize);
|
||||||
|
window.addEventListener('touchcancel', stopResize);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function setMobileToggleState(isOpen) {
|
function setMobileToggleState(isOpen) {
|
||||||
document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => {
|
document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => {
|
||||||
button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||||
@@ -384,55 +808,99 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function bindSidebarControls() {
|
function bindSidebarControls() {
|
||||||
|
applySidebarWidth();
|
||||||
applySidebarState();
|
applySidebarState();
|
||||||
|
applyMenuState();
|
||||||
|
bindMenuControls();
|
||||||
|
bindSidebarResize();
|
||||||
|
|
||||||
document.querySelectorAll('[data-wms-sidebar-toggle]').forEach((button) => {
|
document.querySelectorAll('[data-wms-sidebar-toggle]').forEach((button) => {
|
||||||
if (button.dataset.wmsBound === '1') return;
|
if (button.dataset.wmsBound === '1') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
button.dataset.wmsBound = '1';
|
button.dataset.wmsBound = '1';
|
||||||
|
|
||||||
button.addEventListener('click', function () {
|
button.addEventListener('click', function () {
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
const next = root.dataset.wmsSidebar === 'collapsed' ? 'expanded' : 'collapsed';
|
const next = root.dataset.wmsSidebar === 'collapsed' ? 'expanded' : 'collapsed';
|
||||||
|
|
||||||
root.dataset.wmsSidebar = next;
|
root.dataset.wmsSidebar = next;
|
||||||
localStorage.setItem(STORAGE_KEY, next);
|
localStorage.setItem(SIDEBAR_STATE_KEY, next);
|
||||||
|
|
||||||
applySidebarState();
|
applySidebarState();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('[data-wms-brand-toggle]').forEach((button) => {
|
document.querySelectorAll('[data-wms-brand-toggle]').forEach((button) => {
|
||||||
if (button.dataset.wmsBound === '1') return;
|
if (button.dataset.wmsBound === '1') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
button.dataset.wmsBound = '1';
|
button.dataset.wmsBound = '1';
|
||||||
|
|
||||||
button.addEventListener('click', function (event) {
|
button.addEventListener('click', function (event) {
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
if (root.dataset.wmsSidebar !== 'collapsed') return;
|
|
||||||
|
if (root.dataset.wmsSidebar !== 'collapsed') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
root.dataset.wmsSidebar = 'expanded';
|
root.dataset.wmsSidebar = 'expanded';
|
||||||
localStorage.setItem(STORAGE_KEY, 'expanded');
|
localStorage.setItem(SIDEBAR_STATE_KEY, 'expanded');
|
||||||
|
|
||||||
applySidebarState();
|
applySidebarState();
|
||||||
|
applyMenuState();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
|
|
||||||
document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => {
|
document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => {
|
||||||
if (button.dataset.wmsBound === '1') return;
|
if (button.dataset.wmsBound === '1') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
button.dataset.wmsBound = '1';
|
button.dataset.wmsBound = '1';
|
||||||
|
|
||||||
button.addEventListener('click', function (event) {
|
button.addEventListener('click', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
toggleMobileSidebar();
|
toggleMobileSidebar();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('[data-wms-mobile-close]').forEach((button) => {
|
document.querySelectorAll('[data-wms-mobile-close]').forEach((button) => {
|
||||||
if (button.dataset.wmsBound === '1') return;
|
if (button.dataset.wmsBound === '1') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
button.dataset.wmsBound = '1';
|
button.dataset.wmsBound = '1';
|
||||||
button.addEventListener('click', closeMobileSidebar);
|
button.addEventListener('click', closeMobileSidebar);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.wms-sidebar-link[wire\\:navigate]').forEach((link) => {
|
document.querySelectorAll('.wms-sidebar-link[wire\\:navigate]').forEach((link) => {
|
||||||
if (link.dataset.wmsMobileBound === '1') return;
|
if (link.dataset.wmsMobileBound === '1') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
link.dataset.wmsMobileBound = '1';
|
link.dataset.wmsMobileBound = '1';
|
||||||
link.addEventListener('click', closeMobileSidebar);
|
|
||||||
|
link.addEventListener('click', function () {
|
||||||
|
applySidebarWidth();
|
||||||
|
closeMobileSidebar();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
applySidebarWidth();
|
||||||
|
applySidebarState();
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', bindSidebarControls);
|
document.addEventListener('DOMContentLoaded', bindSidebarControls);
|
||||||
document.addEventListener('livewire:navigated', bindSidebarControls);
|
document.addEventListener('livewire:navigated', bindSidebarControls);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user