Added necessary template files and view components for scaffolding of the private area of the application. This includes error and success message components for efficient handling of user feedback messages. Added navigation components and dashboard structure to the private layout. This will streamline the implementation of features in the private area and ensure a consistent user interface.

This commit is contained in:
Leonid Nikitin 2023-07-07 00:03:03 +06:00
parent 92206a028a
commit 398f5e2097
Signed by: kor-elf
GPG Key ID: 7DE8F80C5CEC2C0D
5 changed files with 174 additions and 0 deletions

View File

@ -0,0 +1,17 @@
<?php declare(strict_types=1);
namespace App\View\Components\Private;
use Illuminate\View\Component;
use Illuminate\View\View;
final class Layout extends Component
{
/**
* @inheritDoc
*/
public function render(): View
{
return view('private.layout.app');
}
}

View File

@ -0,0 +1,9 @@
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<span class="fas fa-bullhorn me-1"></span>
<ul>
@foreach($errors as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

View File

@ -0,0 +1,18 @@
<ul class="nav flex-column pt-3 pt-md-0">
<li class="nav-item">
<a href="{{ route('home') }}" class="nav-link d-flex align-items-center">
<span class="sidebar-icon">
<img src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" height="20" width="20" alt="Captcha service Logo">
</span>
<span class="mt-1 ms-1 sidebar-text">Captcha service</span>
</a>
</li>
<li class="nav-item {{ request()->route()->named('home') ? 'active' : '' }}">
<a href="{{ route('home') }}" class="nav-link">
<span class="sidebar-icon">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
</span>
<span class="sidebar-text">Dashboard</span>
</a>
</li>
</ul>

View File

@ -0,0 +1,5 @@
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span class="fas fa-bullhorn me-1"></span>
{{ $success }}
<button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>@yield('meta_title', '')</title>
<meta name="keywords" content="@yield('meta_keywords', '')" />
<meta name="description" content="@yield('meta_description', '')" />
@vite('resources/volt/scss/app.scss')
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<nav class="navbar navbar-dark navbar-theme-primary px-4 col-12 d-lg-none">
<a class="navbar-brand me-lg-5" href="{{ route('home') }}" aria-label="Captcha service">
<img class="navbar-brand-dark" src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" alt="Captcha service Logo" /> <img class="navbar-brand-light" src="{{ Vite::asset('resources/volt/images/brand/light.png') }}" alt="Captcha service Logo" />
</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler d-lg-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<nav id="sidebarMenu" class="sidebar d-lg-block bg-gray-800 text-white collapse" data-simplebar>
<div class="sidebar-inner px-4 pt-3">
<div class="user-card d-flex d-md-none align-items-center justify-content-between justify-content-md-center pb-4">
<div class="d-flex align-items-center">
<div class="avatar-lg me-4">
<svg class="card-img-top rounded-circle border-white" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</div>
<div class="d-block">
<h2 class="h5 mb-3">{{ __('Hello') }}, {{ auth()->user()->name }}</h2>
<form method="post" action="{{ route('logout') }}">
@csrf
<button class="btn btn-secondary btn-sm d-inline-flex align-items-center" type="submit">
<svg class="icon icon-xxs me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
{{ __('Sign Out') }}
</button>
</form>
</div>
</div>
<div class="collapse-close d-md-none">
<a href="#sidebarMenu" data-bs-toggle="collapse"
data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="true"
aria-label="{{ __('Toggle navigation') }}">
<svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
@include('private.layout._navigation')
</div>
</nav>
<main class="content min-vh-100 position-relative">
<nav class="navbar navbar-top navbar-expand navbar-dashboard navbar-dark ps-0 pe-2 pb-2 pb-lg-3">
<div class="container-fluid px-0">
<div class="d-flex justify-content-between w-100" id="navbarSupportedContent">
<div class="d-flex align-items-center">
<h1 class="h3">@yield('h1', '')</h1>
</div>
<!-- Navbar links -->
<ul class="navbar-nav align-items-center">
<li class="nav-item dropdown ms-lg-3">
<a class="nav-link dropdown-toggle pt-1 px-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<div class="media d-flex align-items-center">
<svg class="avatar rounded-circle" fill="#000" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
<div class="media-body ms-2 text-dark align-items-center d-none d-lg-block">
<span class="mb-0 font-small fw-bold text-gray-900">{{ auth()->user()->name }}</span>
</div>
</div>
</a>
<div class="dropdown-menu dashboard-dropdown dropdown-menu-end mt-2 py-1">
<a class="dropdown-item d-flex align-items-center" href="{{ route('profile.edit') }}">
<svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
{{ __('My Profile') }}
</a>
<a class="dropdown-item d-flex align-items-center" href="{{ route('profile.settings') }}">
<svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
{{ __('Settings') }}
</a>
<div role="separator" class="dropdown-divider my-1"></div>
<form method="post" action="{{ route('logout') }}">
@csrf
<button class="dropdown-item d-flex align-items-center" type="submit">
<svg class="dropdown-icon text-danger me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
{{ __('Logout') }}
</button>
</form>
</div>
</li>
</ul>
</div>
</div>
</nav>
@includeWhen($errors->any(), 'private.layout._errors', ['errors' => $errors->all()])
@includeWhen(Session::has('success'), 'private.layout._success', ['success' => Session::get('success')])
{{ $slot }}
<footer class="bg-white shadow p-3 position-absolute start-0 end-0 bottom-0">
<div class="row">
<div class="col-12 col-md-4 col-xl-6 mb-4 mb-md-0">
<p class="mb-0 text-center text-lg-start">Copyright © 2023-<span class="current-year"></span> <a href="https://github.com/kor-elf" target="_blank">Kor-Elf</a></p>
</div>
<div class="col-12 col-md-8 col-xl-6 text-center text-lg-start">
<!-- List -->
<ul class="list-inline list-group-flush list-group-borderless text-md-end mb-0">
<li class="list-inline-item px-0 px-sm-2">
<a class="text-primary fw-normal" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" target="_blank">Volt - Bootstrap 5 Dashboard Template</a>
</li>
</ul>
</div>
</div>
</footer>
</main>
@vite('resources/volt/js/app.js')
</body>
</html>