From d1f357d5c6a2c53365bc6bffa36d7fa06e2fa044 Mon Sep 17 00:00:00 2001
From: t0rbik <liker1011@gmail.com>
Date: Tue, 26 Nov 2024 16:58:49 +0100
Subject: [PATCH 1/3] animated background navigation

---
 src/components/layout/LeftNav.tsx             | 57 +++++++++++++++----
 .../providers/FramerMotionProvider.tsx        | 10 +---
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/components/layout/LeftNav.tsx b/src/components/layout/LeftNav.tsx
index 84d96151..b423cfac 100644
--- a/src/components/layout/LeftNav.tsx
+++ b/src/components/layout/LeftNav.tsx
@@ -1,12 +1,26 @@
-import { cn } from "@/utils/cn";
-import { Link, useMatchRoute } from "@tanstack/react-router";
+import { HTMLAttributes, Ref, forwardRef } from "react";
+import { useMatchRoute, createLink } from "@tanstack/react-router";
+import { motion, MotionProps } from "framer-motion";
 
+import { cn } from "@/utils/cn";
 import {
   routeTitleToPathMapping,
   RouteTitle,
 } from "@/components/layout/Header";
 import { useSentinel } from "@/lib/queries/sentinel/useSentinel";
 
+const MotionLinkForwardRef = forwardRef(
+  (
+    props: MotionProps & HTMLAttributes<HTMLAnchorElement>,
+    ref: Ref<HTMLAnchorElement>,
+  ) => {
+    return <motion.a {...props} ref={ref} />;
+  },
+);
+MotionLinkForwardRef.displayName = "MotionLinkForwardRef";
+
+const MotionLink = createLink(MotionLinkForwardRef);
+
 export function LeftNav() {
   const matchRoute = useMatchRoute();
   const { data: isSentinel } = useSentinel();
@@ -16,17 +30,17 @@ export function LeftNav() {
         Navigation
       </p>
       {Object.keys(routeTitleToPathMapping).map((item) => (
-        <Link
+        <MotionLink
           key={item}
           to={routeTitleToPathMapping[item as RouteTitle].to}
           className={cn(
-            "flex cursor-pointer justify-between rounded-xl p-4 transition-all",
-            "hover:bg-grey10inverse hover:opacity-100 dark:hover:bg-grey10",
+            "relative flex cursor-pointer justify-between rounded-xl p-4 transition-all",
+            "hover:opacity-100",
             matchRoute({
               to: routeTitleToPathMapping[item as RouteTitle].to,
               fuzzy: true,
             })
-              ? "bg-grey10inverse opacity-100 dark:bg-grey10"
+              ? "opacity-100"
               : "opacity-40",
           )}
         >
@@ -36,19 +50,29 @@ export function LeftNav() {
             className="h-7 w-7 invert dark:filter-none"
             alt={`${item} icon`}
           />
-        </Link>
+
+          {matchRoute({
+            to: routeTitleToPathMapping[item as RouteTitle].to,
+            fuzzy: true,
+          }) ? (
+            <motion.div
+              layoutId="tab-indicator"
+              className="absolute inset-0 -z-10 rounded-xl bg-grey10inverse dark:bg-grey10"
+            />
+          ) : null}
+        </MotionLink>
       ))}
       {isSentinel && (
-        <Link
+        <MotionLink
           to="/sentinel"
           className={cn(
-            "flex cursor-pointer justify-between rounded-xl p-4 transition-all",
-            "hover:bg-grey10inverse hover:opacity-100 dark:hover:bg-grey10",
+            "relative flex cursor-pointer justify-between rounded-xl p-4 transition-all",
+            "hover:opacity-100",
             matchRoute({
               to: "/sentinel",
               fuzzy: true,
             })
-              ? "bg-grey10inverse opacity-100 dark:bg-grey10"
+              ? "opacity-100"
               : "opacity-40",
           )}
         >
@@ -58,7 +82,16 @@ export function LeftNav() {
             className="h-7 w-7 invert dark:filter-none"
             alt="Sentinel icon"
           />
-        </Link>
+          {matchRoute({
+            to: "/sentinel",
+            fuzzy: true,
+          }) ? (
+            <motion.div
+              layoutId="tab-indicator"
+              className="absolute inset-0 -z-10 rounded-xl bg-grey10inverse dark:bg-grey10"
+            />
+          ) : null}
+        </MotionLink>
       )}
     </nav>
   );
diff --git a/src/components/providers/FramerMotionProvider.tsx b/src/components/providers/FramerMotionProvider.tsx
index b42b9499..01a9f6a2 100644
--- a/src/components/providers/FramerMotionProvider.tsx
+++ b/src/components/providers/FramerMotionProvider.tsx
@@ -1,6 +1,6 @@
-import { LazyMotion, domAnimation } from "framer-motion";
+import { LazyMotion, domMax } from "framer-motion";
 
-// NOTE: Reduced bundle size,
+// NOTE: Possible to reduce bundle size,
 // see: https://www.framer.com/motion/guide-reduce-bundle-size/
 
 export const FramerMotionProvider = ({
@@ -8,9 +8,5 @@ export const FramerMotionProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  return (
-    <LazyMotion features={domAnimation} strict>
-      {children}
-    </LazyMotion>
-  );
+  return <LazyMotion features={domMax}>{children}</LazyMotion>;
 };

From 75d6235282aee5f9c8f5ea1b4add374184f7fb48 Mon Sep 17 00:00:00 2001
From: t0rbik <liker1011@gmail.com>
Date: Tue, 26 Nov 2024 17:07:41 +0100
Subject: [PATCH 2/3] adjust for reduced motion

---
 src/components/layout/LeftNav.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/LeftNav.tsx b/src/components/layout/LeftNav.tsx
index b423cfac..3783a016 100644
--- a/src/components/layout/LeftNav.tsx
+++ b/src/components/layout/LeftNav.tsx
@@ -1,6 +1,6 @@
 import { HTMLAttributes, Ref, forwardRef } from "react";
 import { useMatchRoute, createLink } from "@tanstack/react-router";
-import { motion, MotionProps } from "framer-motion";
+import { motion, MotionProps, useReducedMotion } from "framer-motion";
 
 import { cn } from "@/utils/cn";
 import {
@@ -23,6 +23,7 @@ const MotionLink = createLink(MotionLinkForwardRef);
 
 export function LeftNav() {
   const matchRoute = useMatchRoute();
+  const isReducedMotion = useReducedMotion();
   const { data: isSentinel } = useSentinel();
   return (
     <nav className="space-y-5">
@@ -42,6 +43,12 @@ export function LeftNav() {
             })
               ? "opacity-100"
               : "opacity-40",
+            isReducedMotion &&
+              matchRoute({
+                to: routeTitleToPathMapping[item as RouteTitle].to,
+                fuzzy: true,
+              }) &&
+              "bg-grey10inverse dark:bg-grey10",
           )}
         >
           {item}
@@ -51,7 +58,8 @@ export function LeftNav() {
             alt={`${item} icon`}
           />
 
-          {matchRoute({
+          {!isReducedMotion &&
+          matchRoute({
             to: routeTitleToPathMapping[item as RouteTitle].to,
             fuzzy: true,
           }) ? (
@@ -74,6 +82,12 @@ export function LeftNav() {
             })
               ? "opacity-100"
               : "opacity-40",
+            isReducedMotion &&
+              matchRoute({
+                to: "/sentinel",
+                fuzzy: true,
+              }) &&
+              "bg-grey10inverse dark:bg-grey10",
           )}
         >
           Sentinel
@@ -82,7 +96,8 @@ export function LeftNav() {
             className="h-7 w-7 invert dark:filter-none"
             alt="Sentinel icon"
           />
-          {matchRoute({
+          {!isReducedMotion &&
+          matchRoute({
             to: "/sentinel",
             fuzzy: true,
           }) ? (

From 10f2ed51e7ded96cb37fbde0e1b53898a3ae1573 Mon Sep 17 00:00:00 2001
From: t0rbik <liker1011@gmail.com>
Date: Thu, 28 Nov 2024 18:26:21 +0100
Subject: [PATCH 3/3] lazy load features

---
 src/components/layout/LeftNav.tsx               |  8 ++++----
 .../providers/FramerMotionProvider.tsx          | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/LeftNav.tsx b/src/components/layout/LeftNav.tsx
index 3783a016..6770f25d 100644
--- a/src/components/layout/LeftNav.tsx
+++ b/src/components/layout/LeftNav.tsx
@@ -1,6 +1,6 @@
 import { HTMLAttributes, Ref, forwardRef } from "react";
 import { useMatchRoute, createLink } from "@tanstack/react-router";
-import { motion, MotionProps, useReducedMotion } from "framer-motion";
+import { m, MotionProps, useReducedMotion } from "framer-motion";
 
 import { cn } from "@/utils/cn";
 import {
@@ -14,7 +14,7 @@ const MotionLinkForwardRef = forwardRef(
     props: MotionProps & HTMLAttributes<HTMLAnchorElement>,
     ref: Ref<HTMLAnchorElement>,
   ) => {
-    return <motion.a {...props} ref={ref} />;
+    return <m.a {...props} ref={ref} />;
   },
 );
 MotionLinkForwardRef.displayName = "MotionLinkForwardRef";
@@ -63,7 +63,7 @@ export function LeftNav() {
             to: routeTitleToPathMapping[item as RouteTitle].to,
             fuzzy: true,
           }) ? (
-            <motion.div
+            <m.div
               layoutId="tab-indicator"
               className="absolute inset-0 -z-10 rounded-xl bg-grey10inverse dark:bg-grey10"
             />
@@ -101,7 +101,7 @@ export function LeftNav() {
             to: "/sentinel",
             fuzzy: true,
           }) ? (
-            <motion.div
+            <m.div
               layoutId="tab-indicator"
               className="absolute inset-0 -z-10 rounded-xl bg-grey10inverse dark:bg-grey10"
             />
diff --git a/src/components/providers/FramerMotionProvider.tsx b/src/components/providers/FramerMotionProvider.tsx
index 01a9f6a2..d03df56a 100644
--- a/src/components/providers/FramerMotionProvider.tsx
+++ b/src/components/providers/FramerMotionProvider.tsx
@@ -1,12 +1,21 @@
-import { LazyMotion, domMax } from "framer-motion";
+import { LazyMotion } from "framer-motion";
 
-// NOTE: Possible to reduce bundle size,
-// see: https://www.framer.com/motion/guide-reduce-bundle-size/
+// NOTE: Reduced initial bundle size.
+// Lazy load rest of the Framer Motion features after the initial render.
+// See: https://motion.dev/docs/react-reduce-bundle-size
+
+// Make sure to return the specific export containing the feature bundle.
+const loadFeatures = () =>
+  import("framer-motion").then((module) => module.domMax);
 
 export const FramerMotionProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  return <LazyMotion features={domMax}>{children}</LazyMotion>;
+  return (
+    <LazyMotion features={loadFeatures} strict>
+      {children}
+    </LazyMotion>
+  );
 };