homeos/resources/views/layouts/app.blade.php

62 lines
2.9 KiB
PHP

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="icon" href="{{ asset('favicon.svg') }}" type="image/svg+xml">
<link rel="icon" href="{{ asset('favicon.ico') }}" sizes="any">
{{-- PWA: installable on tablet/phone (§ tablet control) --}}
<link rel="manifest" href="{{ asset('manifest.webmanifest') }}">
<meta name="theme-color" content="#0D1424">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="HomeOS">
<link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">
<title>{{ $title ?? __('common.app_name') }} · {{ __('common.app_name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body class="min-h-dvh antialiased">
<div x-data="{ nav: false }" @keydown.escape.window="nav = false">
<div class="lg:grid lg:grid-cols-[236px_1fr]">
{{-- desktop sidebar --}}
<aside class="hidden lg:flex flex-col sidebar-tint border-r border-line-soft sticky top-0 h-dvh overflow-y-auto px-3.5 pt-5 pb-4">
<x-sidebar />
</aside>
{{-- main column --}}
<div class="min-w-0">
{{ $slot }}
</div>
</div>
{{-- mobile drawer --}}
<div x-show="nav" x-cloak class="lg:hidden fixed inset-0 z-50" role="dialog" aria-modal="true">
<div x-show="nav" x-transition.opacity @click="nav = false"
class="absolute inset-0 bg-black/60"></div>
<aside x-show="nav"
x-transition:enter="transition ease-out duration-200" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full"
class="absolute inset-y-0 left-0 w-[280px] max-w-[85%] sidebar-tint border-r border-line-soft overflow-y-auto px-3.5 pt-5 pb-4">
<div class="flex justify-end -mt-1 mb-1">
<button type="button" @click="nav = false"
class="grid place-items-center w-9 h-9 rounded-lg text-ink-2 hover:bg-raised hover:text-ink transition-colors"
aria-label="{{ __('common.close') }}">
<x-icon name="close" :size="20" />
</button>
</div>
<x-sidebar />
</aside>
</div>
</div>
@livewire('wire-elements-modal')
@livewireScripts
</body>
</html>