Gbanyan
86f22f2a76
- Add 'Skip to main content' links to App and Guest layouts. - Add aria-current to navigation links for active page indication. - Add aria-label to mobile menu button. - Include pending UI updates for Dashboard and Welcome pages with improved structure.
65 lines
2.6 KiB
PHP
65 lines
2.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data="themeSwitcher()" x-init="init()" :class="{'dark': isDark}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>{{ config('app.name', 'Laravel') }}</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
|
|
|
|
<!-- Scripts -->
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
<body class="font-sans antialiased bg-gray-50 text-slate-900 transition-colors duration-300 dark:bg-slate-900 dark:text-slate-100">
|
|
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-white focus:text-black focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
{{ __('Skip to main content') }}
|
|
</a>
|
|
<div class="min-h-screen">
|
|
@include('layouts.navigation')
|
|
|
|
<!-- Page Heading -->
|
|
@if (isset($header))
|
|
<header class="bg-white/80 shadow dark:bg-slate-800/80 backdrop-blur">
|
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
{{ $header }}
|
|
</div>
|
|
</header>
|
|
@endif
|
|
|
|
<!-- Page Content -->
|
|
<main id="main-content" class="bg-gray-50 dark:bg-slate-900">
|
|
{{ $slot }}
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
function themeSwitcher() {
|
|
return {
|
|
isDark: false,
|
|
init() {
|
|
const stored = localStorage.getItem('theme');
|
|
if (stored) {
|
|
this.isDark = stored === 'dark';
|
|
} else {
|
|
this.isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
}
|
|
this.apply();
|
|
},
|
|
toggle() {
|
|
this.isDark = !this.isDark;
|
|
localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
|
|
this.apply();
|
|
},
|
|
apply() {
|
|
document.documentElement.classList.toggle('dark', this.isDark);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|