Suppress search animation on nav change

This commit is contained in:
Sam Becker 2025-06-30 08:42:49 -05:00
parent 37603612a7
commit 05b8a9c9f0
3 changed files with 9 additions and 2 deletions

View File

@ -33,9 +33,11 @@ const GAP_CLASS = 'mr-1.5 sm:mr-2';
export default function AppViewSwitcher({ export default function AppViewSwitcher({
currentSelection, currentSelection,
className, className,
animateSearch = true,
}: { }: {
currentSelection?: SwitcherSelection currentSelection?: SwitcherSelection
className?: string className?: string
animateSearch?: boolean
}) { }) {
const pathname = usePathname(); const pathname = usePathname();
@ -170,7 +172,7 @@ export default function AppViewSwitcher({
/> />
</Switcher> </Switcher>
</motion.div>} </motion.div>}
<motion.div layout> <motion.div layout={animateSearch}>
<Switcher type="borderless"> <Switcher type="borderless">
<SwitcherItem <SwitcherItem
icon={<IconSearch includeTitle={false} />} icon={<IconSearch includeTitle={false} />}

View File

@ -40,6 +40,7 @@ export default function Nav({
const { const {
classNameStickyContainer, classNameStickyContainer,
classNameStickyNav, classNameStickyNav,
isNavVisible,
} = useStickyNav(ref); } = useStickyNav(ref);
const renderLink = ( const renderLink = (
@ -85,6 +86,7 @@ export default function Nav({
<AppViewSwitcher <AppViewSwitcher
currentSelection={switcherSelectionForPath()} currentSelection={switcherSelectionForPath()}
className="translate-x-[-1px]" className="translate-x-[-1px]"
animateSearch={isNavVisible}
/> />
<div className={clsx( <div className={clsx(
'grow text-right min-w-0', 'grow text-right min-w-0',

View File

@ -37,5 +37,8 @@ export default function useStickyNav(
), ),
}), [isNavSticky, shouldAnimateStickyNav, shouldHideStickyNav]); }), [isNavSticky, shouldAnimateStickyNav, shouldHideStickyNav]);
return classNames; return {
...classNames,
isNavVisible: !shouldHideStickyNav,
};
}; };