Add footer and social (#21)

* Add Footer component. * Refactored footer.blade.php to dynamically display social media links and legal links based on the current route.
fuelviews · Oct 14, 2024 · f11f3f6 · f11f3f6
1 parent 8192fac
commit f11f3f6
Show file tree

Hide file tree

Showing 24 changed files with 401 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -90,6 +90,12 @@ Optionally, you can publish the views using:
 php artisan vendor:publish --tag="navigation-views"
 ```
 
+Optionally, you can publish the footer views using:
+
+```bash
+php artisan vendor:publish --tag="navigation-footer-views"
+```
+
 Optionally, you can publish the spacer view using:
 
 ```bash

diff --git a/config/navigation.php b/config/navigation.php
@@ -49,4 +49,7 @@
     'top_nav_enabled' => false,
     'logo_swap_enabled' => true,
     'transparent_nav_background' => true,
+
+    //footer stuff, needs to be moved to navigation config
+    'logo_shape' => 'horizontal', // Can be 'horizontal', 'vertical', or 'square'
 ];
diff --git a/resources/views/components/desktop/desktop-dropdown-button.blade.php b/resources/views/components/desktop/desktop-dropdown-button.blade.php
@@ -1,6 +1,8 @@
-<button class="flex items-center text-sm leading-5 font-medium hover:text-gray-400 focus:outline-none transition ease-in-out duration-150 uppercase">
-    <div class="{{ Navigation::isDropdownRouteActive($links) ? 'border-prime-400' : 'border-transparent' }} border-b-2 hover:border-gray-300 hover:border-b-2 py-2">
+<button
+    class="flex items-center text-sm leading-5 font-medium hover:text-gray-400 focus:outline-none transition ease-in-out duration-150 uppercase">
+    <div
+        class="{{ Navigation::isDropdownRouteActive($links) ? 'border-prime-400' : 'border-transparent' }} border-b-2 hover:border-gray-300 hover:border-b-2 py-2">
         {{ $name }}
     </div>
-    <x-navigation::dropdown-icon />
+    <x-navigation::dropdown-icon/>
 </button>
diff --git a/resources/views/components/desktop/desktop-dropdown.blade.php b/resources/views/components/desktop/desktop-dropdown.blade.php
@@ -37,7 +37,9 @@
             : 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out rounded-md';
 @endphp
 
-<div class="relative uppercase" x-data="{ open: false, manualToggle: false }" @click.outside="open = false; manualToggle = false" @close.stop="open = false; manualToggle = false" @mouseenter="open = true" @mouseleave="open = manualToggle ? open : false">
+<div class="relative uppercase" x-data="{ open: false, manualToggle: false }"
+     @click.outside="open = false; manualToggle = false" @close.stop="open = false; manualToggle = false"
+     @mouseenter="open = true" @mouseleave="open = manualToggle ? open : false">
     <div @click="manualToggle = !manualToggle; open = manualToggle">
         {{ $trigger }}
     </div>

diff --git a/resources/views/components/desktop/desktop-navigation.blade.php b/resources/views/components/desktop/desktop-navigation.blade.php
@@ -1,18 +1,20 @@
 @foreach(Navigation::getNavigationItems() as $item)
     @if($item['type'] === 'link')
-        <x-navigation::desktop.desktop-navigation-link :href="route($item['route'])" :active="request()->routeIs($item['route'])">
+        <x-navigation::desktop.desktop-navigation-link :href="route($item['route'])"
+                                                       :active="request()->routeIs($item['route'])">
             {{ __($item['name']) }}
         </x-navigation::desktop.desktop-navigation-link>
     @elseif($item['type'] === 'dropdown')
         <div x-data="{ open: false }" class="hidden md:flex sm:items-center">
             <x-navigation::desktop.desktop-dropdown align="left">
                 <x-slot name="trigger">
-                    <x-navigation::desktop.desktop-dropdown-button :name="$item['name']" :links="$item['links']" />
+                    <x-navigation::desktop.desktop-dropdown-button :name="$item['name']" :links="$item['links']"/>
                 </x-slot>
 
                 <x-slot name="content" x-show="open">
                     @foreach($item['links'] as $link)
-                        <x-navigation::dropdown-link :href="route($link['route'])" :active="request()->routeIs($link['route'])">
+                        <x-navigation::dropdown-link :href="route($link['route'])"
+                                                     :active="request()->routeIs($link['route'])">
                             {{ __($link['name']) }}
                         </x-navigation::dropdown-link>
                     @endforeach

diff --git a/resources/views/components/dropdown-icon.blade.php b/resources/views/components/dropdown-icon.blade.php
@@ -5,8 +5,8 @@ class="inline-flex ml-1 mb-1 h-3 w-auto origin-center transform transition-trans
     fill="currentColor"
     height="1em"
     viewBox="0 0 512 512">
-    <path class="fa-primary" d="" />
+    <path class="fa-primary" d=""/>
     <path
         class="fa-secondary"
-        d="M278.6 406.6c-12.5 12.5-32.8 12.5-45.3 0l-192-192c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L256 338.7 425.4 169.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-192 192z" />
+        d="M278.6 406.6c-12.5 12.5-32.8 12.5-45.3 0l-192-192c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L256 338.7 425.4 169.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-192 192z"/>
 </svg>
diff --git a/resources/views/components/footer/footer-navigation-link.blade.php b/resources/views/components/footer/footer-navigation-link.blade.php
@@ -0,0 +1,11 @@
+@props(['active'])
+
+@php
+    $classes = ($active ?? false)
+        ? 'text-sm font-medium leading-5 hover:text-gray-400 underline underline-2 underline-offset-8 decoration-prime-400 hover:decoration-gray-300 focus:outline-none focus:text-gray-700 transition duration-150 ease-in-out py-2 uppercase'
+        : 'text-sm font-medium leading-5 hover:text-gray-400 hover:underline hover:underline-2 hover:underline-offset-8 hover:decoration-gray-300 focus:outline-none focus:text-gray-700 transition duration-150 ease-in-out py-2 uppercase';
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</a>
diff --git a/resources/views/components/footer/footer.blade.php b/resources/views/components/footer/footer.blade.php
@@ -0,0 +1,153 @@
+<div>
+    @php
+        /* social media accounts */
+        if (config('businessinfo.social_media') !== null) {
+            $socialMedia = config('businessinfo.social_media');
+        }
+
+        $logoShape = Navigation::getLogoShape();
+        $logoClasses = '';
+        if ($logoShape === 'horizontal') {
+            $logoClasses = 'mx-auto w-64 lg:w-72';
+        } elseif ($logoShape === 'vertical') {
+            $logoClasses = 'mx-auto w-32 lg:w-48';
+        } elseif ($logoShape === 'square') {
+            $logoClasses = 'mx-auto w-48 lg:w-64';
+        }
+    @endphp
+
+    <footer class="bg-footer-back">
+        <!-- this is important -->
+        <div class="mx-auto max-w-waistline px-4 pb-6 pt-16 sm:px-6 lg:px-3 lg:pt-24">
+            <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+                <div>
+                    <div class="flex justify-start text-footer-type">
+                        @if (Navigation::isLogoSwapEnabled() && Navigation::isTransparentNavBackground())
+                            <img
+                                    {{ glide()->src(Navigation::getTransparencyLogo()) }}
+                                    class="{{ $logoClasses }}"
+                                    alt="{{ config('app.name') }}"
+                            />
+                        @else
+                            <img
+                                    {{ glide()->src(Navigation::getDefaultLogo()) }}
+                                    class="{{ $logoClasses }}"
+                                    alt="{{ config('app.name') }}"
+                            />
+                        @endif
+                    </div>
+
+                    <div class="mx-auto flex justify-center gap-x-9 pt-16 lg:pt-8">
+                        @isset($socialMedia)
+                            <x-navigation::social.youtube :socialMedia="$socialMedia['youtube']" />
+                            <x-navigation::social.facebook :socialMedia="$socialMedia['facebook']" />
+                            <x-navigation::social.instagram :socialMedia="$socialMedia['instagram']" />
+                            <x-navigation::social.xitter :socialMedia="$socialMedia['xitter']" />
+                            <x-navigation::social.linkedin :socialMedia="$socialMedia['linkedin']" />
+                            <x-navigation::social.tiktok :socialMedia="$socialMedia['tiktok']" />
+                        @endisset
+                    </div>
+                </div>
+
+                <div>
+                    <p class="mx-auto mt-4 max-w-md text-center leading-relaxed text-footer-type">
+                        @if (config('businessinfo.elevator-pitch') !== null)
+                            {{ config('businessinfo.elevator-pitch') }}
+                        @endif
+                    </p>
+
+                    <div class="flex">
+                        <div
+                                class="mx-auto flex flex-col justify-center gap-6 pt-6 md:flex-row lg:flex-col xl:flex-row"
+                        >
+                            <x-navigation::free-estimate-button />
+                            <x-navigation::phone-button />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div
+                    class="flex flex-col justify-center md:flex-row md:justify-between md:flex-wrap py-6 md:py-12 text-footer-type gap-8">
+                <!-- Column 1: Menu (Non-Dropdown Links) -->
+                <div class="flex flex-col items-center md:items-start">
+                    <p class="font-bold text-xl mt-8 mb-4 md:my-4 pb-2 border-b border-gray-400/75">{{ __('Menu') }}</p>
+                    @foreach (Navigation::getNavigationItems() as $item)
+                        @if ($item['type'] === 'link')
+                            <!-- Non-Dropdown Links -->
+                            <x-navigation::footer.footer-navigation-link :href="route($item['route'])"
+                                                                         :active="request()->routeIs($item['route'])">
+                                {{ __($item['name']) }}
+                            </x-navigation::footer.footer-navigation-link>
+                        @endif
+                    @endforeach
+                </div>
+
+                @foreach (Navigation::getNavigationItems() as $item)
+                    <!-- Render Dropdowns (e.g., Locations, Services) -->
+                    @if ($item['type'] === 'dropdown')
+                        <div class="flex flex-col items-center md:items-start">
+                            <p class="font-bold text-xl mt-8 mb-4 md:my-4 pb-2 border-b border-gray-400/75">{{ __($item['name']) }}</p>
+                            @foreach ($item['links'] as $link)
+                                <x-navigation::footer.footer-navigation-link :href="route($link['route'])"
+                                                                             :active="request()->routeIs($link['route'])">
+                                    {{ __($link['name']) }}
+                                </x-navigation::footer.footer-navigation-link>
+                            @endforeach
+                        </div>
+                    @endif
+                @endforeach
+            </div>
+
+            <div class="mt-6 border-t border-legal-type pt-6">
+                <div class="text-center sm:flex sm:justify-between sm:text-left text-gray-400/75">
+                    <p class="text-sm text-legal-type">
+                        <span class="block sm:inline text-gray-400/75">
+                            All rights reserved
+                            <span>&middot;</span>
+                        </span>
+
+                        @if(Route::is('terms-and-conditions'))
+                            <a class="inline-block text-legal-link underline transition hover:text-legal-link/75"
+                               href="{{ route('terms-and-conditions') }}"
+                               title="Terms & Conditions"
+                            >
+                                Terms & Conditions
+                            </a>
+
+                            <span>&middot;</span>
+                        @endif
+
+                        @if(Route::is('privacy-policy'))
+                            <a class="inline-block text-legal-link underline transition hover:text-legal-link/75"
+                               href="{{ route('privacy-policy') }}"
+                               title="Privacy Policy"
+                            >
+                                Privacy Policy
+                            </a>
+
+                            <span>&middot;</span>
+                        @endif
+
+
+                        @if(Route::is('sitemap'))
+                            <a class="inline-block text-legal-link underline transition hover:text-legal-link/75"
+                               href="{{ route('sitemap') }}"
+                               title="Sitemap"
+                            >
+                                Sitemap
+                            </a>
+                        @endif
+                    </p>
+
+                    <p class="mt-4 text-sm sm:order-first sm:mt-0">
+                        &copy; {{ date('Y') }}
+                        @if (config('businessinfo.legal-name') !== null)
+                            {{ config('businessinfo.legal-name') }}
+                        @endif
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+</div>
diff --git a/resources/views/components/free-estimate-button.blade.php b/resources/views/components/free-estimate-button.blade.php
@@ -1,8 +1,11 @@
-<button @click="open = !open" onclick="Livewire.dispatch('openModal')" class="font-brand flex rounded-md bg-alt px-2 py-2 text-md md:text-lg font-bold text-white hover:bg-cta hover:text-black break-keep text-nowrap">
+<button @click="open = !open" onclick="Livewire.dispatch('openModal')"
+        class="font-brand flex rounded-md bg-alt px-2 py-2 text-md md:text-lg font-bold text-white hover:bg-cta hover:text-black break-keep text-nowrap">
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
          class="my-auto mr-2"
          height="1.2em"
-         viewBox="0 0 384 512"><path d="M145.5 68c5.3-20.7 24.1-36 46.5-36s41.2 15.3 46.5 36l3.1 12H254h34v48H192 96V80h34 12.4l3.1-12zM192 0c-32.8 0-61 19.8-73.3 48H80 64V64 80H32 0v32V480v32H32 352h32V480 112 80H352 320V64 48H304 265.3C253 19.8 224.8 0 192 0zM320 144V112h32V480H32V112H64v32 16H80 192 304h16V144zM208 80a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm91.3 171.3L310.6 240 288 217.4l-11.3 11.3L160 345.4l-52.7-52.7L96 281.4 73.4 304l11.3 11.3 64 64L160 390.6l11.3-11.3 128-128z"/>
+         viewBox="0 0 384 512">
+        <path
+            d="M145.5 68c5.3-20.7 24.1-36 46.5-36s41.2 15.3 46.5 36l3.1 12H254h34v48H192 96V80h34 12.4l3.1-12zM192 0c-32.8 0-61 19.8-73.3 48H80 64V64 80H32 0v32V480v32H32 352h32V480 112 80H352 320V64 48H304 265.3C253 19.8 224.8 0 192 0zM320 144V112h32V480H32V112H64v32 16H80 192 304h16V144zM208 80a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm91.3 171.3L310.6 240 288 217.4l-11.3 11.3L160 345.4l-52.7-52.7L96 281.4 73.4 304l11.3 11.3 64 64L160 390.6l11.3-11.3 128-128z"/>
     </svg>
     Free Estimate
 </button>
diff --git a/resources/views/components/hamburger-button.blade.php b/resources/views/components/hamburger-button.blade.php
@@ -1,6 +1,9 @@
-<button @click="dropdownOpen = !dropdownOpen" class="inline-flex items-center justify-center rounded-standard text-gray-900 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+<button @click="dropdownOpen = !dropdownOpen"
+        class="inline-flex items-center justify-center rounded-standard text-gray-900 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
     <svg class="h-9 w-9" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-        <path :class="{'hidden': dropdownOpen, 'inline-flex': ! dropdownOpen }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        <path :class="{'hidden': !dropdownOpen, 'inline-flex': dropdownOpen }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        <path :class="{'hidden': dropdownOpen, 'inline-flex': ! dropdownOpen }" class="inline-flex"
+              stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+        <path :class="{'hidden': !dropdownOpen, 'inline-flex': dropdownOpen }" class="hidden" stroke-linecap="round"
+              stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
     </svg>
 </button>
diff --git a/resources/views/components/logo.blade.php b/resources/views/components/logo.blade.php
@@ -4,10 +4,17 @@
             {{ config('app.name') }}
         </span>
         @if(Navigation::isLogoSwapEnabled() && Navigation::isTransparentNavBackground())
-            <img x-show="!scrolled" {{ glide()->src(Navigation::getTransparencyLogo(), 1000, lazy: false) }} loading="eager" class="{{ $attributes->get('logoClass', 'w-36 md:w-64 h-auto my-auto') }}" alt="{{ $attributes->get('alt', config('app.name')) }}" />
-            <img x-show="scrolled" {{ glide()->src(Navigation::getDefaultLogo(), 1000, lazy: false) }} loading="eager" class="{{ $attributes->get('logoClass', 'w-36 md:w-64 h-auto my-auto') }}" alt="{{ $attributes->get('alt', config('app.name')) }}" />
+            <img x-show="!scrolled"
+                 {{ glide()->src(Navigation::getTransparencyLogo(), 1000, lazy: false) }} loading="eager"
+                 class="{{ $attributes->get('logoClass', 'w-36 md:w-64 h-auto my-auto') }}"
+                 alt="{{ $attributes->get('alt', config('app.name')) }}"/>
+            <img x-show="scrolled" {{ glide()->src(Navigation::getDefaultLogo(), 1000, lazy: false) }} loading="eager"
+                 class="{{ $attributes->get('logoClass', 'w-36 md:w-64 h-auto my-auto') }}"
+                 alt="{{ $attributes->get('alt', config('app.name')) }}"/>
         @else
-            <img {{ glide()->src(Navigation::getDefaultLogo(), 1000, lazy: false) }} loading="eager" class="{{ $attributes->get('logoClass', 'w-36 md:w-64 h-auto my-auto') }}" alt="{{ $attributes->get('alt', config('app.name')) }}" />
+            <img {{ glide()->src(Navigation::getDefaultLogo(), 1000, lazy: false) }} loading="eager"
+                 class="{{ $attributes->get('logoClass', 'w-36 md:w-64 h-auto my-auto') }}"
+                 alt="{{ $attributes->get('alt', config('app.name')) }}"/>
         @endif
     </a>
 </div>
diff --git a/resources/views/components/mobile/mobile-dropdown.blade.php b/resources/views/components/mobile/mobile-dropdown.blade.php
@@ -7,10 +7,11 @@
 @endphp
 
 <div x-data="{ dropdownOpen: false }" class="relative w-full">
-    <a @click="dropdownOpen = !dropdownOpen" @click.outside="dropdownOpen = false; manualToggle = false" class="w-full text-left flex items-center justify-start cursor-pointer">
+    <a @click="dropdownOpen = !dropdownOpen" @click.outside="dropdownOpen = false; manualToggle = false"
+       class="w-full text-left flex items-center justify-start cursor-pointer">
         <button {{ $attributes->merge(['class' => $classes]) }}>
             {{ $name }}
-            <x-navigation::dropdown-icon />
+            <x-navigation::dropdown-icon/>
         </button>
     </a>
 

diff --git a/resources/views/components/mobile/mobile-navigation.blade.php b/resources/views/components/mobile/mobile-navigation.blade.php
@@ -3,9 +3,11 @@
 <nav>
     @foreach(Navigation::getNavigationItems() as $index => $item)
         @if($item['type'] === 'link')
-            <x-navigation::mobile.mobile-navigation-link :href="route($item['route'])" :active="request()->routeIs($item['route'])" :bgClass="$bgClass($index)">
+            <x-navigation::mobile.mobile-navigation-link :href="route($item['route'])"
+                                                         :active="request()->routeIs($item['route'])"
+                                                         :bgClass="$bgClass($index)">
                 {{ __($item['name']) }}
-            </x-navigation::mobile.mobile-navigation-link >
+            </x-navigation::mobile.mobile-navigation-link>
         @elseif($item['type'] === 'dropdown' && array_key_exists('links', $item))
             <x-navigation::mobile.mobile-dropdown
                 :name="$item['name']"
@@ -14,5 +16,5 @@
                 :bgClass="$bgClass($index)"
             />
         @endif
-    @endforeach∂
+    @endforeach
 </nav>