antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(navbar): apply glassmorphism to transparent mode, not scrolled mode 

Fixed logic - the glassmorphism effect (backdrop blur, subtle backgrounds,
borders, shadows) now applies when the navbar is transparent at the top of
the homepage (isTransparent=true), not when scrolled down.

When scrolled or on other pages, the links are simpler without the extra
glassmorphism styling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-10-21 09:57:29 -05:00
parent 4254459238
commit 8893675b36
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/web/src/components/AppNavBar.tsx
View File

@ -719,7 +719,7 @@ function NavLink({
<Link <Link
href={href} href={href}
style={{ style={{
backdropFilter: isTransparent ? 'none' : 'blur(8px)', backdropFilter: isTransparent ? 'blur(8px)' : 'none',
}} }}
className={css({ className={css({
px: { base: '4', md: '3' }, px: { base: '4', md: '3' },
@ -737,29 +737,29 @@ function NavLink({
: 'rgba(209, 213, 219, 0.9)', : 'rgba(209, 213, 219, 0.9)',
bg: isTransparent bg: isTransparent
? isActive ? isActive
? 'rgba(255, 255, 255, 0.15)' ? 'rgba(255, 255, 255, 0.2)'
: 'transparent' : 'rgba(255, 255, 255, 0.08)'
: isActive : isActive
? 'rgba(139, 92, 246, 0.25)' ? 'rgba(139, 92, 246, 0.2)'
: 'rgba(255, 255, 255, 0.08)', : 'transparent',
border: isTransparent ? 'none' : '1px solid', border: isTransparent ? '1px solid' : 'none',
borderColor: isTransparent borderColor: isTransparent
? 'transparent' ? isActive
: isActive ? 'rgba(255, 255, 255, 0.3)'
? 'rgba(139, 92, 246, 0.3)' : 'rgba(255, 255, 255, 0.15)'
: 'rgba(255, 255, 255, 0.15)', : 'transparent',
rounded: 'lg', rounded: 'lg',
transition: 'all', transition: 'all',
textDecoration: 'none', textDecoration: 'none',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
boxShadow: isTransparent ? 'none' : '0 2px 8px rgba(0, 0, 0, 0.2)', boxShadow: isTransparent ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none',
_hover: { _hover: {
color: isTransparent ? 'white' : 'rgba(196, 181, 253, 1)', color: isTransparent ? 'white' : 'rgba(196, 181, 253, 1)',
bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'rgba(139, 92, 246, 0.3)', bg: isTransparent ? 'rgba(255, 255, 255, 0.25)' : 'rgba(139, 92, 246, 0.25)',
borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.4)', borderColor: isTransparent ? 'rgba(255, 255, 255, 0.4)' : 'transparent',
boxShadow: isTransparent ? 'none' : '0 4px 12px rgba(139, 92, 246, 0.2)', boxShadow: isTransparent ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
}, },
})} })}
> >