From be67452643e93b16409a92563d8dfc6a5ba17630 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 3 Oct 2023 16:13:56 -0500
Subject: [PATCH] Refine animations

---
 src/components/HeaderList.tsx |  3 ++
 src/components/Nav.tsx        | 56 +++++++++++++++++++++--------------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/HeaderList.tsx b/src/components/HeaderList.tsx
index fd8d6f46..3f1c44b2 100644
--- a/src/components/HeaderList.tsx
+++ b/src/components/HeaderList.tsx
@@ -12,6 +12,9 @@ export default function HeaderList({
 }) {
   return (
     <AnimateItems
+      scaleOffset={0.95}
+      duration={0.5}
+      staggerDelay={0.05}
       items={[
         <div key="header" className={cc(
           'text-gray-900',
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 0b10c9e5..4fb4f0a0 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -9,16 +9,21 @@ import ViewSwitcher, { SwitcherSelection } from '@/photo/ViewSwitcher';
 import {
   PATH_ADMIN,
   PATH_ROOT,
+  isPathAdmin,
   isPathGrid,
   isPathProtected,
+  isPathSignIn,
 } from '@/site/paths';
+import AnimateItems from './AnimateItems';
 
 export default function Nav({ showTextLinks }: { showTextLinks?: boolean }) {
   const isLoggedIn = false;
 
   const pathname = usePathname();
 
-  const showNav = !pathname.startsWith('/sign-in');
+  const showNav = !isPathSignIn(pathname);
+
+  const shouldAnimate = !isPathAdmin(pathname);
 
   const renderLink = (
     text: string,
@@ -41,27 +46,34 @@ export default function Nav({ showTextLinks }: { showTextLinks?: boolean }) {
   return (
     <SiteGrid
       contentMain={
-        <div className={cc(
-          'flex items-center',
-          'min-h-[4rem]',
-          'leading-none',
-        )}>
-          {showNav && <>
-            <div className="flex flex-grow items-center gap-4">
-              <ViewSwitcher
-                currentSelection={switcherSelectionForPath()}
-                showAdmin={isLoggedIn}
-              />
-              {showTextLinks && <>
-                {renderLink('Home', PATH_ROOT)}
-                {renderLink('Admin', PATH_ADMIN)}
-              </>}
-            </div>
-            <div className="hidden xs:block">
-              {renderLink(SITE_DOMAIN_OR_TITLE, PATH_ROOT)}
-            </div>
-          </>}
-        </div>
+        <AnimateItems
+          type={!shouldAnimate ? 'none' : undefined}
+          scaleOffset={1}
+          distanceOffset={10}
+          items={showNav
+            ? [<div
+              key="nav"
+              className={cc(
+                'flex items-center',
+                'w-full min-h-[4rem]',
+                'leading-none',
+              )}>
+              <div className="flex flex-grow items-center gap-4">
+                <ViewSwitcher
+                  currentSelection={switcherSelectionForPath()}
+                  showAdmin={isLoggedIn}
+                />
+                {showTextLinks && <>
+                  {renderLink('Home', PATH_ROOT)}
+                  {renderLink('Admin', PATH_ADMIN)}
+                </>}
+              </div>
+              <div className="hidden xs:block">
+                {renderLink(SITE_DOMAIN_OR_TITLE, PATH_ROOT)}
+              </div>
+            </div>]
+            : []}
+        />
       }
     />
   );