4a9bc246ec22e0a2d47fe8e57f1f21adca07f5e8-5110f24344ffd3a2eebc.js.map

{"version":3,"file":"4a9bc246ec22e0a2d47fe8e57f1f21adca07f5e8-5110f24344ffd3a2eebc.js","mappings":"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","sources":["webpack://record-journey/./src/components/header/SiteNav.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { Link } from 'gatsby';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nimport SiteNavLogo from '@/components/header/SiteNavLogo.tsx';\nimport ThemeModeSwitch from '@/components/header/ThemeModeSwitch.tsx';\nimport { Github } from '@/components/icons/github.tsx';\nimport { Instagram } from '@/components/icons/instagram.tsx';\nimport { inner, outer, SiteNavMain, SocialLink, SocialLinkFb } from '@/styles/shared.ts';\nimport config from '@/website-config.ts';\n\nimport type { Author } from '@/templates/post.tsx';\nimport type { ImageDataLike } from 'gatsby-plugin-image';\n\ntype SiteNavProps = {\n  isPost?: boolean;\n  post?: {\n    title: string;\n    date: string;\n    userDate: string;\n    image: ImageDataLike;\n    excerpt: string;\n    tags: string[];\n    author: Author[];\n  };\n};\n\nconst HEIGHT_OFFSET = 92;\n\nexport default function SiteNav({ isPost, post }: SiteNavProps) {\n  const [isScrollDown, isSetScrollDown] = useState(false);\n  const lastScrollY = useRef<number>(0);\n  const ticking = useRef<boolean>(false);\n\n  const onScroll = useCallback(() => {\n    if (!ticking.current) {\n      requestAnimationFrame(() => {\n        lastScrollY.current = window.scrollY;\n        const isScrolled = lastScrollY.current >= HEIGHT_OFFSET;\n        isSetScrollDown(isScrolled);\n        ticking.current = false;\n      });\n    }\n    ticking.current = true;\n  }, []);\n\n  useEffect(() => {\n    if (isPost) {\n      window.addEventListener('scroll', onScroll, { passive: true });\n    }\n    return () => window.removeEventListener('scroll', onScroll);\n  }, [isPost, onScroll]);\n\n  return (\n    <header className=\"site-header\">\n      <div css={[outer, SiteNavMain]}>\n        <div css={inner}>\n          <nav css={SiteNavStyles}>\n            <SiteNavLeft className=\"site-nav-left\">\n              <SiteNavLogo />\n              <SiteNavContent css={[isScrollDown ? HideNav : '']}>\n                <ul css={NavStyles} role=\"menu\">\n                  <li role=\"menuitem\">\n                    <Link to=\"/\" activeClassName=\"nav-current\">\n                      Home\n                    </Link>\n                  </li>\n                  <li role=\"menuitem\">\n                    <Link to=\"/about\" activeClassName=\"nav-current\">\n                      About\n                    </Link>\n                  </li>\n                  <li role=\"menuitem\">\n                    <Link to=\"/tags\" activeClassName=\"nav-current\">\n                      Tags\n                    </Link>\n                  </li>\n                  <li role=\"menuitem\">\n                    <Link to=\"/tags/diary/\" activeClassName=\"nav-current\">\n                      Diary\n                    </Link>\n                  </li>\n                </ul>\n                {isPost && (\n                  <NavPostTitle className=\"nav-post-title\">{post?.title || ''}</NavPostTitle>\n                )}\n              </SiteNavContent>\n            </SiteNavLeft>\n            <SiteNavRight>\n              <SocialLinks>\n                {config.instagram && (\n                  <a\n                    className=\"not-mobile\"\n                    css={[SocialLink, SocialLinkFb]}\n                    href={config.instagram}\n                    target=\"_blank\"\n                    title=\"Instagram\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <Instagram />\n                  </a>\n                )}\n                {config.github && (\n                  <a\n                    className=\"not-mobile\"\n                    css={SocialLink}\n                    href={config.github}\n                    title=\"Github\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <Github />\n                  </a>\n                )}\n                <ThemeModeSwitch />\n              </SocialLinks>\n            </SiteNavRight>\n          </nav>\n        </div>\n      </div>\n    </header>\n  );\n}\n\nconst SiteNavStyles = css`\n  position: relative;\n  z-index: 100;\n  overflow-y: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 52px;\n  font-size: 1.3rem;\n`;\n\nconst SiteNavLeft = styled.div`\n  overflow: hidden;\n  display: flex;\n  flex: 1 0 auto;\n  align-items: center;\n  margin-right: 10px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.2px;\n  white-space: nowrap;\n  -webkit-overflow-scrolling: touch;\n\n  -ms-overflow-scrolling: touch;\n\n  @media (max-width: 700px) {\n    margin-right: 0;\n  }\n`;\n\nconst SiteNavContent = styled.div`\n  position: relative;\n  align-self: flex-start;\n`;\n\nconst NavStyles = css`\n  position: absolute;\n  z-index: 1000;\n  display: flex;\n  margin: 0 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: 10px 12px;\n    font-size: 1.2rem;\n    color: var(--main-color);\n    opacity: 0.7;\n    transition: opacity 0.2s ease-in-out;\n\n    @media (max-width: 700px) {\n      padding: 10px 8px;\n    }\n  }\n\n  li a:hover {\n    text-decoration: none;\n    opacity: 1;\n  }\n\n  .nav-current {\n    opacity: 1;\n  }\n`;\n\nconst SiteNavRight = styled.div`\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  justify-content: flex-end;\n`;\n\nconst SocialLinks = styled.div`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n\n  @media (max-width: 700px) {\n    .not-mobile {\n      display: none;\n    }\n  }\n`;\n\nconst NavPostTitle = styled.span`\n  position: absolute;\n  top: 10px;\n  transform: translateY(175%);\n  font-size: 1.7rem;\n  font-weight: 400;\n  color: var(--main-color);\n  text-transform: none;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);\n\n  .dash {\n    left: -25px;\n  }\n\n  .dash:before {\n    content: '- ';\n    opacity: 0.5;\n  }\n\n  @media (max-width: 700px) {\n    overflow: hidden;\n    max-width: calc(100vw - 126px);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nconst HideNav = css`\n  ul {\n    transform: translateY(-175%);\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  .nav-post-title {\n    transform: translateY(0);\n    visibility: visible;\n    opacity: 1;\n  }\n`;\n"],"names":["HEIGHT_OFFSET","SiteNav","isPost","post","isScrollDown","isSetScrollDown","useState","lastScrollY","useRef","ticking","onScroll","useCallback","current","requestAnimationFrame","window","scrollY","isScrolled","useEffect","addEventListener","passive","removeEventListener","___EmotionJSX","className","css","outer","SiteNavMain","inner","SiteNavStyles","SiteNavLeft","SiteNavLogo","SiteNavContent","HideNav","NavStyles","role","Link","to","activeClassName","NavPostTitle","title","SiteNavRight","SocialLinks","config","instagram","SocialLink","SocialLinkFb","href","target","rel","Instagram","github","Github","ThemeModeSwitch","name","styles","_styled"],"sourceRoot":""}