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