109 lines
3.5 KiB
PHP
109 lines
3.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="@themeId">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>{{ $title ?? config('app.name', 'Laravel') }}</title>
|
|
|
|
<!--THEME:--ADD TO TOP OT PREVENT FLICKERING -->
|
|
<script>
|
|
|
|
/* Function to apply or remove the dark theme */
|
|
function updateTheme(isDark) {
|
|
if (isDark) {
|
|
// document.documentElement.classList.add('dark'); // Add dark class to the root element
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}
|
|
|
|
/* Check the initial theme preference */
|
|
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
updateTheme(darkModeMediaQuery.matches);
|
|
|
|
/* listen to changed in (prefers-color-scheme: dark) */
|
|
darkModeMediaQuery.addEventListener('change', (event) => {
|
|
updateTheme(event.matches);
|
|
});
|
|
|
|
/* Add This to update theme when page is wire navigated */
|
|
document.addEventListener('livewire:navigated', () => {
|
|
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
updateTheme(darkModeMediaQuery.matches); // Re-apply the theme based on system preference
|
|
});
|
|
</script>
|
|
|
|
<!-- 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" /> --}}
|
|
|
|
<!-- Dynamic Theme CSS Custom Properties -->
|
|
<style>
|
|
:root {
|
|
{!! theme_css_vars() !!}
|
|
}
|
|
</style>
|
|
|
|
@vite(['resources/css/app.css', 'resources/css/fonts.css', 'resources/js/app.js'])
|
|
@livewireStyles
|
|
@wirechatStyles
|
|
@wireUiScripts
|
|
|
|
<style>
|
|
/* Theme-aware typography */
|
|
body {
|
|
font-family: var(--font-family-body, 'Poppins', sans-serif) !important;
|
|
}
|
|
|
|
/* Theme-aware heading styles */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-family-heading, 'Oswald', sans-serif) !important;
|
|
text-transform: var(--heading-transform, uppercase) !important;
|
|
}
|
|
|
|
/* Apply theme-specific CSS custom properties */
|
|
:root {
|
|
@themeCssVars
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans antialiased flex flex-col min-h-screen">
|
|
|
|
<x-jetstream.banner />
|
|
<x-jetstream.toaster />
|
|
|
|
<div class="flex-grow bg-gray-100">
|
|
@livewire('navigation-menu')
|
|
<x-notifications position="bottom-end" />
|
|
|
|
|
|
<header class="bg-theme-brand shadow lg:mt-16">
|
|
<!-- System Anounnucement -->
|
|
@livewire('system-announcement', ['type' => 'SiteContents\SystemAnnouncement' ?? null, 'limit' => 1])
|
|
<!-- Header --->
|
|
<div class="max-w-7xl mx-auto pt-1 pb-2 px-4 sm:px-6 lg:px-8">
|
|
<div class="mt-2 text-xl font-semibold leading-tight text-gray-100">
|
|
{{ __('Chat messenger') }}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)]">
|
|
<!-- Page Content -->
|
|
<main class="h-[calc(100vh_-_3rem)] lg:h-[calc(100vh_-_7rem)] max-w-7xl mx-auto overflow-hidden bg-white shadow-xl">
|
|
{{ $slot }}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
@auth
|
|
@livewire('account-info-modal')
|
|
@endauth
|
|
@livewireScripts
|
|
@wirechatAssets
|
|
</body>
|
|
|
|
</html>
|