Layout component: part 2

Now that we have our components, it's time to refactor the layout

Let's refactor the footer component and add some extra information, but only for local development:
- Show the current breakpoint from Tailwind
- Add some quick links for PhpMyAdmin, MailHog (a local mailserver for development) and links to the TALL stack websites
Create a new footer-icon component inside the layout folder: resources/views/components/layout/footer-icon.blade.php

WARNING

If the footer is not rendered correctly, you have to clear the cached files in the storage/framework/views/ folder
Execute the following command in the terminal: php artisan view:clear
Reload the page

Lines 3 and 45: show the content between this directive only if the constant APP_ENV, inside the .env file, is set to local
(More details about the .env file and the configuration files can be found in a separate chapter)
Line 7 - 14: show the current breakpoint from Tailwind
Line 20: the icons disappear when you click outside the div that contains them
Line 22 - 42: the quick links are added to the footer

php

<footer class="container mx-auto p-4 text-sm border-t flex justify-between items-center">
    <div>The Vinyl Shop - © {{ date('Y') }}</div>
    @env('local')          
        <div class="p-2 bg-gray-200 rounded-md"
             x-data="{showIcons: false}"
             @click="showIcons = true">
            <div class="text-gray-400 text-xs text-center cursor-pointer ">
                <span class="sm:hidden">&lt; 640</span>
                <span class="hidden sm:block md:hidden">SM | 640 - 768</span>
                <span class="hidden md:block lg:hidden">MD | 768 - 1024</span>
                <span class="hidden lg:block xl:hidden">LG | 1024 - 1280</span>
                <span class="hidden xl:block 2xl:hidden">XL | 1280 - 1536</span>
                <span class="hidden 2xl:block">2XL |  &gt; 1536</span>
            </div>
            <div class="fixed left-0 right-0 bottom-12 p-2 mx-2 sm:mx-8
                rounded-md border shadow-lg bg-amber-200/25 backdrop-blur-sm
                flex justify-center space-x-4"
                 x-show="showIcons"
                 x-transition.duration.300ms
                 @click.outside="showIcons = false">

                <x-layout.footer-icon target="_myadmin"
                                      href="http://phpmyadmin.test"
                                      icon="si-phpmyadmin"/>
                <x-layout.footer-icon target="_mail"
                                      href="http://localhost:8025"
                                      icon="si-maildotru"/>
                <x-layout.footer-icon target="_icons"
                                      href="https://blade-ui-kit.com/blade-icons"
                                      icon="fas-icons"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://tailwindcss.com/docs"
                                      icon="si-tailwindcss"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://alpinejs.dev/"
                                      icon="si-alpinedotjs"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://laravel.com/docs/10.x/"
                                      icon="si-laravel"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://laravel-livewire.com/docs/2.x/"
                                      icon="si-livewire"/>
            </div>
        </div>
    @endenv
    <div>Build with Laravel {{ app()->version() }}</div>
</footer>

<footer class="container mx-auto p-4 text-sm border-t flex justify-between items-center">
    <div>The Vinyl Shop - © {{ date('Y') }}</div>
    @env('local')          
        <div class="p-2 bg-gray-200 rounded-md"
             x-data="{showIcons: false}"
             @click="showIcons = true">
            <div class="text-gray-400 text-xs text-center cursor-pointer ">
                <span class="sm:hidden">&lt; 640</span>
                <span class="hidden sm:block md:hidden">SM | 640 - 768</span>
                <span class="hidden md:block lg:hidden">MD | 768 - 1024</span>
                <span class="hidden lg:block xl:hidden">LG | 1024 - 1280</span>
                <span class="hidden xl:block 2xl:hidden">XL | 1280 - 1536</span>
                <span class="hidden 2xl:block">2XL |  &gt; 1536</span>
            </div>
            <div class="fixed left-0 right-0 bottom-12 p-2 mx-2 sm:mx-8
                rounded-md border shadow-lg bg-amber-200/25 backdrop-blur-sm
                flex justify-center space-x-4"
                 x-show="showIcons"
                 x-transition.duration.300ms
                 @click.outside="showIcons = false">

                <x-layout.footer-icon target="_myadmin"
                                      href="http://phpmyadmin.test"
                                      icon="si-phpmyadmin"/>
                <x-layout.footer-icon target="_mail"
                                      href="http://localhost:8025"
                                      icon="si-maildotru"/>
                <x-layout.footer-icon target="_icons"
                                      href="https://blade-ui-kit.com/blade-icons"
                                      icon="fas-icons"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://tailwindcss.com/docs"
                                      icon="si-tailwindcss"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://alpinejs.dev/"
                                      icon="si-alpinedotjs"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://laravel.com/docs/10.x/"
                                      icon="si-laravel"/>
                <x-layout.footer-icon target="_tall"
                                      href="https://laravel-livewire.com/docs/2.x/"
                                      icon="si-livewire"/>
            </div>
        </div>
    @endenv
    <div>Build with Laravel {{ app()->version() }}</div>
</footer>

x-cloak

Every time a page is loaded, the debug icons are visible for a split second
Alpine's x-cloak directive can be used to hide the icons until the page is fully loaded
(x-cloak is nothing more than the CSS-style display: none; and is already included in the resources/css/app.css file)

php

<footer class="container mx-auto p-4 text-sm border-t flex justify-between items-center">
    <div>The Vinyl Shop - © {{ date('Y') }}</div>
    @env('local')
        <div class="p-2 bg-gray-200 rounded-md"
             x-data="{showIcons: false}"
             @click="showIcons = true">
            <div class="text-gray-400 text-xs text-center cursor-pointer ">...</div>
            <div class="fixed left-0 right-0 bottom-12 p-2 mx-2 sm:mx-8
                rounded-md border shadow-lg bg-amber-200/25 backdrop-blur-sm
                flex justify-center space-x-4"
                 x-show="showIcons"
                 x-cloak        
                 x-transition.duration.300ms
                 @click.outside="showIcons = false">
                ...
            </div>
        </div>
    @endenv
    <div>Build with Laravel {{ app()->version() }}</div>
</footer>

<footer class="container mx-auto p-4 text-sm border-t flex justify-between items-center">
    <div>The Vinyl Shop - © {{ date('Y') }}</div>
    @env('local')
        <div class="p-2 bg-gray-200 rounded-md"
             x-data="{showIcons: false}"
             @click="showIcons = true">
            <div class="text-gray-400 text-xs text-center cursor-pointer ">...</div>
            <div class="fixed left-0 right-0 bottom-12 p-2 mx-2 sm:mx-8
                rounded-md border shadow-lg bg-amber-200/25 backdrop-blur-sm
                flex justify-center space-x-4"
                 x-show="showIcons"
                 x-cloak        
                 x-transition.duration.300ms
                 @click.outside="showIcons = false">
                ...
            </div>
        </div>
    @endenv
    <div>Build with Laravel {{ app()->version() }}</div>
</footer>

Let's refactor the navbar component and use some off the Jetstream components and our newly created logo component
Because we don't have all the pages yet, most of the links in our navbar will refer to the Under Construction page route('under-construction') instead of the actual page
Let's start with the Under Construction page

Under Construction page

Create a new under-construction.blade.php file inside the resources/views/ folder
Add a new route to the routes/web.php file

Add this code to the resources/views/under-construction.blade.php file

php

<x-vinylshop-layout>
    <x-slot name="description">This page is under construction</x-slot>
    <x-slot name="title">Welcome to the Vinyl Shop</x-slot>
    <x-slot name="subtitle"></x-slot>

    <div class="grid md:grid-cols-2 gap-8">
        <div class="hidden md:flex md:flex-row-reverse md:border-r-2 md:border-gray-300">
            <x-heroicon-s-face-frown class="w-40 h-40 text-gray-300" />
        </div>
        <div>
            <p class="text-5xl">COMING SOON</p>
            <p class="text-2xl font-light text-gray-400">THIS PAGE IS UNDER CONSTRUCTION</p>
            <div class="mt-4">
                <x-button class="bg-gray-400 hover:bg-gray-500">
                    <a href="{{ route('home') }}">Home</a>
                </x-button>
                <x-button class="bg-gray-400 hover:bg-gray-500">
                    <a href="#" onclick="window.history.back();">Back</a>
                </x-button>
            </div>
        </div>
    </div>
</x-vinylshop-layout>

<x-vinylshop-layout>
    <x-slot name="description">This page is under construction</x-slot>
    <x-slot name="title">Welcome to the Vinyl Shop</x-slot>
    <x-slot name="subtitle"></x-slot>

    <div class="grid md:grid-cols-2 gap-8">
        <div class="hidden md:flex md:flex-row-reverse md:border-r-2 md:border-gray-300">
            <x-heroicon-s-face-frown class="w-40 h-40 text-gray-300" />
        </div>
        <div>
            <p class="text-5xl">COMING SOON</p>
            <p class="text-2xl font-light text-gray-400">THIS PAGE IS UNDER CONSTRUCTION</p>
            <div class="mt-4">
                <x-button class="bg-gray-400 hover:bg-gray-500">
                    <a href="{{ route('home') }}">Home</a>
                </x-button>
                <x-button class="bg-gray-400 hover:bg-gray-500">
                    <a href="#" onclick="window.history.back();">Back</a>
                </x-button>
            </div>
        </div>
    </div>
</x-vinylshop-layout>

Open resources/views/components/layout/nav.blade.php and replace it with the following code:

The left side of the navbar, starts with our logo, followed by some Jetstream <x-nav-link /> component
- the href attribute is set to the route attribute of the nav-link component
- the active route (request()->routeIs('xxxx.*')) determines if the :active property is set to true or false
  true the link to the current route is underlined
  false the link to the current route is not underlined
The right side of the navbar, ends with a <x-dropdown /> component
- the $trigger slot contains an avatar image from the UI Avatars API
  when clicking on the avatar, the dropdown menu will be displayed
- the default slot contains all the links, build with the Jetstream <x-dropdown-link /> component

php

<nav class="container mx-auto p-4 flex justify-between">
    {{-- left navigation--}}
    <div class="flex items-center space-x-2">
        {{-- Logo --}}
        <a href="{{ route('home') }}">
            <x-tmk.logo class="w-8 h-8"/>
        </a>
        <a class="hidden sm:block font-medium text-lg" href="{{ route('home') }}">
            The Vinyl Shop
        </a>
        <x-nav-link href="{{ route('under-construction') }}" :active="request()->routeIs('under-construction')">
            Shop
        </x-nav-link>
        <x-nav-link href="{{ route('contact') }}" :active="request()->routeIs('contact')">
            Contact
        </x-nav-link>
    </div>

    {{-- right navigation --}}
    <div class="relative flex items-center space-x-2">
        <x-nav-link href="{{ route('login') }}" :active="request()->routeIs('login')">
            Login
        </x-nav-link>
        <x-nav-link href="{{ route('register') }}" :active="request()->routeIs('register')">
            Register
        </x-nav-link>
        <x-nav-link href="{{ route('under-construction') }}" :active="request()->routeIs('under-construction')">
            <x-fas-shopping-basket class="w-4 h-4"/>
        </x-nav-link>
        {{-- dropdown navigation--}}
        <x-dropdown align="right" width="48">
            {{-- avatar --}}
            <x-slot name="trigger">
                <img class="rounded-full h-8 w-8 cursor-pointer"
                     src="https://ui-avatars.com/api/?name=Vinyl+Shop"
                     alt="Vinyl Shop">
            </x-slot>
            <x-slot name="content">
                {{-- all users --}}
                <div class="block px-4 py-2 text-xs text-gray-400">My Name</div>
                <x-dropdown-link href="{{ route('under-construction') }}">Dashboard</x-dropdown-link>
                <x-dropdown-link href="{{ route('profile.show') }}">Update Profile</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Order history</x-dropdown-link>
                <div class="border-t border-gray-100"></div>
                <x-dropdown-link href="{{ route('under-construction') }}">Logout</x-dropdown-link>
                <div class="border-t border-gray-100"></div>
                {{-- admins only --}}
                <div class="block px-4 py-2 text-xs text-gray-400">Admin</div>
                <x-dropdown-link href="{{ route('under-construction') }}">Genres</x-dropdown-link>
                <x-dropdown-link href="{{ route('admin.records') }}">Records</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Covers</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Users</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Orders</x-dropdown-link>
            </x-slot>
        </x-dropdown>
    </div>
</nav>

<nav class="container mx-auto p-4 flex justify-between">
    {{-- left navigation--}}
    <div class="flex items-center space-x-2">
        {{-- Logo --}}
        <a href="{{ route('home') }}">
            <x-tmk.logo class="w-8 h-8"/>
        </a>
        <a class="hidden sm:block font-medium text-lg" href="{{ route('home') }}">
            The Vinyl Shop
        </a>
        <x-nav-link href="{{ route('under-construction') }}" :active="request()->routeIs('under-construction')">
            Shop
        </x-nav-link>
        <x-nav-link href="{{ route('contact') }}" :active="request()->routeIs('contact')">
            Contact
        </x-nav-link>
    </div>

    {{-- right navigation --}}
    <div class="relative flex items-center space-x-2">
        <x-nav-link href="{{ route('login') }}" :active="request()->routeIs('login')">
            Login
        </x-nav-link>
        <x-nav-link href="{{ route('register') }}" :active="request()->routeIs('register')">
            Register
        </x-nav-link>
        <x-nav-link href="{{ route('under-construction') }}" :active="request()->routeIs('under-construction')">
            <x-fas-shopping-basket class="w-4 h-4"/>
        </x-nav-link>
        {{-- dropdown navigation--}}
        <x-dropdown align="right" width="48">
            {{-- avatar --}}
            <x-slot name="trigger">
                <img class="rounded-full h-8 w-8 cursor-pointer"
                     src="https://ui-avatars.com/api/?name=Vinyl+Shop"
                     alt="Vinyl Shop">
            </x-slot>
            <x-slot name="content">
                {{-- all users --}}
                <div class="block px-4 py-2 text-xs text-gray-400">My Name</div>
                <x-dropdown-link href="{{ route('under-construction') }}">Dashboard</x-dropdown-link>
                <x-dropdown-link href="{{ route('profile.show') }}">Update Profile</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Order history</x-dropdown-link>
                <div class="border-t border-gray-100"></div>
                <x-dropdown-link href="{{ route('under-construction') }}">Logout</x-dropdown-link>
                <div class="border-t border-gray-100"></div>
                {{-- admins only --}}
                <div class="block px-4 py-2 text-xs text-gray-400">Admin</div>
                <x-dropdown-link href="{{ route('under-construction') }}">Genres</x-dropdown-link>
                <x-dropdown-link href="{{ route('admin.records') }}">Records</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Covers</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Users</x-dropdown-link>
                <x-dropdown-link href="{{ route('under-construction') }}">Orders</x-dropdown-link>
            </x-slot>
        </x-dropdown>
    </div>
</nav>

Layout component: part 2

Footer component

x-cloak

Navbar component

Under Construction page

Update the navbar

Layout component: part 2 ​

Footer component ​

x-cloak ​

Navbar component ​

Under Construction page ​

Update the navbar ​

Layout component: part 2

Footer component

x-cloak

Navbar component

Under Construction page

Update the navbar