{"version":3,"file":"AppHeader.cjs","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client'\n\nimport { DesktopHeader } from './components/desktop/DesktopHeader'\nimport { MobileHeader } from './components/mobile/MobileHeader'\nimport { mediaQuery, useMediaQuery } from './hooks/useMediaQuery'\n\nimport type { HeaderProps } from './types'\nimport type { FC } from 'react'\n\nexport const AppHeader: FC<HeaderProps> = ({ children, ...rest }) => {\n  // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、\n  //  wovn の言語切替カスタム UI の挿入対象となる DOM (\"wovn-embedded-widget-anchor\" クラスを持った div) が複数描画されていると、\n  //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています\n  // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです\n  return (\n    <>\n      <DesktopHeader {...rest}>{isDesktop ? children : undefined}</DesktopHeader>\n      <MobileHeader {...rest}>{isDesktop ? undefined : children}</MobileHeader>\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AASO;;;;;;;AAQL;AAMF;;"}