Merge pull request #15 from fuelviews/update-nav-func

Add laravel-forms to tailwind.config.js file, update phone config, update classes in blade files, update logo images, update navigation scroll behavior, update phone button behavior, add pre scrolled routes.
fuelviews · Jul 16, 2024 · 864f4f5 · 864f4f5
2 parents ddc5865 + 71cdf9e
commit 864f4f5
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -96,7 +96,7 @@ Add laravel-forms to your tailwind.config.js file:
 
 ```javascript
     content: [
-        './vendor/fuelviews/laravel-navigation/resources/**/*.{js,vue,blade.php}',
+        './vendor/fuelviews/laravel-*/resources/**/*.{js,vue,blade.php}',
     ]
 ```
 

diff --git a/config/navigation.php b/config/navigation.php
@@ -31,13 +31,18 @@
         ],
     ],
 
+    // pre scrolled routes
+    'pre_scrolled_routes' => [
+        // 'welcome',
+    ],
+
+    // phone config
+    'phone' => config('businessinfo.phone') ?: '(666) 666-6666',
+
     // logo config
     'default_logo' => 'images/logo.png',
     'transparency_logo' => 'images/logo.png',
 
-    // phone config
-    'phone' => '(666) 420-6969',
-
     // navigation config
     'top_nav_enabled' => false,
     'logo_swap_enabled' => true,

diff --git a/resources/views/components/desktop/desktop-navigation-link.blade.php b/resources/views/components/desktop/desktop-navigation-link.blade.php
@@ -2,8 +2,8 @@
 
 @php
     $classes = ($active ?? false)
-                ? 'inline-flex items-center border-b-2 border-prime-400 text-sm font-medium leading-5 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out py-2 uppercase'
-                : 'inline-flex items-center border-b-2 border-transparent text-sm font-medium leading-5 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out py-2 uppercase';
+        ? 'inline-flex items-center border-b-2 border-prime-400 text-sm font-medium leading-5 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out py-2 uppercase'
+        : 'inline-flex items-center border-b-2 border-transparent text-sm font-medium leading-5 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out py-2 uppercase';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>

diff --git a/resources/views/components/dropdown-link.blade.php b/resources/views/components/dropdown-link.blade.php
@@ -2,8 +2,8 @@
 
 @php
     $classes = ($active ?? false)
-        ? "block pl-4 px-4 py-2 border-l-4 text-sm border-prime-400 text-base font-medium text-gray-700 bg-gray-50 focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-700 transition duration-150 ease-in-out"
-        : "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 odd:bg-slate-100";
+        ? "block pl-4 px-4 py-2 border-l-4 text-sm border-prime-400 text-base font-medium text-gray-700 bg-gray-50 focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-700 transition duration-150 ease-in-out first:rounded-tr-lg last:rounded-br-lg"
+        : "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 odd:bg-slate-100 first:rounded-t-lg last:rounded-b-lg";
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>

diff --git a/resources/views/components/hamburger-button.blade.php b/resources/views/components/hamburger-button.blade.php
@@ -1,6 +1,6 @@
-<button @click="open = ! open" class="inline-flex items-center justify-center rounded-md 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': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        <path :class="{'hidden': ! open, 'inline-flex': open }" 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
@@ -1,26 +1,13 @@
-<div {{ $attributes->only(['class']) }}
-    x-data="{ scrolled: false }"
-    x-init="
-        scrolled = window.pageYOffset > window.innerHeight * 0.05;
-        window.addEventListener('scroll', () => {
-            scrolled = window.pageYOffset > window.innerHeight * 0.05;
-        });
-    ">
+<div {{ $attributes->only(['class']) }}>
     <a href="{{ config('app.url') }}">
         <span class="sr-only">
             {{ config('app.name') }}
         </span>
         @if(Navigation::isLogoSwapEnabled() && Navigation::isTransparentNavBackground())
-            <template x-if="!scrolled">
-                <img {{ glide()->src(Navigation::getTransparencyLogo(), lazy: false) }} loading="eager" class="{{ $attributes->get('logoClass', 'w-24 lg:w-28 h-auto my-auto') }}" alt="{{ $attributes->get('alt', config('app.name')) }}" />
-            </template>
-            <template x-if="scrolled">
-                <img {{ glide()->src(Navigation::getDefaultLogo()) }} loading="eager" class="{{ $attributes->get('logoClass', 'w-24 lg:w-28 h-auto my-auto') }}" alt="{{ $attributes->get('alt', config('app.name')) }}" />
-            </template>
+            <img x-show="!scrolled" {{ glide()->src(Navigation::getTransparencyLogo(), 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(), 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
-            <template x-if="true">
-            <img {{ glide()->src(Navigation::getDefaultLogo(), lazy: false) }} loading="eager" class="{{ $attributes->get('logoClass', 'w-24 lg:w-28 h-auto my-auto') }}" alt="{{ $attributes->get('alt', config('app.name')) }}" />
-            </template>
+            <img {{ glide()->src(Navigation::getDefaultLogo(), 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
@@ -6,21 +6,19 @@
         : "block w-full ps-3 pe-4 py-2 text-start text-base font-medium text-gray-900 hover:text-gray-700 hover:border-prime-400 focus:outline-none focus:text-gray-800 focus:bg-gray-50 hover:bg-slate-200 focus:border-gray-400 transition duration-150 ease-in-out border-l-4 $bgClass";
 @endphp
 
-<div x-data="{ open: false }" class="relative w-full">
-    <a @click="open = !open" @click.outside="open = false; manualToggle = false" class="w-full text-left flex items-center justify-start cursor-pointer">
+<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">
         <button {{ $attributes->merge(['class' => $classes]) }}>
             {{ $name }}
             <x-navigation::dropdown-icon />
         </button>
     </a>
 
-    <div x-show="open" x-transition class="w-full lg:mt-2">
+    <div x-show="dropdownOpen" x-transition class="w-full lg:mt-2">
         @foreach($links as $link)
             <x-navigation::dropdown-link :href="route($link['route'])" :active="request()->routeIs($link['route'])">
                 {{ __($link['name']) }}
             </x-navigation::dropdown-link>
         @endforeach
     </div>
-
-
 </div>
diff --git a/resources/views/components/navigation-scroll.blade.php b/resources/views/components/navigation-scroll.blade.php
@@ -1,10 +1,19 @@
-<nav x-data="{ open: false, scrolled: false, showEstimate: false, isMobile: window.innerWidth < 640, transparentNav: {{ config('navigation.transparent_nav_background') ? 'true' : 'false' }} }"
+<nav x-data="{
+        open: false,
+        dropdownOpen: false,
+        scrolled: {{ Navigation::getPreScrolledRoute() }},
+        showEstimate: false,
+        isMobile: window.innerWidth < 640,
+        transparentNav: {{  Navigation::isTransparentNavBackground() ? 'true' : 'false' }}
+    }"
      x-init="
         if (transparentNav) {
-            scrolled = (window.scrollY > window.innerHeight * 0.05);
+            scrolled = (window.scrollY > window.innerHeight * 0.05) || {{ Navigation::getPreScrolledRoute() }};
             showEstimate = (window.scrollY > window.innerHeight * 0.25);
             window.addEventListener('scroll', () => {
-                scrolled = (window.scrollY > window.innerHeight * 0.05);
+                if (!{{ Navigation::getPreScrolledRoute() }}) {
+                    scrolled = (window.scrollY > window.innerHeight * 0.05);
+                }
                 showEstimate = (window.scrollY > window.innerHeight * 0.25);
             });
         }
@@ -14,10 +23,10 @@
         });
      "
      :class="{
-         'bg-white text-gray-700': scrolled && transparentNav,
-         '{{ Navigation::isTransparentNavBackground() ? 'bg-transparent text-white' : 'bg-white text-gray-700' }}': !scrolled || !transparentNav
+         'bg-white text-gray-700': scrolled || {{ Navigation::getPreScrolledRoute() }},
+         '{{ Navigation::isTransparentNavBackground() ? 'bg-transparent text-white' : 'bg-white text-gray-700' }}': !scrolled && !{{ Navigation::getPreScrolledRoute() }}
      }"
-     class="bg-white duration-600 fixed inset-x-0 top-0 z-40 drop-shadow-2xl transition-all"
+     class="duration-600 fixed inset-x-0 top-0 z-40 drop-shadow-2xl transition-all"
      x-cloak
      x-transition>
 

diff --git a/resources/views/components/navigation.blade.php b/resources/views/components/navigation.blade.php
@@ -1,56 +1,54 @@
 <!-- Navigation Scroll/Transparency -->
 <x-navigation::navigation-scroll :isTransparent="Navigation::isTransparentNavBackground()">
 
-    <!-- Top Nav Bar (Shows on Mobile) -->
-    <x-navigation::top-bar align="center" />
-
-    <!-- Responsive/Desktop Navigation Menu -->
-    <div class="max-w-7xl mx-auto px-2 lg:px-4 py-2 lg:py-4">
-        <div class="flex justify-between items-center">
-
-            <!-- Logo (Shows on Mobile) -->
-            <div class="shrink-0 flex items-center">
-                <x-navigation::logo />
-            </div>
-
-            <!-- Desktop Navigation -->
-            <div class="md:flex md:flex-col md:items-end md:justify-between">
-                <div class="hidden md:flex md:flex-row md:space-x-4 md:order-2">
-                    <x-navigation::desktop.desktop-navigation />
-                </div>
-
-                <!-- Responsive/Desktop CTA Buttons -->
-                <div class="flex items-center space-x-4 justify-end md:order-1 md:pb-2">
-                    <template x-if="!isMobile || !showEstimate">
-                        <x-navigation::phone-button />
-                    </template>
-                    <template x-if="!isMobile || showEstimate">
-                        <x-navigation::free-estimate-button />
-                    </template>
-                </div>
-            </div>
-
-            <!-- Hamburger (Shows on Mobile) -->
-            <div class="flex items-center md:hidden space-x-4">
-                <button @click="open = !open">
-                    <x-navigation::hamburger-button />
-                </button>
-            </div>
-        </div>
-
-        <!-- Mobile Navigation Menu -->
-        <div x-show="open" @click.away="open = false" class="md:hidden bg-white overflow-y-auto max-h-screen -mx-2 mt-2">
-
-
-            <div class="border-t border-gray-300">
-                <x-navigation::mobile.mobile-navigation />
-
-                <!-- Mobile CTA Buttons -->
-                <div class="ml-2 py-4 space-y-4">
-                    <x-navigation::phone-button />
-                    <x-navigation::free-estimate-button />
-                </div>
-            </div>
-        </div>
-    </div>
+<!-- Top Nav Bar (Shows on Mobile) -->
+<x-navigation::top-bar align="center" />
+
+<!-- Responsive/Desktop Navigation Menu -->
+<div class="max-w-standard mx-auto px-2 lg:px-4 py-2 lg:py-4">
+<div class="flex justify-between items-center">
+
+<!-- Logo (Shows on Mobile) -->
+<div class="shrink-0 flex items-center">
+<x-navigation::logo />
+</div>
+
+<!-- Desktop Navigation -->
+<div class="md:flex md:flex-col md:items-end md:justify-between">
+<div class="hidden md:flex md:flex-row md:space-x-4 md:order-2">
+<x-navigation::desktop.desktop-navigation />
+</div>
+
+<!-- Responsive/Desktop CTA Buttons -->
+<div class="flex items-center space-x-4 justify-end md:order-1 md:pb-2">
+<template x-if="!isMobile || !showEstimate">
+<x-navigation::phone-button />
+</template>
+<template x-if="!isMobile || showEstimate">
+<x-navigation::free-estimate-button />
+</template>
+</div>
+</div>
+
+<!-- Hamburger (Shows on Mobile) -->
+<div class="flex items-center md:hidden space-x-4">
+<button @click="dropdownOpen = ! dropdownOpen">
+<x-navigation::hamburger-button />
+</button>
+</div>
+</div>
+
+<!-- Mobile Navigation Menu -->
+<div x-show="dropdownOpen" @click.away="dropdownOpen = false" class="md:hidden bg-white overflow-y-auto max-h-screen -mx-2 mt-2">
+<div class="border-t border-gray-300">
+<x-navigation::mobile.mobile-navigation />
+
+<!-- Mobile CTA Buttons -->
+<div class="ml-2 py-4 space-y-4">
+<x-navigation::phone-button />
+<x-navigation::free-estimate-button />
+</div>
+</div>
+</div>
+</div>
 </x-navigation::navigation-scroll>
diff --git a/resources/views/components/phone-button.blade.php b/resources/views/components/phone-button.blade.php
@@ -1,5 +1,5 @@
 <div>
-    <a href="tel:{{ Navigation::getPhone() }}" @click="open = !open">
+    <a href="tel:{{ Navigation::getPhone() }}">
         @if (request()->query('gclid') || request()->cookie('gclid') || session('gclid'))
             <button class="font-brand flex rounded-md bg-prime px-2 py-2 text-md md:text-lg font-bold text-white hover:bg-cta hover:text-black break-keep text-nowrap" onclick="dataLayer.push({'event': 'Phone_Call_Gclid'});">
         @else

diff --git a/src/Navigation.php b/src/Navigation.php
@@ -2,6 +2,8 @@
 
 namespace Fuelviews\Navigation;
 
+use Illuminate\Support\Facades\Route;
+
 class Navigation
 {
     public function getNavigationItems()
@@ -44,4 +46,14 @@ public function isTransparentNavBackground()
     {
         return config('navigation.transparent_nav_background');
     }
+
+    public function isPreScrolledRoute(): bool
+    {
+        return in_array(Route::currentRouteName(), config('navigation.pre_scrolled_routes', []), true);
+    }
+
+    public function getPreScrolledRoute(): string
+    {
+        return $this->isPreScrolledRoute() ? 'true' : 'false';
+    }
 }