From 19cc712dd11df3e8884c34116f899705210abbc8 Mon Sep 17 00:00:00 2001
From: thejmitchener <joshua@fuelviews.com>
Date: Mon, 15 Jul 2024 22:39:14 -0400
Subject: [PATCH] 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.

---
 README.md                                     |   2 +-
 config/navigation.php                         |  11 +-
 .../desktop/desktop-navigation-link.blade.php |   4 +-
 .../views/components/dropdown-link.blade.php  |   4 +-
 .../components/hamburger-button.blade.php     |   6 +-
 resources/views/components/logo.blade.php     |  21 +---
 .../mobile/mobile-dropdown.blade.php          |   8 +-
 .../components/navigation-scroll.blade.php    |  21 ++--
 .../views/components/navigation.blade.php     | 102 +++++++++---------
 .../views/components/phone-button.blade.php   |   2 +-
 src/Navigation.php                            |  12 +++
 11 files changed, 101 insertions(+), 92 deletions(-)

diff --git a/README.md b/README.md
index b47cfab..76b140c 100644
--- 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
index d4663e2..b91624e 100644
--- 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
index 783d015..999a798 100644
--- 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
index 42ebaf0..9e51c0c 100644
--- 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
index 80dd7c0..532ed6d 100644
--- 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
index b1fb16b..71d93bc 100644
--- 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
index 7d46d53..d4bc311 100644
--- 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
index 9a9cf57..2cab23c 100644
--- 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
index 3819bd3..d53ebd1 100644
--- 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
index f67dbc6..1cbb449 100644
--- 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
index 59738ee..e89a2fb 100755
--- 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';
+    }
 }