now favicons and fontawsoem support
This commit is contained in:
Mark Gregory
@@ -3,120 +3,175 @@
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:sidebar sticky collapsible="mobile" class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.header>
|
||||
<x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
|
||||
<flux:sidebar.collapse class="lg:hidden" />
|
||||
</flux:sidebar.header>
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.group :heading="__('Operations')" class="grid">
|
||||
<flux:sidebar.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:sidebar.item>
|
||||
<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>
|
||||
<div class="wms-mobile-overlay" data-wms-mobile-close></div>
|
||||
|
||||
<flux:sidebar.item icon="building-storefront" :href="route('warehouses.index')" :current="request()->routeIs('warehouses.*')" wire:navigate>
|
||||
{{ __('Warehouses') }}
|
||||
</flux:sidebar.item>
|
||||
<aside class="wms-sidebar" data-wms-sidebar aria-label="{{ __('Main navigation') }}">
|
||||
<div class="wms-sidebar-header">
|
||||
<a href="{{ route('dashboard') }}" wire:navigate class="wms-brand" aria-label="{{ __('Warehouse Management System') }}">
|
||||
<span class="wms-brand-mark">
|
||||
<span class="wms-brand-mark-inner">W</span>
|
||||
</span>
|
||||
|
||||
<flux:sidebar.item icon="shield-check" :href="route('warehouse-rules.index')" :current="request()->routeIs('warehouse-rules.*')" wire:navigate>
|
||||
{{ __('Validation Rules') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.group>
|
||||
<span class="wms-brand-copy" data-wms-sidebar-label>
|
||||
<span class="wms-brand-title">{{ __('Warehouse Management System') }}</span>
|
||||
<span class="wms-brand-subtitle">MPBA</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@if(auth()->user()?->isMpbaPlatformAdmin())
|
||||
<flux:sidebar.group :heading="__('Administration')" class="grid">
|
||||
<flux:sidebar.item icon="squares-2x2" :href="route('platform.dashboard')" :current="request()->routeIs('platform.dashboard')" wire:navigate>
|
||||
{{ __('Admin Dashboard') }}
|
||||
</flux:sidebar.item>
|
||||
<button
|
||||
type="button"
|
||||
class="wms-sidebar-toggle"
|
||||
data-wms-sidebar-toggle
|
||||
aria-label="{{ __('Collapse sidebar') }}"
|
||||
aria-expanded="true"
|
||||
>
|
||||
<span class="wms-toggle-expanded">‹</span>
|
||||
<span class="wms-toggle-collapsed">›</span>
|
||||
</button>
|
||||
|
||||
<flux:sidebar.item icon="building-office-2" :href="route('platform.companies.index')" :current="request()->routeIs('platform.companies.*')" wire:navigate>
|
||||
{{ __('Companies') }}
|
||||
</flux:sidebar.item>
|
||||
<button
|
||||
type="button"
|
||||
class="wms-mobile-close"
|
||||
data-wms-mobile-close
|
||||
aria-label="{{ __('Close navigation') }}"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<flux:sidebar.item icon="key" :href="route('platform.licenses.index')" :current="request()->routeIs('platform.licenses.*')" wire:navigate>
|
||||
{{ __('Licences') }}
|
||||
</flux:sidebar.item>
|
||||
<nav class="wms-sidebar-nav" aria-label="{{ __('Operations') }}">
|
||||
<div class="wms-sidebar-group">
|
||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Operations') }}</div>
|
||||
|
||||
<flux:sidebar.item icon="credit-card" :href="route('platform.payments.index')" :current="request()->routeIs('platform.payments.*')" wire:navigate>
|
||||
{{ __('Payments') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.group>
|
||||
@endif
|
||||
</flux:sidebar.nav>
|
||||
<a href="{{ route('dashboard') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('dashboard')) is-active @endif" title="{{ __('Dashboard') }}">
|
||||
<i class="fa-solid fa-gauge-high wms-sidebar-icon" aria-hidden="true"></i>
|
||||
<span data-wms-sidebar-label>{{ __('Dashboard') }}</span>
|
||||
</a>
|
||||
|
||||
<flux:spacer />
|
||||
<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>
|
||||
<span data-wms-sidebar-label>{{ __('Warehouses') }}</span>
|
||||
</a>
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.item icon="folder-git-2" href="/up">
|
||||
{{ __('Health Check') }}
|
||||
</flux:sidebar.item>
|
||||
<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>
|
||||
<span data-wms-sidebar-label>{{ __('Validation Rules') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<flux:sidebar.item icon="book-open-text" href="/admin">
|
||||
{{ __('Platform Admin') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.nav>
|
||||
@if(auth()->user()?->isMpbaPlatformAdmin())
|
||||
<div class="wms-sidebar-group">
|
||||
<div class="wms-sidebar-heading" data-wms-sidebar-label>{{ __('Administration') }}</div>
|
||||
|
||||
<x-desktop-user-menu class="hidden lg:block" :name="auth()->user()->name" />
|
||||
</flux:sidebar>
|
||||
<a href="{{ route('platform.dashboard') }}" wire:navigate class="wms-sidebar-link @if(request()->routeIs('platform.dashboard')) is-active @endif" title="{{ __('Admin Dashboard') }}">
|
||||
<i class="fa-solid fa-table-columns wms-sidebar-icon" aria-hidden="true"></i>
|
||||
<span data-wms-sidebar-label>{{ __('Admin Dashboard') }}</span>
|
||||
</a>
|
||||
|
||||
<!-- Mobile User Menu -->
|
||||
<flux:header class="lg:hidden">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
|
||||
<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>
|
||||
<span data-wms-sidebar-label>{{ __('Companies') }}</span>
|
||||
</a>
|
||||
|
||||
<flux:spacer />
|
||||
<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>
|
||||
<span data-wms-sidebar-label>{{ __('Licences') }}</span>
|
||||
</a>
|
||||
|
||||
<flux:dropdown position="top" align="end">
|
||||
<flux:profile
|
||||
:initials="auth()->user()->initials()"
|
||||
icon-trailing="chevron-down"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.radio.group>
|
||||
<div class="p-0 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<flux:avatar
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
/>
|
||||
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
|
||||
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span data-wms-sidebar-label>{{ __('Payments') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</flux:menu.radio.group>
|
||||
@endif
|
||||
</nav>
|
||||
|
||||
<flux:menu.separator />
|
||||
<div class="wms-sidebar-footer">
|
||||
<a href="/up" class="wms-sidebar-link" title="{{ __('Health Check') }}">
|
||||
<i class="fa-solid fa-heart-pulse wms-sidebar-icon" aria-hidden="true"></i>
|
||||
<span data-wms-sidebar-label>{{ __('Health Check') }}</span>
|
||||
</a>
|
||||
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||
{{ __('Settings') }}
|
||||
</flux:menu.item>
|
||||
</flux:menu.radio.group>
|
||||
<a href="/admin" class="wms-sidebar-link" title="{{ __('Platform Admin') }}">
|
||||
<i class="fa-solid fa-screwdriver-wrench wms-sidebar-icon" aria-hidden="true"></i>
|
||||
<span data-wms-sidebar-label>{{ __('Platform Admin') }}</span>
|
||||
</a>
|
||||
|
||||
<flux:menu.separator />
|
||||
<div class="wms-user-card" data-wms-sidebar-label>
|
||||
<div class="wms-user-avatar">{{ auth()->user()->initials() }}</div>
|
||||
<div class="wms-user-copy">
|
||||
<div class="wms-user-name">{{ auth()->user()->name }}</div>
|
||||
<div class="wms-user-email">{{ auth()->user()->email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@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>
|
||||
</form>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:header>
|
||||
<div class="wms-main-column">
|
||||
<header class="wms-mobile-header">
|
||||
<button type="button" class="wms-mobile-menu" data-wms-mobile-open aria-label="{{ __('Open navigation') }}">
|
||||
<i class="fa-solid fa-bars" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
{{ $slot }}
|
||||
<a href="{{ route('dashboard') }}" wire:navigate class="wms-mobile-title">
|
||||
{{ __('Warehouse Management System') }}
|
||||
</a>
|
||||
|
||||
<flux:dropdown position="top" align="end">
|
||||
<flux:profile
|
||||
:initials="auth()->user()->initials()"
|
||||
icon-trailing="chevron-down"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.radio.group>
|
||||
<div class="p-0 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<flux:avatar
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
/>
|
||||
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
|
||||
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||
{{ __('Settings') }}
|
||||
</flux:menu.item>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@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>
|
||||
</form>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</header>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
@@ -125,5 +180,83 @@
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const STORAGE_KEY = 'wms-sidebar-state';
|
||||
|
||||
function applySidebarState() {
|
||||
const root = document.documentElement;
|
||||
const saved = localStorage.getItem(STORAGE_KEY) || 'expanded';
|
||||
|
||||
root.dataset.wmsSidebar = saved === 'collapsed' ? 'collapsed' : 'expanded';
|
||||
|
||||
document.querySelectorAll('[data-wms-sidebar-toggle]').forEach((button) => {
|
||||
const expanded = root.dataset.wmsSidebar !== 'collapsed';
|
||||
button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
|
||||
button.setAttribute('aria-label', expanded ? '{{ __('Collapse sidebar') }}' : '{{ __('Expand sidebar') }}');
|
||||
});
|
||||
}
|
||||
|
||||
function closeMobileSidebar() {
|
||||
document.documentElement.dataset.wmsMobileSidebar = 'closed';
|
||||
}
|
||||
|
||||
function openMobileSidebar() {
|
||||
document.documentElement.dataset.wmsMobileSidebar = 'open';
|
||||
}
|
||||
|
||||
function bindSidebarControls() {
|
||||
applySidebarState();
|
||||
|
||||
document.querySelectorAll('[data-wms-sidebar-toggle]').forEach((button) => {
|
||||
if (button.dataset.wmsBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
button.dataset.wmsBound = '1';
|
||||
|
||||
button.addEventListener('click', function () {
|
||||
const root = document.documentElement;
|
||||
const next = root.dataset.wmsSidebar === 'collapsed' ? 'expanded' : 'collapsed';
|
||||
|
||||
root.dataset.wmsSidebar = next;
|
||||
localStorage.setItem(STORAGE_KEY, next);
|
||||
applySidebarState();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-wms-mobile-open]').forEach((button) => {
|
||||
if (button.dataset.wmsBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
button.dataset.wmsBound = '1';
|
||||
button.addEventListener('click', openMobileSidebar);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-wms-mobile-close]').forEach((button) => {
|
||||
if (button.dataset.wmsBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
button.dataset.wmsBound = '1';
|
||||
button.addEventListener('click', closeMobileSidebar);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.wms-sidebar-link[wire\\:navigate]').forEach((link) => {
|
||||
if (link.dataset.wmsMobileBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
link.dataset.wmsMobileBound = '1';
|
||||
link.addEventListener('click', closeMobileSidebar);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', bindSidebarControls);
|
||||
document.addEventListener('livewire:navigated', bindSidebarControls);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Warehouse Management System') }}</span>
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
<span class="sr-only">{{ config('app.name', 'Warehouse Management System') }}</span>
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
<div class="flex flex-col gap-6">
|
||||
{{ $slot }}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<span class="flex h-10 w-10 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="me-2 h-7 fill-current text-white" />
|
||||
</span>
|
||||
{{ config('app.name', 'Warehouse Management System') }}
|
||||
{{ config('app.name', 'Laravel') }}
|
||||
</a>
|
||||
|
||||
@php
|
||||
@@ -32,7 +32,7 @@
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Warehouse Management System') }}</span>
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user