From 398f5e209729b6efbb1dda8c2e966d4283135a13 Mon Sep 17 00:00:00 2001
From: Leonid Nikitin <i@kor-elf.net>
Date: Fri, 7 Jul 2023 00:03:03 +0600
Subject: [PATCH] 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.

---
 app/View/Components/Private/Layout.php        |  17 +++
 .../views/private/layout/_errors.blade.php    |   9 ++
 .../private/layout/_navigation.blade.php      |  18 +++
 .../views/private/layout/_success.blade.php   |   5 +
 resources/views/private/layout/app.blade.php  | 125 ++++++++++++++++++
 5 files changed, 174 insertions(+)
 create mode 100644 app/View/Components/Private/Layout.php
 create mode 100644 resources/views/private/layout/_errors.blade.php
 create mode 100644 resources/views/private/layout/_navigation.blade.php
 create mode 100644 resources/views/private/layout/_success.blade.php
 create mode 100644 resources/views/private/layout/app.blade.php

diff --git a/app/View/Components/Private/Layout.php b/app/View/Components/Private/Layout.php
new file mode 100644
index 0000000..f4f561a
--- /dev/null
+++ b/app/View/Components/Private/Layout.php
@@ -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');
+    }
+}
diff --git a/resources/views/private/layout/_errors.blade.php b/resources/views/private/layout/_errors.blade.php
new file mode 100644
index 0000000..6537f74
--- /dev/null
+++ b/resources/views/private/layout/_errors.blade.php
@@ -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>
diff --git a/resources/views/private/layout/_navigation.blade.php b/resources/views/private/layout/_navigation.blade.php
new file mode 100644
index 0000000..7dd830a
--- /dev/null
+++ b/resources/views/private/layout/_navigation.blade.php
@@ -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>
diff --git a/resources/views/private/layout/_success.blade.php b/resources/views/private/layout/_success.blade.php
new file mode 100644
index 0000000..ecb41c9
--- /dev/null
+++ b/resources/views/private/layout/_success.blade.php
@@ -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>
diff --git a/resources/views/private/layout/app.blade.php b/resources/views/private/layout/app.blade.php
new file mode 100644
index 0000000..bf3a2f7
--- /dev/null
+++ b/resources/views/private/layout/app.blade.php
@@ -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>