-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WEB-2139] demo top nav #165
Changes from 3 commits
e628b47
53aeb45
2e981a8
cd2e1b9
2d33ed4
e88e206
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,25 +4,81 @@ import stytchLogo from '/public/stytch-logo.svg'; | |
import Link from 'next/link'; | ||
|
||
function NavBar() { | ||
const [windowInnerWidth, setWindowInnerWidth] = React.useState<number>(0); | ||
|
||
React.useEffect(() => { | ||
const handleWindowResize = () => { | ||
setWindowInnerWidth(window.innerWidth); | ||
}; | ||
handleWindowResize(); | ||
window.addEventListener('resize', handleWindowResize); | ||
// unsubscribe from the event on component unmount | ||
return () => window.removeEventListener('resize', handleWindowResize); | ||
}, []); | ||
|
||
return ( | ||
<div style={styles.container}> | ||
<div style={styles.logoContainer}> | ||
<Link href={'/'}> | ||
<Image alt="Stytch logo" height={30} src={stytchLogo} width={152} /> | ||
</Link> | ||
<div style={styles.leftNav}> | ||
<div style={styles.logoContainer}> | ||
<Link href={'/'}> | ||
<Image alt="Stytch logo" height={30} src={stytchLogo} width={152} /> | ||
</Link> | ||
</div> | ||
{windowInnerWidth > 1000 && ( | ||
<div style={styles.leftLinks}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These links feel closer together, larger, and bolder than the mocks |
||
<a className="no-underline" href="https://stytch.com" rel="noopener noreferrer" target="_blank"> | ||
Stytch.com | ||
</a> | ||
<a className="no-underline" href="https://stytch.com/docs" rel="noopener noreferrer" target="_blank"> | ||
Documentation | ||
</a> | ||
<a | ||
className="no-underline" | ||
href="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/stytchauth/stytch-nextjs-integration" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
Github | ||
</a> | ||
<a | ||
className="no-underline" | ||
href="https://stytch.com/docs/api/postman" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
Postman | ||
</a> | ||
</div> | ||
)} | ||
</div> | ||
|
||
<div style={styles.linkContainer}> | ||
<div style={styles.rightLinks}> | ||
{windowInnerWidth > 600 && ( | ||
<a className="no-underline" href="https://stytch.com/contact" rel="noopener noreferrer" target="_blank"> | ||
Contact Us | ||
</a> | ||
)} | ||
<a | ||
className="no-underline" | ||
href="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/stytchauth/stytch-nextjs-integration" | ||
style={styles.secondaryButton} | ||
href="https://stytch.com/pricing" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#ADBCC5')} // cement | ||
onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#E5E8EB')} // fog | ||
> | ||
View on Github | ||
See pricing | ||
</a> | ||
<a className="no-underline" href="https://stytch.com/docs" rel="noopener noreferrer" target="_blank"> | ||
Stytch Docs | ||
<a | ||
className="no-underline" | ||
style={styles.primaryButton} | ||
href="https://stytch.com/dashboard" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#5C727D')} // slate | ||
onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#19303D')} // charcoal | ||
> | ||
Get API keys | ||
</a> | ||
</div> | ||
</div> | ||
|
@@ -33,22 +89,44 @@ const styles: Record<string, React.CSSProperties> = { | |
container: { | ||
display: 'flex', | ||
alignItems: 'center', | ||
backgroundColor: '#c7f1ff', | ||
backgroundColor: 'white', | ||
top: 0, | ||
justifyContent: 'space-between', | ||
padding: '16px 16px', | ||
}, | ||
leftNav: { | ||
display: 'flex', | ||
alignItems: 'center', | ||
}, | ||
logoContainer: { | ||
display: 'flex', | ||
alignItems: 'center', | ||
paddingRight: '32px', | ||
}, | ||
logoFont: { | ||
padding: '0px 0px 10px 20px', | ||
fontSize: '30px', | ||
}, | ||
linkContainer: { | ||
leftLinks: { | ||
display: 'flex', | ||
gap: '16px', | ||
}, | ||
rightLinks: { | ||
display: 'flex', | ||
gap: '16px', | ||
alignItems: 'center', | ||
}, | ||
primaryButton: { | ||
backgroundColor: '#19303D', // charcoal | ||
color: 'white', | ||
padding: '8px 22px', | ||
borderRadius: '3px', | ||
}, | ||
secondaryButton: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It looks like in mocks this should be a ghost button There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Was a text button. Not sure why I didn't style this one after I did the other two 😂 |
||
backgroundColor: '#E5E8EB', // fog | ||
color: '#19303D', // charcoal | ||
padding: '8px 22px', | ||
borderRadius: '3px', | ||
}, | ||
link: { | ||
fontSize: '20px', | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: I would do cursor: pointer for this