{"version":3,"sources":["webpack://gatsby-casper/./src/components/header/SiteNav.tsx"],"names":["outer","inner","SiteNavMain","SiteArchiveHeader","ActionButton","SiteNav","titleRef","React","lastScrollY","ticking","state","showTitle","onScroll","current","requestAnimationFrame","update","window","scrollY","trigger","getBoundingClientRect","top","triggerOffset","offsetHeight","setState","componentDidMount","this","props","isPost","addEventListener","passive","componentWillUnmount","removeEventListener","render","post","whiteLogo","css","SiteNavStyles","SiteNavLeft","className","SiteNavContent","HideNav","NavStyles","role","to","href","NavPostTitle","ref","title","SiteNavRight","SocialLinks","TransitionNavigation","isAtTop","isSticky","addScroll","componentDidUpdate","prevProps","removeScroll","handleScroll","event","scrollPosition","target","documentElement","scrollTop","customBackground","classNames","mode","background","marginBottom","paddingBottom","style","defaultProps","undefined"],"mappings":"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","file":"af52a822-57a3ffa2c95251c4e67c.js","sourcesContent":["import React, { CSSProperties } from \"react\";\nimport { Link } from \"gatsby\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { SiteNavLogo, SiteNavLogoWhite } from \"./SiteNavLogo\";\n\ninterface SiteNavProps {\n isPost?: boolean;\n whiteLogo?: boolean;\n post?: any;\n}\n\ninterface SiteNavState {\n showTitle: boolean;\n}\n\nexport const outer = css`\n position: relative;\n padding: 0 5vw;\n`;\n\n// Centered content container blocks\nexport const inner = css`\n margin: 0 auto;\n max-width: 1040px;\n width: 100%;\n`;\n\nconst SiteNavMain = css`\n background: #fff;\n\n transition: background 0.5s, color 0.5s;\n\n &.isSticky {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1000;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n }\n\n &.transparentHeader {\n background: transparent;\n box-shadow: none;\n\n li a {\n color: #fff;\n }\n\n li a:before {\n background: #fff;\n }\n\n .ActionButton {\n background: #fff;\n color: #000;\n }\n }\n`;\n\n// tag and author post lists\nexport const SiteArchiveHeader = css`\n .site-header-content {\n position: relative;\n align-items: stretch;\n padding: 12vw 0 20px;\n min-height: 200px;\n max-height: 600px;\n }\n`;\n\nconst ActionButton = css`\n && {\n background: #2c76bc;\n color: #fff;\n border-radius: 4px;\n padding: 6px 12px;\n margin-top: 6px;\n margin-left: 19px;\n transition: 0.1s background;\n\n :before {\n display: none;\n }\n\n :hover,\n :focus {\n background: #296dae;\n color: #fff;\n }\n\n :active {\n background: #2665a0;\n color: #fff;\n }\n }\n`;\n\nclass SiteNav extends React.Component {\n titleRef = React.createRef();\n lastScrollY = 0;\n ticking = false;\n state = { showTitle: false };\n\n componentDidMount(): void {\n this.lastScrollY = window.scrollY;\n if (this.props.isPost) {\n window.addEventListener(\"scroll\", this.onScroll, { passive: true });\n }\n }\n\n componentWillUnmount(): void {\n window.removeEventListener(\"scroll\", this.onScroll);\n }\n\n onScroll = () => {\n if (!this.titleRef || !this.titleRef.current) {\n return;\n }\n\n if (!this.ticking) {\n requestAnimationFrame(this.update);\n }\n\n this.ticking = true;\n };\n\n update = () => {\n if (!this.titleRef || !this.titleRef.current) {\n return;\n }\n\n this.lastScrollY = window.scrollY;\n\n const trigger = this.titleRef.current.getBoundingClientRect().top;\n const triggerOffset = this.titleRef.current.offsetHeight + 35;\n\n // show/hide post title\n if (this.lastScrollY >= trigger + triggerOffset) {\n this.setState({ showTitle: true });\n } else {\n this.setState({ showTitle: false });\n }\n\n this.ticking = false;\n };\n\n render() {\n const { isPost = false, post = {}, whiteLogo } = this.props;\n\n return (\n \n );\n }\n}\n\nconst SiteNavStyles = css`\n position: relative;\n z-index: 100;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n overflow-y: hidden;\n height: 70px;\n font-size: 1.3rem;\n`;\n\nconst SiteNavLeft = styled.div`\n flex: 1 0 auto;\n display: flex;\n align-items: center;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n margin-right: 10px;\n padding: 10px 0 80px;\n font-weight: 500;\n letter-spacing: 0.2px;\n white-space: nowrap;\n justify-content: space-between;\n\n -ms-overflow-scrolling: touch;\n\n @media (max-width: 700px) {\n margin-right: 0;\n padding-left: 5vw;\n }\n`;\n\nconst SiteNavContent = styled.div`\n position: relative;\n align-self: flex-start;\n`;\n\nconst NavStyles = css`\n display: flex;\n margin: 6px 0 0 -12px;\n padding: 0;\n list-style: none;\n transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);\n\n li {\n display: block;\n margin: 0;\n padding: 0;\n }\n\n li a {\n position: relative;\n display: block;\n padding: 12px 12px;\n color: #000;\n opacity: 0.8;\n transition: opacity 0.35s ease-in-out;\n }\n\n li a:hover {\n text-decoration: none;\n opacity: 1;\n }\n\n li a:before {\n content: \"\";\n position: absolute;\n right: 100%;\n bottom: 8px;\n left: 12px;\n height: 1px;\n background: #000;\n opacity: 0.25;\n transition: all 0.35s ease-in-out;\n }\n\n li a:hover:before {\n right: 12px;\n opacity: 0.5;\n }\n`;\n\nconst SiteNavRight = styled.div`\n flex: 0 1 auto;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 10px 0;\n height: 64px;\n\n @media (max-width: 700px) {\n display: none;\n }\n`;\n\nconst SocialLinks = styled.div`\n flex-shrink: 0;\n display: flex;\n align-items: center;\n`;\n\nconst NavPostTitle = styled.span`\n visibility: hidden;\n position: absolute;\n top: 9px;\n color: #000;\n font-size: 1.7rem;\n font-weight: 400;\n text-transform: none;\n opacity: 0;\n transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);\n transform: translateY(175%);\n\n .dash {\n left: -25px;\n }\n\n .dash:before {\n content: \"– \";\n opacity: 0.5;\n }\n`;\n\nconst HideNav = css`\n ul {\n visibility: hidden;\n opacity: 0;\n transform: translateY(-175%);\n }\n .nav-post-title {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\ninterface ITransitionNavigationProps {\n /**\n * white = transparent background with a white logo\n * @default normal\n */\n mode?: \"white\" | \"normal\";\n\n /**\n * if sticky is set the navigate with stick when scrolling. This will also cause the mode to change to normal with \"stuck\"\n * @default false\n */\n isSticky?: boolean;\n\n /**\n * Custom background color (for example #2c76bc)\n * @default undefined\n */\n background?: string;\n}\n\ninterface ITransitionNavigationState {\n isAtTop: boolean;\n}\n\nexport class TransitionNavigation extends React.Component<\n ITransitionNavigationProps,\n ITransitionNavigationState\n> {\n static defaultProps = {\n mode: \"normal\",\n isSticky: false,\n background: undefined,\n };\n\n state = {\n isAtTop: typeof window !== \"undefined\" ? window.scrollY === 0 : true,\n };\n\n componentDidMount = () => {\n if (this.props.isSticky) {\n this.addScroll();\n }\n };\n\n componentDidUpdate = (prevProps: ITransitionNavigationProps) => {\n if (prevProps.isSticky !== this.props.isSticky) {\n this.removeScroll();\n\n if (this.props.isSticky) {\n // sticky changed, add event listener and recompute\n this.addScroll();\n }\n }\n };\n\n componentWillUnmount = () => {\n this.removeScroll();\n };\n\n private addScroll = () => {\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n // this.handleScroll();\n };\n\n private removeScroll = () => {\n window.removeEventListener(\"scroll\", this.handleScroll);\n };\n\n handleScroll = (event: Event) => {\n const scrollPosition = (event.target as any).documentElement.scrollTop;\n const isAtTop = scrollPosition === 0;\n\n if (isAtTop !== this.state.isAtTop) {\n this.setState({\n isAtTop: scrollPosition === 0,\n });\n }\n };\n\n render() {\n let classNames: string = \"\";\n\n if (this.props.mode === \"white\") {\n classNames = this.state.isAtTop ? \"transparentHeader\" : \"\";\n }\n\n if (this.props.isSticky) {\n classNames += \" isSticky\";\n }\n\n let customBackground: undefined | CSSProperties = undefined;\n\n if (this.props.background) {\n customBackground = {\n background: this.props.background,\n marginBottom: -200,\n paddingBottom: 200,\n };\n }\n\n return (\n
\n \n
\n \n
\n \n
\n );\n }\n}\n"],"sourceRoot":""}