Layout component: part 2

PODCAST

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

Footer component

• 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 forMailpit (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 42: 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

<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-16 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="_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/11.x/"
                                      icon="si-laravel"/>             
                <x-layout.footer-icon target="_tall"
                                      href="https://livewire.laravel.com/docs"
                                      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)

<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-16 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>

Navbar component

• 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

<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 mt-8">
        <div class="hidden md:flex md:flex-row-reverse md:border-r-2 md:border-gray-300">
            <x-heroicon-s-face-frown class="size-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>
                    <a href="{{ route('home') }}">Home</a>
                </x-button>
                <x-button>
                    <a href="#" onclick="window.history.back();">Back</a>
                </x-button>
            </div>
        </div>
    </div>
</x-vinylshop-layout>

Update the navbar

• 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

<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('dashboard') }}">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>