si-klinik/sk-klinik.my.id/resources/views/components/guest-layout.blade.php

91 lines
3.7 KiB
PHP

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
@include('partials.head')
{{-- Tambahkan script ini agar tidak ada 'flicker' putih saat refresh --}}
<script>
if (localStorage.getItem('appearance') === 'dark' || (!('appearance' in localStorage) && window.matchMedia(
'(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</head>
{{-- Ganti bg-white menjadi bg-zinc-50 dark:bg-zinc-950 --}}
<body class="bg-zinc-50 dark:bg-zinc-950 min-h-screen font-sans antialiased transition-colors duration-300">
{{-- Navbar Utama - Menyesuaikan Dark Mode --}}
<flux:header sticky
class="bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md border-zinc-200 dark:border-zinc-800 border-b">
<div class="flex items-center mx-auto px-6 py-3 w-full max-w-7xl">
<x-app-logo :sidebar="true" href="{{ route('home') }}" wire:navigate />
<flux:spacer />
<flux:navbar class="max-sm:hidden">
<flux:navbar.item href="/">Beranda</flux:navbar.item>
<flux:navbar.item href="{{ route('about') }}" :current="request()->routeIs('about')">
Profil
</flux:navbar.item>
<flux:navbar.item href="{{ route('home') }}#layanan">Layanan</flux:navbar.item>
<flux:navbar.item href="{{ route('doctors.index') }}">
Dokter
</flux:navbar.item>
<flux:navbar.item href="{{ route('news.index') }}">
Berita
</flux:navbar.item>
<flux:navbar.item href="{{ route('home') }}#kontak">Kontak</flux:navbar.item>
</flux:navbar>
<flux:spacer />
<div class="flex items-center gap-3">
{{-- Toggle Dark/Light Mode --}}
<flux:button variant="ghost" size="sm" square x-data="{ appearance: localStorage.getItem('appearance') || 'light' }"
x-on:click="
appearance = appearance === 'dark' ? 'light' : 'dark';
localStorage.setItem('appearance', appearance);
document.documentElement.classList.toggle('dark', appearance === 'dark');
">
{{-- Ikon Matahari (Muncul saat Dark Mode) --}}
<flux:icon.sun class="hidden dark:block" />
{{-- Ikon Bulan (Muncul saat Light Mode) --}}
<flux:icon.moon class="dark:hidden block" />
</flux:button>
@auth
<flux:button href="{{ route('dashboard') }}" variant="ghost">{{ __('Dashboard') }}</flux:button>
@else
<flux:button href="{{ route('login') }}" variant="ghost">{{ __('Masuk') }}</flux:button>
<flux:button href="{{ route('register') }}" variant="primary">{{ __('Daftar') }}</flux:button>
@endauth
</div>
<flux:sidebar.toggle class="sm:hidden ml-4" />
</div>
</flux:header>
{{-- Konten Halaman --}}
<main class="mx-auto px-6 max-w-7xl">
{{ $slot }}
</main>
{{-- Footer --}}
<footer class="bg-{{ $site->accent ?? 'emerald' }}-600 mt-20 py-10">
<div class="mx-auto px-6 max-w-7xl font-medium text-white text-sm text-center">
&copy; {{ date('Y') }} Sistem Informasi {{ $site->name ?? 'Klinik Kami' }}. All rights reserved.
</div>
</footer>
@fluxScripts
</body>
</html>