In this video we are going to learn about Make the header functional on login and register page.
So let see how can we make the header functional on login and register page.
You can see here this is the login page.
And this time here search box, this wishlist and this cart are not working.
If I search any thing here its not showing the search result.
And now if I click on this wishlist icon nothing happen.
And similarly this cart icon is also not working.
So lets make these things working.
So switch to the project.
And first of all go lets create a component class file.
So go inside the app directory then views/components
And inside the component directory lets create a new class file
And file name must be BaseLayout.php
Now open this file and the following code.

<?php

namespace App\\View\\Components;

use Illuminate\\View\\Component;

class BaseLayout extends Component
{
/**
* Get the view / contents that represents the component.
*
* @return \\Illuminate\\View\\View
*/
public function render()
{
return view('layouts.base');
}
}


Now save this file and go inside the resources directory then views
Now open this auth directory.
And from here lets open the login.blade.php file.
Now in this file.
Only do only one thing Change here layout tag name

<x-base-layout>
<main id=\"main\" class=\"main-site left-sidebar\">

<div class=\"container\">

<div class=\"wrap-breadcrumb\">
<ul>
<li class=\"item-link\"><a href=\"/\" class=\"link\">home</a></li>
<li class=\"item-link\"><span>login</span></li>
</ul>
</div>
<div class=\"row\">
<div class=\"col-lg-6 col-sm-6 col-md-6 col-xs-12 col-md-offset-3\">
<div class=\" main-content-area\">
<div class=\"wrap-login-item \">
<div class=\"login-form form-item form-stl\">
<x-jet-validation-errors class=\"mb-4\" />
<form name=\"frm-login\" method=\"POST\" action=\"{{route('login')}}\">
@csrf
<fieldset class=\"wrap-title\">
<h3 class=\"form-title\">Log in to your account</h3>
</fieldset>
<fieldset class=\"wrap-input\">
<label for=\"frm-login-uname\">Email Address:</label>
<input type=\"email\" id=\"frm-login-uname\" name=\"email\" placeholder=\"Type your email address\" :value=\"old('email')\" required autofocus>
</fieldset>
<fieldset class=\"wrap-input\">
<label for=\"frm-login-pass\">Password:</label>
<input type=\"password\" id=\"frm-login-pass\" name=\"password\" placeholder=\"************\" required autocomplete=\"current-password\">
</fieldset>

<fieldset class=\"wrap-input\">
<label class=\"remember-field\">
<input class=\"frm-input \" name=\"remember\" id=\"rememberme\" value=\"forever\" type=\"checkbox\"><span>Remember me</span>
</label>
<a class=\"link-function left-position\" href=\"{{route('password.request')}}\" title=\"Forgotten password?\">Forgotten password?</a>
</fieldset>
<input type=\"submit\" class=\"btn btn-submit\" value=\"Login\" name=\"submit\">
</form>
</div>
</div>
</div><!--end main products area-->
</div>
</div><!--end row-->

</div><!--end container-->

</main>
</x-base-layout>



And lets check this
So switch to the browser and refresh the page
And now lets search anything
Here
This time you can see its working now
Also this wishlist and cart icon working
Now in similar way change the layout name in register,forget-password and reset-password view file.
So in this way you can Make the header functional on login and register page.