[WEB-2139] demo top nav (#165)

* Desktop CTAs * Fix responsiveness * Move window size to useEffect * PR comments * Change button styling to ghost * Fix button bg on initial render
stytchauth · Jun 13, 2024 · 44470b7 · 44470b7
1 parent d7321ee
commit 44470b7
Showing 1 changed file with 120 additions and 11 deletions.
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -4,25 +4,102 @@ 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);
+ 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}>
+ <a
+ className="no-underline"
+ style={styles.leftLinkText}
+ href="https://stytch.com"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ Stytch.com
+ </a>
+ <a
+ className="no-underline"
+ style={styles.leftLinkText}
+ 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"
+ style={styles.leftLinkText}
+ >
+ Github
+ </a>
+ <a
+ className="no-underline"
+ style={styles.leftLinkText}
+ 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"
+ style={styles.tertiaryButton}
+ href="https://stytch.com/contact"
+ rel="noopener noreferrer"
+ target="_blank"
+ onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#E5E8EB')} // fog
+ onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'white')}
+ >
+ 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 = '#E5E8EB')} // fog
+ onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'white')}
  >
- 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,23 +110,55 @@ 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',
+ cursor: 'pointer',
  },
  logoFont: {
  padding: '0px 0px 10px 20px',
  fontSize: '30px',
  },
- linkContainer: {
+ leftLinks: {
  display: 'flex',
  gap: '16px',
  },
+ leftLinkText: {
+ fontSize: '16px',
+ fontWeight: 500,
+ },
+ rightLinks: {
+ display: 'flex',
+ gap: '16px',
+ alignItems: 'center',
+ },
+ primaryButton: {
+ backgroundColor: '#19303D', // charcoal
+ color: 'white',
+ padding: '8px 22px',
+ borderRadius: '3px',
+ },
+ secondaryButton: {
+ color: '#19303D', // charcoal
+ padding: '8px 22px',
+ borderRadius: '3px',
+ border: '1px solid #19303D', // charcoal
+ },
+ tertiaryButton: {
+ color: '#19303D', // charcoal
+ padding: '8px 22px',
+ borderRadius: '3px',
+ },
  link: {
  fontSize: '20px',
  fontWeight: 500,