Skip to content

Commit

Permalink
feat: add bien glass effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kikobeats
Kikobeats committed Oct 31, 2023
1 parent 1387e40 commit f0c6280
Showing 1 changed file with 107 additions and 81 deletions.
188 changes: 107 additions & 81 deletions src/components/patterns/Toolbar/ToolbarDesktop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,93 +81,119 @@ const ToolbarDesktop = ({ theme }) => {
const setToolbar = name => () => setSecondary(name)

return (
<Fixed
<Box
as='header'
data-debug='bien-nav'
zIndex={101}
top={0}
left={0}
right={0}
className='hidden-print'
css={`
backdrop-filter: blur(8px);
background-color: ${rgba(isDark ? 'black' : 'white', 0.5)};
inset: 0;
position: fixed;
height: ${secondary ? '96px' : '64px'};
`}
>
<Box px={3}>
<Toolbar
aria-label='Primary Navigation'
justifyContent='space-between'
mb={secondary && '-16px'}
>
<NavContainer as='span'>
<NavMicrolinkLogo p={1} />
</NavContainer>
<NavContainer>
<Flex
as='ul'
alignItems='center'
justifyContent='center'
p={0}
m={0}
>
<NavProducts
as='li'
pl={0}
isDark={isDark}
onMouseEnter={setToolbar('products')}
/>
<NavDevelopers
as='li'
isDark={isDark}
onMouseEnter={setToolbar('developers')}
/>
<NavPricing as='li' isDark={isDark} />
<NavCompany
as='li'
isDark={isDark}
onMouseEnter={setToolbar('company')}
/>
</Flex>
</NavContainer>
<NavContainer as='div'>
<NavTwitter css={isDark ? iconDark : iconLight}>
<Twitter />
</NavTwitter>
<NavGitHub pl={3} css={isDark ? iconDark : iconLight}>
<GitHub />
</NavGitHub>
</NavContainer>
</Toolbar>
<Choose>
<Choose.When condition={secondary === 'products'}>
<ToolbarSecondary>
<NavFormats as='li' pl={0} isDark={isDark} fontSize='12px' />
<NavInsights as='li' isDark={isDark} fontSize='12px' />
<NavLogo as='li' isDark={isDark} fontSize='12px' />
<NavMeta as='li' isDark={isDark} fontSize='12px' />
<NavPdf as='li' isDark={isDark} fontSize='12px' />
<NavScreenshot as='li' isDark={isDark} fontSize='12px' />
<NavSDK as='li' isDark={isDark} fontSize='12px' />
</ToolbarSecondary>
</Choose.When>
<Choose.When condition={secondary === 'developers'}>
<ToolbarSecondary>
<NavChangelog as='li' pl={0} isDark={isDark} fontSize='12px' />
<NavCommunity as='li' isDark={isDark} fontSize='12px' />
<NavDocs as='li' isDark={isDark} fontSize='12px' />
<NavRecipes as='li' isDark={isDark} fontSize='12px' />
</ToolbarSecondary>
</Choose.When>
<Choose.When condition={secondary === 'company'}>
<ToolbarSecondary>
<NavBlog as='li' pl={0} isDark={isDark} fontSize='12px' />
<NavNewsletter as='li' isDark={isDark} fontSize='12px' />
<NavOpenSource as='li' isDark={isDark} fontSize='12px' />
</ToolbarSecondary>
</Choose.When>
</Choose>
<Box
data-debug='bien-glass'
className='hidden-print'
css={`
background-color: ${rgba(isDark ? 'black' : 'white', 0.5)};
position: absolute;
inset: 0;
/* Extend the backdrop to the bottom for it to "collect the light" outside of the nav */
--extended-by: 100px;
bottom: calc(-1 * var(--extended-by));
--filter: blur(10px);
-webkit-backdrop-filter: var(--filter);
backdrop-filter: var(--filter);
pointer-events: none;
/* Cut the part of the backdrop that falls outside of <nav /> */
--cutoff: calc(100% - var(--extended-by));
-webkit-mask-image: linear-gradient(
to bottom,
black 0,
black var(--cutoff),
transparent var(--cutoff)
);
`}
>
<Box px={3}>
<Toolbar
aria-label='Primary Navigation'
justifyContent='space-between'
mb={secondary && '-16px'}
>
<NavContainer as='span'>
<NavMicrolinkLogo p={1} />
</NavContainer>
<NavContainer>
<Flex
as='ul'
alignItems='center'
justifyContent='center'
p={0}
m={0}
>
<NavProducts
as='li'
pl={0}
isDark={isDark}
onMouseEnter={setToolbar('products')}
/>
<NavDevelopers
as='li'
isDark={isDark}
onMouseEnter={setToolbar('developers')}
/>
<NavPricing as='li' isDark={isDark} />
<NavCompany
as='li'
isDark={isDark}
onMouseEnter={setToolbar('company')}
/>
</Flex>
</NavContainer>
<NavContainer as='div'>
<NavTwitter css={isDark ? iconDark : iconLight}>
<Twitter />
</NavTwitter>
<NavGitHub pl={3} css={isDark ? iconDark : iconLight}>
<GitHub />
</NavGitHub>
</NavContainer>
</Toolbar>
<Choose>
<Choose.When condition={secondary === 'products'}>
<ToolbarSecondary>
<NavFormats as='li' pl={0} isDark={isDark} fontSize='12px' />
<NavInsights as='li' isDark={isDark} fontSize='12px' />
<NavLogo as='li' isDark={isDark} fontSize='12px' />
<NavMeta as='li' isDark={isDark} fontSize='12px' />
<NavPdf as='li' isDark={isDark} fontSize='12px' />
<NavScreenshot as='li' isDark={isDark} fontSize='12px' />
<NavSDK as='li' isDark={isDark} fontSize='12px' />
</ToolbarSecondary>
</Choose.When>
<Choose.When condition={secondary === 'developers'}>
<ToolbarSecondary>
<NavChangelog as='li' pl={0} isDark={isDark} fontSize='12px' />
<NavCommunity as='li' isDark={isDark} fontSize='12px' />
<NavDocs as='li' isDark={isDark} fontSize='12px' />
<NavRecipes as='li' isDark={isDark} fontSize='12px' />
</ToolbarSecondary>
</Choose.When>
<Choose.When condition={secondary === 'company'}>
<ToolbarSecondary>
<NavBlog as='li' pl={0} isDark={isDark} fontSize='12px' />
<NavNewsletter as='li' isDark={isDark} fontSize='12px' />
<NavOpenSource as='li' isDark={isDark} fontSize='12px' />
</ToolbarSecondary>
</Choose.When>
</Choose>
</Box>
</Box>
</Fixed>
</Box>
)
}

Expand Down

0 comments on commit f0c6280

Please sign in to comment.