✨ Enhance navigation components with reduced motion support and add new indicator component

HassanZahirnia · HassanZahirnia · commit d4eb265e608e · 2025-03-30T14:21:11.000+03:30
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -32,6 +32,7 @@ import {
     stagger,
     cubicBezier,
 } from 'motion'
+import.meta.glob(['../images/**', '../svg/**'])
 
 // Swiper
 Swiper.use([Navigation, Pagination])
@@ -43,9 +44,6 @@ window.rive = rive
 // AutoAnimate
 window.autoAnimate = autoAnimate
 
-// Asset loading
-import.meta.glob(['../images/**', '../svg/**'])
-
 // GSAP
 gsap.registerPlugin(ScrollTrigger)
 window.ScrollTrigger = ScrollTrigger
diff --git a/resources/views/components/icons/nexus-flower.blade.php b/resources/views/components/icons/nexus-flower.blade.php
@@ -0,0 +1,45 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 200 200"
+    fill="none"
+>
+    <mask
+        id="mask0_2_12"
+        style="mask-type: luminance"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="200"
+        height="200"
+    >
+        <path
+            d="M200 0H0V200H200V0Z"
+            fill="white"
+        />
+    </mask>
+    <g mask="url(#mask0_2_12)">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M100.387 91.8532C96.2415 40.435 53.2 0 0.71429 0C0.71429 52.2424 40.7753 95.1281 91.8532 99.6128C40.435 103.758 2.29422e-06 146.8 0 199.286C52.2424 199.286 95.1281 159.225 99.6128 108.147C103.758 159.565 146.8 200 199.286 200C199.286 147.758 159.225 104.872 108.147 100.387C159.565 96.2416 200 53.2 200 0.714286C147.758 0.714283 104.872 40.7753 100.387 91.8532ZM99.9975 100.002L100.002 100.003L100.003 99.9975C100.001 99.9975 99.9975 99.9975 99.9975 99.9975V100.002Z"
+            fill="url(#paint0_linear_2_12)"
+        />
+    </g>
+    <defs>
+        <linearGradient
+            id="paint0_linear_2_12"
+            x1="177"
+            y1="-1.10731e-05"
+            x2="39.5"
+            y2="152.5"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#E7E9FF" />
+            <stop
+                offset="1"
+                stop-color="#B0B9FF"
+            />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/resources/views/components/nav.blade.php b/resources/views/components/nav.blade.php
@@ -1,54 +1,29 @@
 <nav
-    x-data
     x-ref="nav"
     x-init="
         () => {
             if (reducedMotion) return
-            const navTimeline = gsap
-                .timeline({
-                    paused: true,
-                })
-                .fromTo(
-                    $refs.nav.querySelectorAll('.gsap-fadein'),
-                    {
-                        autoAlpha: 0,
-                        y: -10,
-                    },
-                    {
-                        autoAlpha: 1,
-                        y: 0,
-                        duration: 0.5,
-                        stagger: 0.05,
-                    },
-                )
 
-            if ($refs.nav.querySelectorAll('.gsap-popout').length) {
-                navTimeline.fromTo(
-                    $refs.nav.querySelectorAll('.gsap-popout'),
+            motion.inView($el, (element) => {
+                motion.animate(
+                    $refAll('navItem'),
                     {
-                        autoAlpha: 0,
-                        y: -30,
-                        rotate: 360,
+                        y: [-10, 0],
+                        opacity: [0, 1],
                     },
                     {
-                        autoAlpha: 1,
-                        y: 0,
-                        rotate: -45,
-                        duration: 0.6,
-                        ease: 'back.out(1.5)',
+                        duration: 0.7,
+                        ease: motion.circOut,
+                        delay: motion.stagger(0.05),
                     },
-                    '<0.2',
                 )
-            }
-
-            navTimeline.play()
+            })
         }
     "
-    class="relative mx-auto flex max-w-8xl items-center justify-between overflow-x-clip px-8 py-10 sm:overflow-x-visible"
+    class="relative mx-auto flex max-w-8xl items-center justify-between overflow-x-clip px-8 pb-12 pt-5 sm:overflow-x-visible"
 >
     {{-- Mobile Menu Button --}}
     <button
-        x-data
         aria-controls="main-menu"
         aria-haspopup="true"
         x-on:click.prevent="$store.sidebar.isOpen = ! $store.sidebar.isOpen"
@@ -79,86 +54,113 @@ class="transition duration-300 hover:scale-110 lg:hidden"
     @endif
 
     {{-- Nav Links --}}
-    <div class="flex items-center justify-end gap-8 font-semibold sm:gap-14">
+    <div class="flex items-center justify-end gap-8 text-sm">
+        <a
+            href="{{ route('home') }}"
+            @class([
+                'group relative hidden text-evening transition duration-300 hover:opacity-100 motion-reduce:transition-none lg:block',
+                'opacity-80' => ! request()->routeIs('home*'),
+                'font-semibold' => request()->routeIs('home*'),
+            ])
+        >
+            <div
+                x-ref="navItem"
+                :class="{'opacity-0': !reducedMotion}"
+            >
+                Home
+            </div>
+
+            @if (request()->routeIs('home*'))
+                <x-nav.indicator />
+            @endif
+        </a>
+
         <a
             href="{{ route('docs') }}"
             @class([
-                'hidden transition duration-300 hover:opacity-100 focus:text-butter motion-reduce:transition-none lg:block',
+                'hidden transition duration-300 hover:opacity-100 motion-reduce:transition-none lg:block',
                 'text-evening opacity-80' => ! request()->routeIs('docs*'),
                 'text-butter' => request()->routeIs('docs*'),
             ])
         >
-            <div class="gsap-fadein">Documentation</div>
+            <div
+                x-ref="navItem"
+                :class="{'opacity-0': !reducedMotion}"
+            >
+                Documentation
+            </div>
         </a>
 
         <a
             href="{{ route('plugins') }}"
             @class([
-                'group/nav-link relative hidden text-evening transition duration-300 hover:opacity-100 focus:text-butter motion-reduce:transition-none lg:block',
+                'group relative hidden text-evening transition duration-300 hover:opacity-100 motion-reduce:transition-none lg:block',
                 'opacity-80' => ! request()->routeIs('plugins*'),
-                'font-bold' => request()->routeIs('plugins*'),
+                'font-semibold' => request()->routeIs('plugins*'),
             ])
         >
-            <div class="gsap-fadein">Plugins</div>
+            <div
+                x-ref="navItem"
+                :class="{'opacity-0': !reducedMotion}"
+            >
+                Plugins
+            </div>
 
             @if (request()->routeIs('plugins*'))
-                <div
-                    class="gsap-popout absolute -bottom-4 right-1/2 translate-x-1/2"
-                >
-                    <div
-                        class="h-2 w-2 bg-butter transition duration-300 group-hover/nav-link:rotate-90 group-hover/nav-link:bg-purple-400 motion-reduce:transition-none"
-                    ></div>
-                </div>
+                <x-nav.indicator />
             @endif
         </a>
 
         <a
             href="{{ route('articles') }}"
             @class([
-                'group/nav-link relative hidden text-evening transition duration-300 hover:opacity-100 focus:text-butter motion-reduce:transition-none lg:block',
+                'group relative hidden text-evening transition duration-300 hover:opacity-100 motion-reduce:transition-none lg:block',
                 'opacity-80' => ! request()->routeIs('articles*'),
-                'font-bold' => request()->routeIs('articles*'),
+                'font-semibold' => request()->routeIs('articles*'),
             ])
         >
-            <div class="gsap-fadein">Content</div>
+            <div
+                x-ref="navItem"
+                :class="{'opacity-0': !reducedMotion}"
+            >
+                Content
+            </div>
 
             @if (request()->routeIs('articles*'))
-                <div
-                    class="gsap-popout absolute -bottom-4 right-1/2 translate-x-1/2"
-                >
-                    <div
-                        class="h-2 w-2 bg-butter transition duration-300 group-hover/nav-link:rotate-90 group-hover/nav-link:bg-purple-400 motion-reduce:transition-none"
-                    ></div>
-                </div>
+                <x-nav.indicator />
             @endif
         </a>
 
         <a
             href="{{ route('consulting') }}"
             @class([
-                'group/nav-link relative hidden text-evening transition duration-300 hover:opacity-100 focus:text-butter motion-reduce:transition-none lg:block',
+                'group relative hidden text-evening transition duration-300 hover:opacity-100 motion-reduce:transition-none lg:block',
                 'opacity-80' => ! request()->routeIs('consulting*'),
-                'font-bold' => request()->routeIs('consulting*'),
+                'font-semibold' => request()->routeIs('consulting*'),
             ])
         >
-            <div class="gsap-fadein">Consulting</div>
+            <div
+                x-ref="navItem"
+                :class="{'opacity-0': !reducedMotion}"
+            >
+                Consulting
+            </div>
 
             @if (request()->routeIs('consulting*'))
-                <div
-                    class="gsap-popout absolute -bottom-4 right-1/2 translate-x-1/2"
-                >
-                    <div
-                        class="h-2 w-2 bg-butter transition duration-300 group-hover/nav-link:rotate-90 group-hover/nav-link:bg-purple-400 motion-reduce:transition-none"
-                    ></div>
-                </div>
+                <x-nav.indicator />
             @endif
         </a>
 
         <a
             href="https://shop.filamentphp.com"
-            class="group/nav-link relative hidden text-evening opacity-80 transition duration-300 hover:opacity-100 focus:text-butter motion-reduce:transition-none lg:block"
+            class="group relative hidden text-evening opacity-80 transition duration-300 hover:opacity-100 motion-reduce:transition-none lg:block"
         >
-            <div class="gsap-fadein">Shop</div>
+            <div
+                x-ref="navItem"
+                :class="{'opacity-0': !reducedMotion}"
+            >
+                Shop
+            </div>
         </a>
 
         {{-- Github --}}
@@ -169,7 +171,10 @@ class="group/nav-link relative hidden text-evening opacity-80 transition duratio
                 target="_blank"
                 class="peer text-evening opacity-80 transition delay-75 duration-300 group-hover/github:opacity-100 motion-reduce:transition-none"
             >
-                <div class="gsap-fadein">
+                <div
+                    x-ref="navItem"
+                    :class="{'opacity-0': !reducedMotion}"
+                >
                     <svg
                         fill="currentColor"
                         viewBox="0 0 29 29"
diff --git a/resources/views/components/nav/christmas-logo.blade.php b/resources/views/components/nav/christmas-logo.blade.php
@@ -1,6 +1,8 @@
 <a
+    x-ref="navItem"
     href="/"
-    class="group/filament gsap-fadein relative"
+    class="group/filament relative"
+    :class="{'opacity-0': !reducedMotion}"
 >
     <div class="text-black">
         <svg
diff --git a/resources/views/components/nav/halloween-logo.blade.php b/resources/views/components/nav/halloween-logo.blade.php
@@ -1,6 +1,8 @@
 <a
+    x-ref="navItem"
     href="/"
-    class="group/filament gsap-fadein relative"
+    class="group/filament relative"
+    :class="{'opacity-0': !reducedMotion}"
 >
     <div class="text-black">
         <svg
diff --git a/resources/views/components/nav/indicator.blade.php b/resources/views/components/nav/indicator.blade.php
@@ -0,0 +1,29 @@
+<div class="absolute -bottom-4 right-1/2 translate-x-1/2">
+    <div
+        x-init="
+            () => {
+                motion.inView($el, (element) => {
+                    motion.animate(
+                        $el,
+                        {
+                            opacity: [0, 1],
+                            y: [-30, 0],
+                            rotate: [-360, 0],
+                            scale: [0.5, 1],
+                        },
+                        {
+                            duration: 0.7,
+                            ease: motion.circOut,
+                            delay: 0.05,
+                        },
+                    )
+                })
+            }
+        "
+        :class="{'opacity-0': !reducedMotion}"
+    >
+        <x-icons.nexus-flower
+            class="size-[10px] transition duration-300 group-hover:rotate-90 motion-reduce:transition-none"
+        />
+    </div>
+</div>
diff --git a/resources/views/components/nav/logo.blade.php b/resources/views/components/nav/logo.blade.php
@@ -1,6 +1,8 @@
 <a
+    x-ref="navItem"
     href="/"
-    class="group/filament gsap-fadein relative"
+    class="group/filament relative"
+    :class="{'opacity-0': !reducedMotion}"
 >
     <div class="text-black">
         <svg
