strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine animations

Browse Source
This commit is contained in:
Sam Becker 2023-10-03 16:13:56 -05:00
parent 5f5d5b2116
commit be67452643
2 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/HeaderList.tsx
View File

@ -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',

56
src/components/Nav.tsx
View File

@ -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>]
: []}
/>
}
/>
);