Laravel 12 E-Commerce: Changing the Admin and User Dashboard Layouts

Hi everyone, welcome back to the Laravel E-Commerce Tutorial. This video covers changing the default layouts for both the Admin and User dashboards to integrate the project'sHTML templates.

1. Implementing the Admin Dashboard Layout

To apply the admin template, we need to create a new layout component and an associated view file.

Create the Admin Layout Component

In the app/View/Components directory, copy AppLayout.php and rename the copy to AdminLayout.php. Open this new file and make the following changes:

Change the class name to `AdminLayout`.
Change the layout view name to `layouts.admin`.

Create the Admin Layout View

In resources/views/layouts, copy app.blade.php and rename it to admin.blade.php. Open this new file.

Open the admin template file (template/admin/index.html).
Copy the necessary CSS and script links from the template's<head> and paste them into the <head> section of admin.blade.php.
Copy the <body> content of the template and paste it into the <body> of admin.blade.php.
Replace the main content area with the $slot directive:
```
{{ $slot }}
```
Add the @stack directives for view-specific assets:
```
@stack("styles")
@stack("scripts")
```
Update all CSS, script, and image URLs to use the Laravel asset() helper method. For example:
```
<img src="{{asset("assets-adm/img/client_img.png")}}" alt="#">
```

Update Navigation Links (Admin Layout)

Update the user profile and logout section within admin.blade.php:

<div class="profile_info">
    <img src="{{asset("assets-adm/img/client_img.png")}}" alt="#">
    <div class="profile_info_iner">
        <div class="profile_author_name">
            <p>{{ Auth::user()->name }}</p>
        </div>
        <div class="profile_info_details">
            <a href="#">My Profile </a>
            <form action="{{route("logout")}}" method="POST">
                @csrf
                <a href="{{route("logout")}}" onclick="event.preventDefault();this.closest("form").submit();">Log Out</a>
            </form>
        </div>
    </div>
</div>

Update Admin Index View

In resources/views/admin/index.blade.php, change the layout component to use the new admin layout:

<x-admin-layout>
    <!-- Paste the main-content of the admin template here -->
</x-admin-layout>

After checking the browser, the Admin Dashboard should now display with the new template applied. The logout link will also be functional.

2. Implementing the User Dashboard Layout

For the user dashboard, we will apply the user template structure, including a navigation sidebar.

Create the Account Navigation View

Create a new view file in the user directory: resources/views/user/account-nav.blade.php. This file will hold the sidebar navigation.

Copy the navigation content from the user template and update the routes and logout link:

<div class="my-account-menu">
    <ul class="nav my-account-menu-list flex-column">
        <li>
            <a href="{{route("user.index")}}"><i class="fa fa-tachometer"></i>
            Dashboard</a>
        </li>
        <li>
            <a href="#"><i class="fa fa-shopping-cart"></i>
            Order</a>
        </li>
        <li>
            <a href="#"><i class="fa fa-credit-card"></i>
            Payment Method</a>
        </li>
        <li>
            <a href="#"><i class="fa fa-map-marker"></i>
            Address</a>
        </li>
        <li>
            <a href="#"><i class="fa fa-user"></i>
            Account Details</a>
        </li>
        <li>
            <form action="{{route("logout")}}" method="post">
                @csrf
                <a href="{{route("logout")}}" onclick="event.preventDefault();this.closest("form").submit();"><i class="fa fa-sign-out"></i>&nbsp;Sign Out</a>
            </form>
        </li>
    </ul>
</div>

Update User Index View

Open resources/views/user/index.blade.php and wrap the content in the main layout (`x-app-layout`) using a Bootstrap grid structure to display the navigation sidebar and the main content.

<div class="section section-padding">
    <div class="container-fluide" style="padding-left:15px;padding-right:15px;">
        <div class="row gy-4">
            <div class="col-xl-3 col-md-4">
                @include("user.account-nav")
            </div>
            <div class="col-xl-9 col-md-8">
                <div class="tab-content my-account-tab">
                    <div class="tab-pane fade show active" id="pills-dashboard">
                        <div class="my-account-dashboard-account-wrapper">
                            <h4 class="account-title">Dashboard</h4>
                            <div class="welcome-dashboard">
                                <p>
                                    Hello,
                                    <strong>{{ Auth::user()->name }}</strong>
                                </p>
                            </div>
                            <p>
                                From your account dashboard, you can easily check & view your recent orders, manage your shipping and billing addresses, and edit your password and account details.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Additionally, ensure the main navigation bar includes a proper logout link for the user:

<li>
    <form method="POST" action="{{route("logout")}}" id="logout-form-1">
        @csrf
        <a href="{{route("logout")}}" class="menu-link menu-link_us-s" onclick="event.preventDefault();
        document.getElementById("logout-form-1").submit();">Logout</a>
    </form>
</li>

Switch to the browser, log in with user credentials, and verify that the user dashboard now displays the custom template with the navigation sidebar. The logout link should also be fully functional.

This concludes changing the Admin and User Dashboard Layouts.