Created livewire pages and fixed header placement

app/Livewire/Dashboard.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Dashboard extends Component
+{
+    public function render()
+    {
+        return view('livewire.dashboard');
+    }
+}

app/Livewire/Messages.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Messages extends Component
+{
+    public function render()
+    {
+        return view('livewire.messages');
+    }
+}

app/Livewire/Orders.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Orders extends Component
+{
+    public function render()
+    {
+        return view('livewire.orders');
+    }
+}

config/livewire.php

@@ -0,0 +1,160 @@
+<?php
+
+return [
+
+    /*
+    |---------------------------------------------------------------------------
+    | Class Namespace
+    |---------------------------------------------------------------------------
+    |
+    | This value sets the root class namespace for Livewire component classes in
+    | your application. This value will change where component auto-discovery
+    | finds components. It's also referenced by the file creation commands.
+    |
+    */
+
+    'class_namespace' => 'App\\Livewire',
+
+    /*
+    |---------------------------------------------------------------------------
+    | View Path
+    |---------------------------------------------------------------------------
+    |
+    | This value is used to specify where Livewire component Blade templates are
+    | stored when running file creation commands like `artisan make:livewire`.
+    | It is also used if you choose to omit a component's render() method.
+    |
+    */
+
+    'view_path' => resource_path('views/livewire'),
+
+    /*
+    |---------------------------------------------------------------------------
+    | Layout
+    |---------------------------------------------------------------------------
+    | The view that will be used as the layout when rendering a single component
+    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
+    | In this case, the view returned by CreatePost will render into $slot.
+    |
+    */
+
+    'layout' => 'layouts.app',
+
+    /*
+    |---------------------------------------------------------------------------
+    | Lazy Loading Placeholder
+    |---------------------------------------------------------------------------
+    | Livewire allows you to lazy load components that would otherwise slow down
+    | the initial page load. Every component can have a custom placeholder or
+    | you can define the default placeholder view for all components below.
+    |
+    */
+
+    'lazy_placeholder' => null,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Temporary File Uploads
+    |---------------------------------------------------------------------------
+    |
+    | Livewire handles file uploads by storing uploads in a temporary directory
+    | before the file is stored permanently. All file uploads are directed to
+    | a global endpoint for temporary storage. You may configure this below:
+    |
+    */
+
+    'temporary_file_upload' => [
+        'disk' => null,        // Example: 'local', 's3'              | Default: 'default'
+        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
+        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
+        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
+            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
+            'mov', 'avi', 'wmv', 'mp3', 'm4a',
+            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
+        ],
+        'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
+        'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | Render On Redirect
+    |---------------------------------------------------------------------------
+    |
+    | This value determines if Livewire will run a component's `render()` method
+    | after a redirect has been triggered using something like `redirect(...)`
+    | Setting this to true will render the view once more before redirecting
+    |
+    */
+
+    'render_on_redirect' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Eloquent Model Binding
+    |---------------------------------------------------------------------------
+    |
+    | Previous versions of Livewire supported binding directly to eloquent model
+    | properties using wire:model by default. However, this behavior has been
+    | deemed too "magical" and has therefore been put under a feature flag.
+    |
+    */
+
+    'legacy_model_binding' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Auto-inject Frontend Assets
+    |---------------------------------------------------------------------------
+    |
+    | By default, Livewire automatically injects its JavaScript and CSS into the
+    | <head> and <body> of pages containing Livewire components. By disabling
+    | this behavior, you need to use @livewireStyles and @livewireScripts.
+    |
+    */
+
+    'inject_assets' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Navigate (SPA mode)
+    |---------------------------------------------------------------------------
+    |
+    | By adding `wire:navigate` to links in your Livewire application, Livewire
+    | will prevent the default link handling and instead request those pages
+    | via AJAX, creating an SPA-like effect. Configure this behavior here.
+    |
+    */
+
+    'navigate' => [
+        'show_progress_bar' => true,
+        'progress_bar_color' => '#2299dd',
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | HTML Morph Markers
+    |---------------------------------------------------------------------------
+    |
+    | Livewire intelligently "morphs" existing HTML into the newly rendered HTML
+    | after each update. To make this process more reliable, Livewire injects
+    | "markers" into the rendered Blade surrounding @if, @class & @foreach.
+    |
+    */
+
+    'inject_morph_markers' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Pagination Theme
+    |---------------------------------------------------------------------------
+    |
+    | When enabling Livewire's pagination feature by using the `WithPagination`
+    | trait, Livewire will use Tailwind templates to render pagination views
+    | on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
+    |
+    */
+
+    'pagination_theme' => 'tailwind',
+];

resources/views/layouts/navigation.blade.php

@@ -1,29 +1,42 @@
 <div class="navbar bg-white">
     <div class="navbar-start">
-        <label for="my-drawer-2" class="md:hidden">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                 stroke="black">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
-            </svg>
-        </label>
-        <div class="hidden md:flex items-center justify-center px-4 gap-2">
-            <x-application-logo class="h-5" />
-            <span class="text-lg text-black/80 font-bold">
-                Scholarspace
-            </span>
+        <div class="center">
+            <div class="w-60">
+
+                <label for="my-drawer-2" class="md:hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                         stroke="black">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M4 6h16M4 12h8m-8 6h16"/>
+                    </svg>
+                </label>
+                <div class="hidden md:flex items-center justify-center px-4 gap-2">
+                    <x-application-logo class="h-5"/>
+                    <span class="text-lg text-black/80 font-bold">
+                        Scholarspace
+                    </span>
+                </div>
+            </div>
+            <!-- Page Heading -->
+            @if (isset($header))
+                <div class="max-w-7xl text-lg text-black/80 font-bold px-2">
+                    {{ $header }}
+                </div>
+            @endif
         </div>
     </div>
     <div class="navbar-center">
         <div class="md:hidden flex gap-2 center">
-            <x-application-logo class="h-5" />
+            <x-application-logo class="h-5"/>
             <span class="text-lg text-black/80 font-bold">
                 Scholarspace
             </span>
         </div>
     </div>
     <div class="navbar-end">
         <a href="#" class="h-8 w-8 avatar rounded-full p-[2px] ring-1">
-            <img class="h-8 w-8 ring-1 ring-white rounded-full" src="https://api.dicebear.com/8.x/identicon/svg?seed=Jane" alt="John Doe">
+            <img class="h-8 w-8 ring-1 ring-white rounded-full"
+                 src="https://api.dicebear.com/8.x/identicon/svg?seed=Jane" alt="John Doe">
         </a>
     </div>
 </div>

resources/views/layouts/sidebar.blade.php

@@ -10,7 +10,19 @@
             <li class="side {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                 <a href="{{ route('dashboard') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
                     <i class="fas fa-home"></i>
-                    <span>Discover</span>
+                    <span>Dashboard</span>
+                </a>
+            </li>
+            <li class="side {{ request()->routeIs('messages') ? 'active' : '' }}">
+                <a href="{{ route('messages') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
+                    <i class="fas fa-envelope"></i>
+                    <span>Messages</span>
+                </a>
+            </li>
+            <li class="side {{ request()->routeIs('orders') ? 'active' : '' }}">
+                <a href="{{ route('orders') }}" class="flex items-center gap-2 p-2 hover:bg-gray-200">
+                    <i class="fas fa-shopping-cart"></i>
+                    <span>Orders</span>
                 </a>
             </li>
             <li class="side {{ request()->routeIs('profile.edit') ? 'active' : '' }}">

resources/views/livewire/dashboard.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- Because she competes with no one, no one can compete with her. --}}
+</div>

resources/views/livewire/messages.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- To attain knowledge, add things every day; To attain wisdom, subtract things every day. --}}
+</div>

resources/views/livewire/orders.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- The whole world belongs to you. --}}
+</div>

resources/views/profile/edit.blade.php

@@ -1,11 +1,12 @@
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h2 class="text-gray-800 leading-tight">
+            <i class="fas text-blue-500 fa-user-circle"></i>
             {{ __('Profile') }}
         </h2>
     </x-slot>
 
-    <div class="py-12">
+    <div class="py-8">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
             <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                 <div class="max-w-xl">

routes/web.php

@@ -1,18 +1,25 @@
 <?php
 
 use App\Http\Controllers\ProfileController;
+use App\Livewire\Dashboard;
+use App\Livewire\Messages;
+use App\Livewire\Orders;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\StaticPageController;
 use App\Http\Controllers\PagesController;
 
 Route::get('/', [StaticPageController::class, 'welcome'])->name('home');
 
-Route::get('/dashboard', [PagesController::class, 'dashboard'])->middleware(['auth', 'verified'])->name('dashboard');
-
 Route::middleware('auth')->group(function () {
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
     Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
 });
 
+Route::middleware(['auth', 'verified'])->group(function () {
+    Route::get('/dashboard', Dashboard::class)->name('dashboard');
+    Route::get('/messages', Messages::class)->name('messages');
+    Route::get('/orders', Orders::class)->name('orders');
+});
+
 require __DIR__.'/auth.php';