Skip to content

Commit 0684cc5

Browse files
rellivrelliv
committed
Add custom web layout example
1 parent e79bdf1 commit 0684cc5

File tree

6 files changed

+152
-2
lines changed

6 files changed

+152
-2
lines changed

‎resources/views/web/layouts/main.blade.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
2+
<head>
3+
@include('web.layouts.partials.head')
4+
</head>
5+
6+
<body class="font-sans antialiased">
7+
@yield('content')
8+
</body>
9+
</html>

‎resources/views/web/layouts/partials/head.blade.php‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<meta charset="utf-8">
2+
<meta name="viewport" content="width=device-width, initial-scale=1">
3+
4+
{{-- Inline script to detect system dark mode preference and apply it immediately --}}
5+
<script>
6+
(function() {
7+
const appearance = '{{ $appearance ?? "system" }}';
8+
9+
if (appearance === 'system') {
10+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
11+
12+
if (prefersDark) {
13+
document.documentElement.classList.add('dark');
14+
}
15+
}
16+
})();
17+
</script>
18+
19+
{{-- Inline style to set the HTML background color based on our theme in app.css --}}
20+
<style>
21+
html {
22+
background-color: oklch(1 0 0);
23+
}
24+
25+
html.dark {
26+
background-color: oklch(0.145 0 0);
27+
}
28+
</style>
29+
30+
<!-- CSRF Token -->
31+
<meta name="csrf-token" content="{{ csrf_token() }}">
32+
33+
<title>@yield('pageTitle', 'Laravel Ready: Next') | {{ config('app.name') }} </title>
34+
35+
<!-- Favicon -->
36+
<link rel="icon" href="https://fav.farm/👽" />
37+
38+
<!-- Fonts -->
39+
<link rel="preconnect" href="https://fonts.bunny.net">
40+
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

‎resources/views/web/layouts/partials/navbar.blade.php‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!-- Navbar -->
2+
<nav class="navbar">
3+
<!-- Nav Container -->
4+
<div class="nav-container">
5+
<!-- Logo Link -->
6+
<a class="logo-link" href="{{ url('/') }}">
7+
<!-- Site Name -->
8+
<span class="site-name">
9+
{{ config('app.name', 'Laravel Starter') }}
10+
</span>
11+
</a>
12+
13+
<!-- Hamburger Menu -->
14+
<button class="hamburger-menu" data-collapse-toggle="navbar-multi-level" type="button"
15+
aria-controls="navbar-multi-level" aria-expanded="false">
16+
<span>
17+
Open main menu
18+
</span>
19+
20+
<svg class="class-svg-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
21+
xmlns="http://www.w3.org/2000/svg">
22+
<path fill-rule="evenodd"
23+
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
24+
clip-rule="evenodd"></path>
25+
</svg>
26+
</button>
27+
28+
<!-- Auth Links -->
29+
<div class="auth-links" id="navbar-multi-level">
30+
<!-- Link List -->
31+
<ul class="link-list">
32+
@guest
33+
34+
<!-- Login -->
35+
<li class="login">
36+
<a href="{{ route('login') }}">
37+
{{ __('fortify-ui::auth.login') }}
38+
</a>
39+
</li>
40+
41+
<!-- Register -->
42+
<li class="register">
43+
<a href="{{ route('register') }}">
44+
{{ __('fortify-ui::auth.register') }}
45+
</a>
46+
</li>
47+
48+
@endguest
49+
50+
@auth
51+
<!-- Login -->
52+
<li class="login">
53+
<a onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
54+
{{ __('fortify-ui::auth.logout') }}
55+
56+
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
57+
@csrf
58+
</form>
59+
</a>
60+
</li>
61+
@endauth
62+
</ul>
63+
</div>
64+
</div>
65+
</nav>

‎resources/views/web/pages/home/index.blade.php‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@extends('web.layouts.layout')
2+
3+
@section('content')
4+
<section class="flex items-center justify-center min-h-screen py-24 mt-10 light:bg-white dark:bg-gray-900">
5+
<div class="container">
6+
<div class="row justify-content-center">
7+
<div class="col-md-8">
8+
<div class="card">
9+
<div class="card-header">{{ __('Dashboard') }}</div>
10+
11+
<div class="card-body">
12+
@if (session('status'))
13+
<div class="alert alert-success" role="alert">
14+
{{ session('status') }}
15+
</div>
16+
@endif
17+
18+
{{ __('You are logged in!') }}
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
</section>
25+
@endsection

‎resources/views/web/pages/landing/index.blade.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@extends('web.layouts.main')
2+
3+
@section('content')
4+
<h1 class="text-9xl text-white text-center">
5+
Testa
6+
</h1>
7+
@endsection

‎routes/web.php‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@
1010
Route::get('/', [Developer\DevHubController::class, 'index'])->name('devhub.index');
1111
});
1212

13-
Route::get('/', function () {
14-
return Inertia::render('Welcome');
13+
Route::get('/', function(){
14+
return view('web.pages.landing.index');
1515
})->name('home');
1616

17+
Route::get('/app', function () {
18+
return Inertia::render('Welcome');
19+
})->name('app');
20+
1721
Route::get('dashboard', function () {
1822
return Inertia::render('Dashboard');
1923
})->middleware(['auth', 'verified'])->name('dashboard');

0 commit comments

Comments
 (0)