@twreporter/react-typescript-components 0.1.0-beta.15 → 0.1.0-beta.17

package/lib/{hamburger-menu-Dy0hnv0l.js → hamburger-menu-qrLPGpHF.js}

@@ -2,17 +2,18 @@ const require_chunk = require('./chunk-BxBTb9qk.js');
 const require_constants = require('./constants-BmxSMOOn.js');
 const require_paragraph = require('./paragraph-iuz3jP0Q.js');
 const require_theme = require('./theme-DDBlIbeS.js');
-const require_button = require('./button-D50NHdly.js');
+const require_button = require('./button-Dk0MxlKd.js');
 const require_external_links = require('./external-links-DCn-uTD-.js');
 const require_internal_links = require('./internal-links-DxtMobuI.js');
-const require_external_link = require('./external-link-DoBTwlV3.js');
-const require_internal_link = require('./internal-link-B9ExuJfg.js');
-const require_divider = require('./divider-B1zvSjNJ.js');
+const require_divider = require('./divider-Db3AhImD.js');
+const require_external_link = require('./external-link-BMrkjNyi.js');
+const require_internal_link = require('./internal-link-BLXTBMRq.js');
 const require_context = require('./context-I1lTR5SO.js');
 const require_constants$1 = require('./constants-D8wNUvoZ.js');
 const require_icons = require('./icons-qP5oNB0W.js');
-const require_dropdown_menu = require('./dropdown-menu-BAqmP8qa.js');
+const require_dropdown_menu = require('./dropdown-menu-tbV9rhnw.js');
 const require_logo = require('./logo-BTNfdxTv.js');
+const require_input = require('./input-czWOItrW.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -338,6 +339,10 @@ const HamburgerMenu = () => {
 	const logoType = require_dropdown_menu.selectLogoType(menuTheme);
 	const [activeKey, setActiveKey] = (0, react.useState)("");
 	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	const onSearch = (keywords) => {
+		if (typeof window === "undefined") return;
+		window.location.href = `${require_internal_links.INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`;
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, clsx.default)("w-screen h-screen overflow-y-scroll overscroll-contain", bgColor, `pb-[calc(48px+48px)]`, "tablet:w-[320px] tablet:max-h-screen tablet:pb-0", "desktop:w-[280px]", "[&::-webkit-scrollbar]:w-[4px]", "[&::-webkit-scrollbar]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-[2px]", scrollBarColor),
 		children: [
@@ -391,10 +396,13 @@ const HamburgerMenu = () => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-[32px] pt-[24px] pb-[8px] desktop:hidden",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "text",
-					className: (0, clsx.default)("w-full h-[40px] rounded-[20px] px-[16px]", "focus:outline-none"),
-					placeholder: "搜尋"
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.search_bar_default, {
+					onSearch,
+					autoFocus: false,
+					widthType: require_input.search_bar_default.WidthType.stretch,
+					placeholder: "關鍵字搜尋",
+					theme: menuTheme,
+					releaseBranch
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -486,4 +494,4 @@ Object.defineProperty(exports, 'hamburger_menu_default', {
     return hamburger_menu_default;
   }
 });
-//# sourceMappingURL=hamburger-menu-Dy0hnv0l.js.map
+//# sourceMappingURL=hamburger-menu-qrLPGpHF.js.map

package/lib/hamburger-menu-qrLPGpHF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hamburger-menu-qrLPGpHF.js","names":["INTERNAL_LINKS","EXTERNAL_LINKS","SocialMedias: SocialMediaType[]","MEDIA_TYPE","EXTERNAL_LINKS","HEADER_ACTION_LINKS: ActionLink[]","INTERNAL_LINKS","TYPE","EXTERNAL_LINKS","HAMBURGER_MENU_ACION_LINKS: ActionLink[]","IconLink: FC<IconLinkProps>","HeaderContext","THEME","ExternalLink","InternalLink","selectHamburgerFooterTheme","Icon","P2","IconLink","IconLink: FC<IconLinkProps>","HeaderContext","THEME","selectHamburgerFooterTheme","ExternalLink","InternalLink","P2","SocialMedia: FC<SocialMediaProps>","HeaderContext","THEME","IconButton","SocialMediaIcon","SocialMedia","HamburgerMenu: FC","HeaderContext","HamburgerContext","THEME","selectHamburgerMenuTheme","selectLogoType","ExternalLink","InternalLink","INTERNAL_LINKS","IconButton","Cross","LogoSymbol","LogoHeader","EXTERNAL_LINKS","PillButton","Member","TextButton","SearchBar","selectHamburgerItemTheme","MenuButton","Divider","DropdownMenu","IconLink","LightLink","SocialMedia"],"sources":["../src/hamburger-menu/constants/channels.ts","../src/hamburger-menu/constants/social-media.ts","../src/header/constants/action-links.ts","../src/hamburger-menu/components/icon-link.tsx","../src/hamburger-menu/components/light-link.tsx","../src/hamburger-menu/components/social-media.tsx","../src/hamburger-menu/index.tsx"],"sourcesContent":["import { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\n\nexport const CHANNEL_TYPE = {\n  link: 'link',\n  divider: 'divider',\n  dropdown: 'dropdown',\n  iconLink: 'icon-link',\n  lightLink: 'light-link',\n} as const\n\nexport const Channels = [\n  {\n    type: CHANNEL_TYPE.link,\n    label: '最新',\n    to: INTERNAL_LINKS.latest,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '深度專題',\n    to: INTERNAL_LINKS.topics,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: '議題',\n    dropdownItems: [\n      {\n        label: '國際兩岸',\n        to: INTERNAL_LINKS.categories.world,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '人權司法',\n        to: INTERNAL_LINKS.categories.humanRights,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '政治社會',\n        to: INTERNAL_LINKS.categories.politicsAndSociety,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '醫療健康',\n        to: INTERNAL_LINKS.categories.health,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '環境永續',\n        to: INTERNAL_LINKS.categories.environment,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '經濟產業',\n        to: INTERNAL_LINKS.categories.econ,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '文化生活',\n        to: INTERNAL_LINKS.categories.culture,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '教育校園',\n        to: INTERNAL_LINKS.categories.education,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: '評論',\n    dropdownItems: [\n      {\n        label: '書摘與書評',\n        to: INTERNAL_LINKS.categories.opinion.bookReview,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '讀者投書',\n        to: INTERNAL_LINKS.categories.opinion.letter,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '全部',\n        to: INTERNAL_LINKS.categories.opinion.index,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '人物故事',\n    to: INTERNAL_LINKS.humanStory,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '影像',\n    to: INTERNAL_LINKS.photography,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: 'Podcast',\n    dropdownItems: [\n      {\n        label: '關於報導者 Podcast',\n        to: INTERNAL_LINKS.podcast.aboutPodcast,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: 'The Real Story',\n        to: INTERNAL_LINKS.categories.podcast.theRealStory,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: 'On the Ground 路邊攤計劃',\n        to: INTERNAL_LINKS.categories.podcast.onTheGround,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '少年報導者',\n    to: EXTERNAL_LINKS.kidsReporter,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '報導者觀測站',\n    to: EXTERNAL_LINKS.lawmaker,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '數位敘事',\n    to: INTERNAL_LINKS.infographic,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '個人專區',\n    icon: 'member',\n    to: INTERNAL_LINKS.account.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '我的閱讀',\n    icon: 'kid_star',\n    to: INTERNAL_LINKS.myReading.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '已收藏',\n    icon: 'bookmark_basic',\n    to: INTERNAL_LINKS.myReading.savedBookmarks,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '造訪紀錄',\n    icon: 'history',\n    to: INTERNAL_LINKS.myReading.browsingHistory,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '基金會消息',\n    to: INTERNAL_LINKS.categories.foundation.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '關於我們',\n    to: INTERNAL_LINKS.about,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '影響力報告',\n    to: INTERNAL_LINKS.influenceReport,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '報導者開放實驗室',\n    to: EXTERNAL_LINKS.openLab,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '出版品與周邊',\n    to: EXTERNAL_LINKS.publicationAndMerchandise,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n]\n","import { MEDIA_TYPE, type MediaType } from '../../icons/constants'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype SocialMediaType = {\n  icon: MediaType\n  link: string\n  target: LinkTarget\n}\nexport const SocialMedias: SocialMediaType[] = [\n  {\n    icon: MEDIA_TYPE.facebook,\n    link: EXTERNAL_LINKS.facebook,\n    target: '_blank',\n  },\n  {\n    icon: MEDIA_TYPE.instagram,\n    link: EXTERNAL_LINKS.instagram,\n    target: '_blank',\n  },\n  {\n    icon: MEDIA_TYPE.threads,\n    link: EXTERNAL_LINKS.threads,\n    target: '_blank',\n  },\n  {\n    icon: MEDIA_TYPE.youtube,\n    link: EXTERNAL_LINKS.youtube,\n    target: '_blank',\n  },\n]\n","import { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\nimport { TYPE, type Type } from '../../button/constants'\n\ntype ActionLink = {\n  label: string\n  to: string\n  target: LinkTarget\n  type: Type\n}\n\nexport const HEADER_ACTION_LINKS: ActionLink[] = [\n  {\n    label: '電子報',\n    to: INTERNAL_LINKS.account.emailSubscription,\n    target: '_self' as LinkTarget,\n    type: TYPE.secondary,\n  },\n  {\n    label: '贊助',\n    to: EXTERNAL_LINKS.monthlyDonation,\n    target: '_blank',\n    type: TYPE.primary,\n  },\n]\n\nexport const HAMBURGER_MENU_ACION_LINKS: ActionLink[] = [\n  {\n    label: '訂閱電子報',\n    to: INTERNAL_LINKS.account.emailSubscription,\n    target: '_self',\n    type: TYPE.secondary,\n  },\n  {\n    label: '贊助我們',\n    to: EXTERNAL_LINKS.monthlyDonation,\n    target: '_blank',\n    type: TYPE.primary,\n  },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// theme\nimport { THEME } from '../../constants/theme'\n// utils\nimport { selectHamburgerFooterTheme } from '../utils/theme'\n// icon\nimport { Icon } from '../../icons'\n// text\nimport { P2 } from '../../text/paragraph'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype IconLinkProps = {\n  label: string\n  icon: string\n  to: string\n  target: LinkTarget\n}\nconst IconLink: FC<IconLinkProps> = ({ label, icon, to, target }) => {\n  const { theme, releaseBranch, isLinkExternal } = useContext(HeaderContext)\n  const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  const {\n    color,\n    hoverColor,\n    hoverBgColor,\n    svgHoverBgColor,\n    svgBgColor,\n    activeColor,\n    activeBgColor,\n    svgActiveBgColor,\n  } = selectHamburgerFooterTheme(footerTheme)\n  return (\n    <LinkComponent to={to} target={target}>\n      <div\n        className={clsx(\n          'py-[8px] px-[32px] flex items-center',\n          '[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]',\n          color,\n          hoverColor,\n          hoverBgColor,\n          svgHoverBgColor,\n          svgBgColor,\n          activeColor,\n          activeBgColor,\n          svgActiveBgColor\n        )}\n      >\n        <Icon filename={icon} releaseBranch={releaseBranch} />\n        <P2 text={label} />\n      </div>\n    </LinkComponent>\n  )\n}\n\nexport default IconLink\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// theme\nimport { THEME } from '../../constants/theme'\n// utils\nimport { selectHamburgerFooterTheme } from '../utils/theme'\n// text\nimport { P2 } from '../../text/paragraph'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype IconLinkProps = {\n  label: string\n  to: string\n  target: LinkTarget\n}\nconst IconLink: FC<IconLinkProps> = ({ label, to, target }) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n  const { color, hoverColor, hoverBgColor, activeColor, activeBgColor } =\n    selectHamburgerFooterTheme(footerTheme)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <LinkComponent to={to} target={target}>\n      <div\n        className={clsx(\n          'py-[8px] px-[32px] flex items-center',\n          '[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]',\n          color,\n          hoverColor,\n          hoverBgColor,\n          activeColor,\n          activeBgColor\n        )}\n      >\n        <P2 text={label} />\n      </div>\n    </LinkComponent>\n  )\n}\n\nexport default IconLink\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// icon\nimport { SocialMedia as SocialMediaIcon } from '../../icons'\n// type\nimport type { MediaType } from '../../icons/constants'\n// theme\nimport { THEME } from '../../constants/theme'\n// button\nimport { IconButton } from '../../button'\n\ntype SocialMediaProps = {\n  mediaType: MediaType\n}\nconst SocialMedia: FC<SocialMediaProps> = ({ mediaType }) => {\n  const { theme, releaseBranch } = useContext(HeaderContext)\n  const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n  const Icon = (\n    <SocialMediaIcon mediaType={mediaType} releaseBranch={releaseBranch} />\n  )\n  return (\n    <IconButton\n      iconComponent={Icon}\n      theme={footerTheme}\n      className={clsx(\n        '[&>svg]:h-[32px] [&>svg]:w-[32px]',\n        '[&>svg]:tablet:h-[24px] [&>svg]:tablet:w-[24px]'\n      )}\n    />\n  )\n}\n\nexport default SocialMedia\n","import { useContext, useState, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../header/context'\n// constants\nimport { THEME } from '../constants/theme'\nimport { Channels, CHANNEL_TYPE } from './constants/channels'\nimport { SocialMedias } from './constants/social-media'\nimport { HAMBURGER_MENU_ACION_LINKS } from '../header/constants/action-links'\nimport { INTERNAL_LINKS } from '../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../constants/external-links'\n// utils\nimport {\n  selectHamburgerMenuTheme,\n  selectHamburgerItemTheme,\n} from './utils/theme'\n// buttons\nimport { IconButton, MenuButton, PillButton, TextButton } from '../button'\n// icons\nimport { Cross, Member } from '../icons'\n// logo\nimport { LogoSymbol, LogoHeader } from '../logo'\n// utils\nimport { selectLogoType } from './utils/theme'\n// divider\nimport Divider from '../divider'\n// components\nimport { DropdownMenu } from '../dropdown-menu'\nimport IconLink from './components/icon-link'\nimport LightLink from './components/light-link'\nimport SocialMedia from './components/social-media'\n// link\nimport { ExternalLink, InternalLink } from '../customized-link'\n// search bar\nimport { SearchBar } from '../input'\n\nconst HamburgerMenu: FC = () => {\n  const { theme, releaseBranch, isLinkExternal, isAuthed } =\n    useContext(HeaderContext)\n  const { closeHamburgerMenu } = useContext(HamburgerContext)\n\n  const menuTheme = theme === THEME.photography ? theme : THEME.normal\n  const { bgColor, scrollBarColor } = selectHamburgerMenuTheme(menuTheme)\n  const logoType = selectLogoType(menuTheme)\n  const [activeKey, setActiveKey] = useState('')\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n  const onSearch = (keywords: string) => {\n    if (typeof window === 'undefined') {\n      return\n    }\n    window.location.href = `${INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`\n  }\n\n  return (\n    <div\n      className={clsx(\n        'w-screen h-screen overflow-y-scroll overscroll-contain',\n        bgColor,\n        // reserveHeightForIos15 is 48px\n        `pb-[calc(48px+48px)]`,\n        'tablet:w-[320px] tablet:max-h-screen tablet:pb-0',\n        'desktop:w-[280px]',\n        '[&::-webkit-scrollbar]:w-[4px]',\n        '[&::-webkit-scrollbar]:bg-transparent',\n        '[&::-webkit-scrollbar-thumb]:rounded-[2px]',\n        scrollBarColor\n      )}\n    >\n      {/* close icon */}\n      <div\n        className={clsx(\n          'hidden items-center justify-end pt-[24px] pr-[32px] pb-[16px]',\n          'tablet:flex'\n        )}\n      >\n        <IconButton\n          iconComponent={Cross(releaseBranch)}\n          theme={menuTheme}\n          onClick={closeHamburgerMenu}\n        />\n      </div>\n      {/* logo */}\n      <LinkComponent to={INTERNAL_LINKS.home}>\n        <div\n          className={clsx(\n            'hidden justify-center [&>img]:h-[24px] [&>img]:w-[24px]',\n            'tablet:flex'\n          )}\n        >\n          <LogoSymbol type={logoType} releaseBranch={releaseBranch} />\n        </div>\n      </LinkComponent>\n      {/* mobile hamburger header */}\n      <div\n        className={clsx(\n          'flex items-center justify-between px-[24px] py-[16px]',\n          'tablet:hidden'\n        )}\n      >\n        <LinkComponent to={INTERNAL_LINKS.home}>\n          <LogoHeader\n            type={logoType}\n            releaseBranch={releaseBranch}\n            className=\"h-[21px]\"\n          />\n        </LinkComponent>\n        <div className=\"flex items-center gap-[16px]\">\n          <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n            <PillButton\n              text=\"贊助\"\n              theme={PillButton.Theme.normal}\n              type={PillButton.Type.primary}\n              style={PillButton.Style.brand}\n            />\n          </LinkComponent>\n          <LinkComponent to={INTERNAL_LINKS.account.index}>\n            {isAuthed ? (\n              <IconButton iconComponent={Member(releaseBranch)} />\n            ) : (\n              <TextButton\n                text=\"登入\"\n                theme={TextButton.Theme.normal}\n                style={TextButton.Style.dark}\n                size={TextButton.Size.s}\n              />\n            )}\n          </LinkComponent>\n        </div>\n      </div>\n      {/* search bar (visible on mobile and tablet) */}\n      <div className=\"px-[32px] pt-[24px] pb-[8px] desktop:hidden\">\n        <SearchBar\n          onSearch={onSearch}\n          autoFocus={false}\n          widthType={SearchBar.WidthType.stretch}\n          placeholder=\"關鍵字搜尋\"\n          theme={menuTheme}\n          releaseBranch={releaseBranch}\n        />\n      </div>\n      {/* menu buttons */}\n      <div className=\"flex flex-col pt-[16px]\">\n        {Channels.map((channel, idx) => {\n          if (channel.type === CHANNEL_TYPE.link) {\n            const { color, hoverBgColor, activeBgColor } =\n              selectHamburgerItemTheme(theme)\n            return (\n              <LinkComponent\n                to={channel.to}\n                target={channel.target}\n                key={channel.label}\n              >\n                <MenuButton\n                  key={channel.label}\n                  text={channel.label}\n                  fontWeight={MenuButton.FontWeight.bold}\n                  color={color}\n                  p1ClassName={`${hoverBgColor} ${activeBgColor} pl-[32px] pr-[32px]`}\n                />\n              </LinkComponent>\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.divider) {\n            return (\n              <div className=\"py-[16px] px-[32px]\" key={`divider-${idx}`}>\n                <Divider direction={Divider.Direction.horizontal} />\n              </div>\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.dropdown) {\n            const isActive = activeKey === channel.label\n            const toggleFunc = (key: string) => {\n              const nextActiveKey = activeKey === key ? '' : key\n              setActiveKey(nextActiveKey)\n            }\n            return (\n              <button\n                onClick={() => toggleFunc(channel.label)}\n                key={channel.label}\n                type=\"button\"\n              >\n                <DropdownMenu\n                  text={channel.label}\n                  isActive={isActive}\n                  dropdownItems={channel.dropdownItems}\n                />\n              </button>\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.iconLink) {\n            return (\n              <IconLink\n                label={channel.label}\n                to={channel.to}\n                target={channel.target}\n                icon={channel.icon}\n                key={channel.label}\n              />\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.lightLink) {\n            return (\n              <LightLink\n                label={channel.label}\n                to={channel.to}\n                target={channel.target}\n                key={channel.label}\n              />\n            )\n          }\n        })}\n      </div>\n      {/* social media */}\n      <div className=\"flex flex-row gap-[16px] justify-center\">\n        {SocialMedias.map((socialMedia) => (\n          <LinkComponent\n            to={socialMedia.link}\n            target={socialMedia.target}\n            key={socialMedia.icon}\n          >\n            <SocialMedia mediaType={socialMedia.icon} />\n          </LinkComponent>\n        ))}\n      </div>\n      {/* action butoons */}\n      <div\n        className={clsx(\n          'flex flex-row gap-[16px] px-[32px] pt-[40px] pb-[32px]',\n          'tablet:flex-col'\n        )}\n      >\n        {HAMBURGER_MENU_ACION_LINKS.map((link) => (\n          <LinkComponent\n            to={link.to}\n            target={link.target}\n            key={link.label}\n            className=\"flex-1\"\n          >\n            <PillButton\n              text={link.label}\n              theme={theme}\n              type={link.type}\n              className=\"w-full justify-center\"\n              size={PillButton.Size.l}\n            />\n          </LinkComponent>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default HamburgerMenu\n"],"mappings":"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"}

package/lib/header/index.d.mts

@@ -1,6 +1,6 @@
-import "../index-CYb6xr3M.mjs";
-import { Theme } from "../theme-lCi6tmmS.mjs";
-import { ReleaseBranch } from "../release-branch-BqeBsvrl.mjs";
+import "../index-DaRD2S-9.mjs";
+import { Theme } from "../theme-B9CWW8U9.mjs";
+import { ReleaseBranch } from "../release-branch-8qGtkKtd.mjs";
 import { FC } from "react";
 
 //#region src/header/context/index.d.ts

package/lib/header/index.js

@@ -3,26 +3,31 @@ require('../constants-BmxSMOOn.js');
 require('../constants-Cndhv6qr.js');
 require('../paragraph-iuz3jP0Q.js');
 const require_theme = require('../theme-DDBlIbeS.js');
-const require_button = require('../button-D50NHdly.js');
+const require_button = require('../button-Dk0MxlKd.js');
 const require_external_links = require('../external-links-DCn-uTD-.js');
 const require_internal_links = require('../internal-links-DxtMobuI.js');
 const require_release_branch = require('../release-branch-CRZV4Ivz.js');
 const require_request_origins = require('../request-origins-BDXulkK9.js');
-const require_external_link = require('../external-link-DoBTwlV3.js');
-const require_internal_link = require('../internal-link-B9ExuJfg.js');
-require('../customized-link-DqW2a8oZ.js');
-require('../constants-nmH6p6-y.js');
-const require_divider = require('../divider-B1zvSjNJ.js');
+require('../constants-BuIUKM2c.js');
+const require_divider = require('../divider-Db3AhImD.js');
+const require_external_link = require('../external-link-BMrkjNyi.js');
+const require_internal_link = require('../internal-link-BLXTBMRq.js');
+require('../customized-link-XNoMkeYw.js');
 const require_context = require('../context-I1lTR5SO.js');
 require('../constants-D8wNUvoZ.js');
 const require_icons = require('../icons-qP5oNB0W.js');
 const require_constants$4 = require('../constants-C2moxnps.js');
-require('../dropdown-menu-BAqmP8qa.js');
-const require_hamburger_menu = require('../hamburger-menu-Dy0hnv0l.js');
+require('../dropdown-menu-tbV9rhnw.js');
+const require_hamburger_menu = require('../hamburger-menu-qrLPGpHF.js');
 const require_logo = require('../logo-BTNfdxTv.js');
-const require_tab_bar = require('../tab-bar-Dv2TkUW1.js');
-require('../theme-W--MzZEH.js');
-require('../constants-BNxn_qJc.js');
+require('../constants-BP47D2l7.js');
+require('../theme-CIEkzycI.js');
+const require_input = require('../input-czWOItrW.js');
+const require_tab_bar = require('../tab-bar-Binq1EhQ.js');
+const require_use_outside_click = require('../use-outside-click-436PXIeY.js');
+require('../hooks-Mt5N4Z2W.js');
+require('../theme-BOMyqC4d.js');
+require('../constants-91DoZaeP.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -53,16 +58,50 @@ const ANIMATION = {
 
 //#endregion
 //#region src/header/components/top-row/icons.tsx
+const SearchIcon = () => {
+	const [isSearchOpened, setSearchOpened] = (0, react.useState)(false);
+	const { releaseBranch, theme } = (0, react.useContext)(require_context.HeaderContext);
+	const closeSearchBox = () => {
+		setSearchOpened(false);
+	};
+	const ref = require_use_outside_click.useOutsideClick(closeSearchBox);
+	const handleClickSearch = (e) => {
+		e.preventDefault();
+		setSearchOpened(true);
+		if (!ref.current) return;
+		ref.current.getElementsByTagName("input")[0]?.focus();
+	};
+	const onSearch = (keywords) => {
+		setSearchOpened(false);
+		if (typeof window !== "undefined") window.location.href = `${require_internal_links.INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
+			iconComponent: require_icons.Search(releaseBranch),
+			theme,
+			onClick: handleClickSearch,
+			className: (0, clsx.default)("transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-0 pointer-events-none" : "opacity-100")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-100" : "opacity-0 pointer-events-none", isSearchOpened ? "z-999" : "-z-1"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.search_bar_default, {
+				placeholder: "關鍵字搜尋",
+				theme,
+				onClose: closeSearchBox,
+				onSearch,
+				releaseBranch
+			})
+		})]
+	}, "search");
+};
 const Icons = ({ releaseBranch = require_release_branch.RELEASE_BRANCH.master, theme = require_theme.THEME.normal }) => {
 	const { isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
 	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "ml-[24px] flex flex-row gap-[16px]",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-				iconComponent: require_icons.Search(releaseBranch),
-				theme
-			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, {}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
 				to: require_internal_links.INTERNAL_LINKS.myReading.index,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
@@ -435,7 +474,7 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 	const isAuthed = useAuthStore((s) => s.isAuthed);
 	const { bgColor, topRowBgColor } = selectHeaderTheme(theme);
 	const logoType = selectLogoType(theme);
-	const { isHamburgerMenuOpen } = hamburgerContext;
+	const { isHamburgerMenuOpen, closeHamburgerMenu } = hamburgerContext;
 	const [toUseNarrow, setToUseNarrow] = (0, react.useState)(false);
 	const [hideHeader, setHideHeader] = (0, react.useState)(false);
 	const lastKnownPageYOffset = (0, react.useRef)(0);
@@ -444,6 +483,7 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 	const readyY = (0, react.useRef)(0);
 	const isTransforming = (0, react.useRef)(false);
 	const transformTimer = (0, react.useRef)(null);
+	const outsideRef = require_use_outside_click.useOutsideClick(closeHamburgerMenu);
 	const getScrollState = (0, react.useCallback)((scrollTop, scrollDirection) => {
 		const isCurrentNarrow = toUseNarrow;
 		const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
@@ -524,6 +564,7 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: outsideRef,
 					className: (0, clsx.default)(`fixed top-0 left-0 ${require_tab_bar.ZIndex.hamburger} transition-transform duration-300 ease-in-out`, isHamburgerMenuOpen ? "translate-x-0 opacity-100" : "-translate-x-full opacity-100", "tablet:-left-[320px]", isHamburgerMenuOpen ? "tablet:translate-x-[320px] tablet:opacity-100" : "tablet:-translate-x-[320px] tablet:opacity-100", "desktop:-left-[280px]", isHamburgerMenuOpen ? "desktop:translate-x-[280px] desktop:opacity-100" : "desktop:-translate-x-[280px] desktop:opacity-100"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hamburger_menu.hamburger_menu_default, {})
 				}),

package/lib/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","RELEASE_BRANCH","THEME","HeaderContext","ExternalLink","InternalLink","IconButton","Search","INTERNAL_LINKS","KidStar","Member","THEME","LOGO_TYPE","TopRow: FC<TopRowProps>","HeaderContext","HamburgerContext","ExternalLink","InternalLink","ZIndex","IconButton","Hamburger","INTERNAL_LINKS","LogoHeader","HEADER_ACTION_LINKS","PillButton","CHANNELS: ChannelType[]","INTERNAL_LINKS","_","ChannelItem: FC<ChannelItemProps>","HeaderContext","ExternalLink","InternalLink","TextButton","HamburgerContext","IconButton","Hamburger","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","HeaderContext","TopRow","Divider","ZIndex","CSSTransition","Channel","RELEASE_BRANCH","forClientSideRendering","TabletAndBelow: FC<TabletAndBelowProps>","HeaderContext","ExternalLink","InternalLink","INTERNAL_LINKS","ZIndex","IconButton","Arrow","LogoHeader","EXTERNAL_LINKS","PillButton","Member","TextButton","creator: StateCreator<AuthState>","Header: FC<HeaderProps>","HeaderContext","HamburgerContext","ZIndex","THEME","DesktopAndAbove","TabletAndBelow","HamburgerMenu","TabBar"],"sources":["../../src/header/constants/animation.ts","../../src/header/components/top-row/icons.tsx","../../src/header/utils/theme.ts","../../src/header/components/top-row/index.tsx","../../src/header/components/channels/constants/index.ts","../../src/header/components/channels/index.tsx","../../src/header/components/desktop-and-above.tsx","../../src/header/utils/links.ts","../../src/header/components/tablet-and-below.tsx","../../src/header/store/auth-store.ts","../../src/header/index.tsx"],"sourcesContent":["export const ANIMATION = {\n  step1Duration: 'duration-[200ms]',\n  step2Delay: 'delay-[150ms]',\n  step2Duration: 'duration-[50ms]',\n  step3Delay: 'delay-[150ms]',\n  step3Duration: 'duration-[200ms]',\n} as const\n","import { useContext, type FC } from 'react'\n// context\nimport { HeaderContext } from '../../context'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../../constants/release-branch'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// icons\nimport { Search, KidStar, Member } from '../../../icons'\n// button\nimport { IconButton } from '../../../button'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\nexport const Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}> = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {\n  const { isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className=\"ml-[24px] flex flex-row gap-[16px]\">\n      <IconButton iconComponent={Search(releaseBranch)} theme={theme} />\n      <LinkComponent to={INTERNAL_LINKS.myReading.index}>\n        <IconButton iconComponent={KidStar(releaseBranch)} theme={theme} />\n      </LinkComponent>\n      <LinkComponent to={INTERNAL_LINKS.account.index}>\n        <IconButton iconComponent={Member(releaseBranch)} theme={theme} />\n      </LinkComponent>\n    </div>\n  )\n}\n","import { THEME, type Theme } from '../../constants/theme'\nimport { LOGO_TYPE } from '../../logo/constants'\n\nexport const selectLogoType = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return LOGO_TYPE.white\n    default:\n      return LOGO_TYPE.default\n  }\n}\n\nexport const selectHeaderTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n        topRowBgColor: 'bg-photo-dark',\n      }\n    case THEME.transparent:\n      return {\n        bgColor: 'bg-opacity-black-02',\n        topRowBgColor: 'bg-transparent',\n      }\n    case THEME.index:\n      return {\n        bgColor: 'bg-gray-white',\n        topRowBgColor: 'bg-gray-white',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n        topRowBgColor: 'bg-gray-100',\n      }\n  }\n}\n\nexport const selectSloganTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return 'text-gray-white'\n    default:\n      return 'text-gray-800'\n  }\n}\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// constants\nimport { ZIndex } from '../../constants/z-index'\nimport { ANIMATION } from '../../constants/animation'\nimport { HEADER_ACTION_LINKS } from '../../constants/action-links'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// logo\nimport { LogoHeader } from '../../../logo'\nimport type { LogoType } from '../../../logo/constants'\n// buton\nimport { IconButton, PillButton } from '../../../button'\n// components\nimport { Icons } from './icons'\nimport { Hamburger } from '../../../icons'\n// utils\nimport { selectSloganTheme } from '../../utils/theme'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\ntype TopRowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TopRow: FC<TopRowProps> = ({ topRowBgColor, logoType }) => {\n  const { toUseNarrow, releaseBranch, theme, isLinkExternal } =\n    useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`,\n        toUseNarrow ? 'py-[16px]' : 'py-[24px]'\n      )}\n    >\n      {/* left group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            toUseNarrow ? 'opacity-100' : 'opacity-0',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'delay-[350ms]' : 'delay-0'\n          )}\n        >\n          <IconButton\n            iconComponent={Hamburger(releaseBranch)}\n            theme={theme}\n            onClick={toggleHamburger}\n          />\n        </div>\n        {/* Logo */}\n        <div\n          className={clsx(\n            `flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'ml-[24px]' : 'ml-0',\n            toUseNarrow ? 'translate-x-0' : '-translate-x-[24px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n          )}\n        >\n          <LinkComponent to={INTERNAL_LINKS.home}>\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(\n                `transition-height ${ANIMATION.step3Duration}`,\n                toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n                toUseNarrow ? 'h-[24px]' : 'h-[32px]'\n              )}\n            />\n          </LinkComponent>\n        </div>\n        <div\n          className={clsx(\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            'flex items-center font-serif font-normal text-[14px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100',\n            selectSloganTheme(theme)\n          )}\n        >\n          深度 × 開放 × 非營利\n        </div>\n      </div>\n      {/* right group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            'flex items-center gap-[16px]',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100'\n          )}\n        >\n          {HEADER_ACTION_LINKS.map((link) => (\n            <LinkComponent to={link.to} target={link.target} key={link.label}>\n              <PillButton text={link.label} theme={theme} type={link.type} />\n            </LinkComponent>\n          ))}\n        </div>\n        {/* icons */}\n        <Icons releaseBranch={releaseBranch} theme={theme} />\n      </div>\n    </div>\n  )\n}\n\nexport default TopRow\n","import { INTERNAL_LINKS } from '../../../../constants/internal-links'\nimport type { LinkTarget } from '../../../../customized-link/type'\n\ntype ChannelType = {\n  label: string\n  to: string\n  target: LinkTarget\n}\nexport const CHANNELS: ChannelType[] = [\n  {\n    label: '最新',\n    to: INTERNAL_LINKS.latest,\n    target: '_self',\n  },\n  {\n    label: '深度專題',\n    to: INTERNAL_LINKS.topics,\n    target: '_self',\n  },\n  {\n    label: '國際兩岸',\n    to: INTERNAL_LINKS.categories.world,\n    target: '_self',\n  },\n  {\n    label: '人權司法',\n    to: INTERNAL_LINKS.categories.humanRights,\n    target: '_self',\n  },\n  {\n    label: '政治社會',\n    to: INTERNAL_LINKS.categories.politicsAndSociety,\n    target: '_self',\n  },\n  {\n    label: '醫療健康',\n    to: INTERNAL_LINKS.categories.health,\n    target: '_self',\n  },\n  {\n    label: '環境永續',\n    to: INTERNAL_LINKS.categories.environment,\n    target: '_self',\n  },\n  {\n    label: '經濟產業',\n    to: INTERNAL_LINKS.categories.econ,\n    target: '_self',\n  },\n  {\n    label: '文化生活',\n    to: INTERNAL_LINKS.categories.culture,\n    target: '_self',\n  },\n  {\n    label: '教育校園',\n    to: INTERNAL_LINKS.categories.education,\n    target: '_self',\n  },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\ntype ChannelItemProps = {\n  link: {\n    href: string\n    target: LinkTarget\n  }\n  label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n  link = { href: '', target: '_self' },\n  label = '',\n}) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n      <LinkComponent to={link.href} target={link.target}>\n        <TextButton\n          text={label}\n          size={TextButton.Size.l}\n          theme={theme}\n          style={TextButton.Style.dark}\n        />\n      </LinkComponent>\n    </div>\n  )\n}\n\nconst Channel = () => {\n  const { releaseBranch, theme } = useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n        <IconButton\n          iconComponent={Hamburger(releaseBranch)}\n          theme={theme}\n          onClick={toggleHamburger}\n        />\n        {_.map(CHANNELS, (channel) => {\n          return (\n            <ChannelItem\n              key={`channel-${channel.label}`}\n              label={channel.label}\n              link={{\n                href: channel.to,\n                target: channel.target,\n              }}\n            />\n          )\n        })}\n      </div>\n      <Divider />\n    </div>\n  )\n}\n\nexport default Channel\n","import { useContext, useRef, type FC } from 'react'\nimport clsx from 'clsx'\nimport { CSSTransition } from 'react-transition-group'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { ANIMATION } from '../constants/animation'\n// compontents\nimport TopRow from './top-row'\nimport Channel from './channels'\nimport Divider from '../../divider'\n// type\nimport type { LogoType } from '../../logo/constants'\ntype DesktopAndAboveProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst DesktopAndAbove: FC<DesktopAndAboveProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const { toUseNarrow } = useContext(HeaderContext)\n  const channelRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"hidden desktop:flex desktop:flex-col\">\n      <TopRow topRowBgColor={topRowBgColor} logoType={logoType} />\n      {/* divider */}\n      <div\n        className={clsx(\n          `transition-opacity ${ANIMATION.step2Duration}`,\n          toUseNarrow ? 'opacity-0' : 'opacity-100',\n          toUseNarrow ? 'delay-0' : `${ANIMATION.step2Delay}`\n        )}\n      >\n        <Divider direction={Divider.Direction.horizontal} />\n      </div>\n      {/* channels */}\n      <div className={`${ZIndex.channel}`}>\n        <CSSTransition\n          in={!toUseNarrow}\n          nodeRef={channelRef}\n          classNames={{\n            enter: `opacity-0 -translate-y-full`,\n            enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,\n            exit: `opacity-100 translate-y-0`,\n            exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`,\n          }}\n          timeout={{ appear: 0, enter: 350, exit: 200 }}\n          unmountOnExit\n        >\n          <div ref={channelRef}>\n            <Channel />\n          </div>\n        </CSSTransition>\n      </div>\n    </div>\n  )\n}\n\nexport default DesktopAndAbove\n","import {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../constants/release-branch'\nimport { forClientSideRendering } from '../../constants/request-origins'\n\nexport const checkReferrer = (\n  referrer: string = '',\n  releaseBranch: ReleaseBranch = RELEASE_BRANCH.master\n) => {\n  try {\n    const url = new URL(referrer)\n    return url.origin === forClientSideRendering[releaseBranch].main\n  } catch (_err) {\n    return false\n  }\n}\n","import { useContext, useState, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton, IconButton } from '../../button'\n// icon\nimport { Arrow, Member } from '../../icons'\n// utils\nimport { checkReferrer } from '../utils/links'\n// lodash\nimport some from 'lodash/some'\nimport includes from 'lodash/includes'\nimport throttle from 'lodash/throttle'\nconst _ = {\n  some,\n  includes,\n  throttle,\n}\n\ntype TabletAndBelowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const {\n    isLinkExternal,\n    releaseBranch,\n    theme,\n    pathname,\n    referrerPath,\n    isAuthed,\n  } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n  const [currentClientWidth, setCurrentClientWidth] = useState(0)\n  useEffect(() => {\n    const handleResize = _.throttle(() => {\n      setCurrentClientWidth(document.body.clientWidth)\n    }, 200)\n\n    handleResize()\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  const isOnArticlePage = _.includes(pathname, `${INTERNAL_LINKS.article}/`)\n  const needPrevIconRoute = [\n    INTERNAL_LINKS.account.donationHistoryPage,\n    INTERNAL_LINKS.account.emailSubscription,\n    INTERNAL_LINKS.myReading.savedBookmarks,\n    INTERNAL_LINKS.myReading.browsingHistory,\n  ]\n  const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) =>\n    _.includes(pathname, el)\n  )\n\n  const showPrevIcon =\n    isOnArticlePage || (isOnNeedPrevIconPage && currentClientWidth < 768) // only show it on mobile\n\n  const gotoPrev = () => {\n    if (referrerPath || checkReferrer(document.referrer, releaseBranch)) {\n      // go to previous page when referer is twreporter site\n      window.history.back()\n    } else {\n      // go to home page when referer is not twreporter site\n      window.location.href = '/'\n    }\n  }\n\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n        'desktop:hidden'\n      )}\n    >\n      <div className=\"flex flex-row gap-[8px]\">\n        {/* pre button */}\n        {showPrevIcon ? (\n          <div className=\"p-[4px] -translate-x-[8px]\">\n            <IconButton\n              iconComponent={\n                <Arrow\n                  direction={Arrow.Direction.left}\n                  releaseBranch={releaseBranch}\n                />\n              }\n              theme={theme}\n              onClick={gotoPrev}\n            />\n          </div>\n        ) : null}\n        {/* logo */}\n        <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n          <LogoHeader type={logoType} className=\"h-[21px]\" />\n        </LinkComponent>\n      </div>\n      {/* actions */}\n      <div className=\"flex flex-row items-center gap-[16px]\">\n        <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n          <PillButton\n            text=\"贊助\"\n            theme={PillButton.Theme.normal}\n            type={PillButton.Type.primary}\n            style={PillButton.Style.brand}\n          />\n        </LinkComponent>\n        <LinkComponent to={INTERNAL_LINKS.account.index}>\n          {isAuthed ? (\n            <IconButton iconComponent={Member(releaseBranch)} />\n          ) : (\n            <TextButton\n              text=\"登入\"\n              theme={TextButton.Theme.normal}\n              style={TextButton.Style.dark}\n              size={TextButton.Size.s}\n            />\n          )}\n        </LinkComponent>\n      </div>\n    </div>\n  )\n}\n\nexport default TabletAndBelow\n","import { create, type StateCreator } from 'zustand'\n\nexport type AuthState = {\n  isAuthed: boolean\n  token?: string\n  setAuthed: (isAuthed: boolean) => void\n  setToken: (token?: string) => void\n  reset: () => void\n}\n\nconst creator: StateCreator<AuthState> = (set) => ({\n  isAuthed: false,\n  token: undefined,\n  setAuthed: (isAuthed: boolean) => set({ isAuthed }),\n  setToken: (token?: string) => set({ token }),\n  reset: () => set({ isAuthed: false, token: undefined }),\n})\n\nexport const useAuthStore = create<AuthState>()(creator)\n","import { useRef, useState, useCallback, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n\n// constants\nimport { THEME, type Theme } from '../constants/theme'\nimport type { ReleaseBranch } from '../constants/release-branch'\nimport { ZIndex } from './constants/z-index'\n// components\nimport DesktopAndAbove from './components/desktop-and-above'\nimport TabletAndBelow from './components/tablet-and-below'\n// context\nimport {\n  HeaderContext,\n  HamburgerContext,\n  type HamburgerContextType,\n} from './context'\n// utils\nimport { selectHeaderTheme, selectLogoType } from './utils/theme'\n// hamburger menu\nimport HamburgerMenu from '../hamburger-menu'\n// tab bar\nimport TabBar from '../tab-bar'\nimport { useAuthStore, type AuthState } from './store/auth-store'\n\nconst HIDE_HEADER_THRESHOLD = 8\nconst TRANSFORM_HEADER_THRESHOLD = 40\nconst TRANSFORM_TIMEOUT = 800\n\ntype HeaderProps = {\n  releaseBranch: ReleaseBranch\n  isLinkExternal: boolean\n  theme: Theme\n  pathname: string\n  referrerPath: string\n  hamburgerContext: HamburgerContextType\n}\nconst Header: FC<HeaderProps> = ({\n  releaseBranch,\n  isLinkExternal,\n  theme,\n  pathname,\n  referrerPath,\n  hamburgerContext,\n}) => {\n  const isAuthed = useAuthStore((s: AuthState) => s.isAuthed)\n  const { bgColor, topRowBgColor } = selectHeaderTheme(theme)\n  const logoType = selectLogoType(theme)\n\n  const { isHamburgerMenuOpen } = hamburgerContext\n\n  const [toUseNarrow, setToUseNarrow] = useState(false)\n  const [hideHeader, setHideHeader] = useState(false)\n\n  const lastKnownPageYOffset = useRef(0)\n  const ticking = useRef(false)\n  const currentY = useRef(0)\n  const readyY = useRef(0)\n  const isTransforming = useRef(false)\n  const transformTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const getScrollState = useCallback(\n    (scrollTop: number, scrollDirection: 'up' | 'down') => {\n      const isCurrentNarrow = toUseNarrow\n      const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD\n      const scrollState = { toUseNarrow, hideHeader }\n\n      if (isTransforming.current) {\n        return scrollState\n      }\n\n      if (scrollDirection === 'up') {\n        readyY.current = scrollTop\n        scrollState.hideHeader = false\n      }\n\n      if (scrollDirection === 'down') {\n        if (\n          isCurrentNarrow &&\n          scrollTop - readyY.current > HIDE_HEADER_THRESHOLD\n        ) {\n          scrollState.hideHeader = true\n        }\n      }\n\n      if (isCurrentNarrow) {\n        scrollState.toUseNarrow =\n          scrollDirection === 'down' ? true : nextToUseNarrow\n      } else {\n        scrollState.toUseNarrow =\n          scrollDirection === 'up' ? false : nextToUseNarrow\n      }\n\n      if (isCurrentNarrow !== scrollState.toUseNarrow) {\n        if (!transformTimer.current) {\n          isTransforming.current = true\n          transformTimer.current = setTimeout(() => {\n            isTransforming.current = false\n            readyY.current = currentY.current\n            transformTimer.current = null\n          }, TRANSFORM_TIMEOUT)\n        }\n      }\n\n      return scrollState\n    },\n    [toUseNarrow, hideHeader]\n  )\n\n  const updateScrollState = useCallback(\n    (currentScrollTop: number) => {\n      const scrollDirection =\n        currentScrollTop > currentY.current ? 'down' : 'up'\n      currentY.current = currentScrollTop\n      const updateState = getScrollState(currentScrollTop, scrollDirection)\n      setToUseNarrow(() => updateState.toUseNarrow)\n      setHideHeader(() => updateState.hideHeader)\n    },\n    [getScrollState]\n  )\n\n  const handleScroll = useCallback(() => {\n    lastKnownPageYOffset.current = window.pageYOffset\n    if (!ticking.current) {\n      window.requestAnimationFrame(() => {\n        updateScrollState(lastKnownPageYOffset.current)\n        ticking.current = false\n      })\n      ticking.current = true\n    }\n  }, [updateScrollState])\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll, { passive: true })\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [handleScroll])\n\n  return (\n    <HeaderContext\n      value={{\n        releaseBranch,\n        isLinkExternal,\n        isAuthed,\n        theme,\n        pathname,\n        referrerPath,\n        toUseNarrow,\n        hideHeader,\n      }}\n    >\n      <HamburgerContext value={hamburgerContext}>\n        <header\n          className={clsx(\n            `w-full top-0 transition-transform duration-300 ${bgColor} ${ZIndex.header}`,\n            theme === THEME.transparent ? 'fixed' : 'sticky',\n            hideHeader ? 'ease-in' : 'ease-out',\n            hideHeader ? '-translate-y-full' : 'translate-y-0'\n          )}\n        >\n          <div\n            className={clsx(\n              `flex flex-col mx-auto px-[24px]`,\n              'tablet:px-[32px]',\n              'desktop:px-[48px]',\n              'hd:w-[1280px] hd:px-0'\n            )}\n          >\n            <DesktopAndAbove\n              topRowBgColor={topRowBgColor}\n              logoType={logoType}\n            />\n            <TabletAndBelow topRowBgColor={topRowBgColor} logoType={logoType} />\n          </div>\n        </header>\n        <div\n          className={clsx(\n            `fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen\n              ? 'translate-x-0 opacity-100'\n              : '-translate-x-full opacity-100',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:-translate-x-[320px] tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:-translate-x-[280px] desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n        <TabBar />\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HeaderContext","useOutsideClick","INTERNAL_LINKS","IconButton","Search","SearchBar","Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","RELEASE_BRANCH","THEME","ExternalLink","InternalLink","KidStar","Member","THEME","LOGO_TYPE","TopRow: FC<TopRowProps>","HeaderContext","HamburgerContext","ExternalLink","InternalLink","ZIndex","IconButton","Hamburger","INTERNAL_LINKS","LogoHeader","HEADER_ACTION_LINKS","PillButton","CHANNELS: ChannelType[]","INTERNAL_LINKS","_","ChannelItem: FC<ChannelItemProps>","HeaderContext","ExternalLink","InternalLink","TextButton","HamburgerContext","IconButton","Hamburger","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","HeaderContext","TopRow","Divider","ZIndex","CSSTransition","Channel","RELEASE_BRANCH","forClientSideRendering","TabletAndBelow: FC<TabletAndBelowProps>","HeaderContext","ExternalLink","InternalLink","INTERNAL_LINKS","ZIndex","IconButton","Arrow","LogoHeader","EXTERNAL_LINKS","PillButton","Member","TextButton","creator: StateCreator<AuthState>","Header: FC<HeaderProps>","useOutsideClick","HeaderContext","HamburgerContext","ZIndex","THEME","DesktopAndAbove","TabletAndBelow","HamburgerMenu","TabBar"],"sources":["../../src/header/constants/animation.ts","../../src/header/components/top-row/icons.tsx","../../src/header/utils/theme.ts","../../src/header/components/top-row/index.tsx","../../src/header/components/channels/constants/index.ts","../../src/header/components/channels/index.tsx","../../src/header/components/desktop-and-above.tsx","../../src/header/utils/links.ts","../../src/header/components/tablet-and-below.tsx","../../src/header/store/auth-store.ts","../../src/header/index.tsx"],"sourcesContent":["export const ANIMATION = {\n  step1Duration: 'duration-[200ms]',\n  step2Delay: 'delay-[150ms]',\n  step2Duration: 'duration-[50ms]',\n  step3Delay: 'delay-[150ms]',\n  step3Duration: 'duration-[200ms]',\n} as const\n","import { useContext, useState, type FC, type MouseEvent } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../context'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../../constants/release-branch'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// icons\nimport { Search, KidStar, Member } from '../../../icons'\n// button\nimport { IconButton } from '../../../button'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n// hooks\nimport { useOutsideClick } from '../../../hooks'\n// search bar\nimport { SearchBar } from '../../../input'\n\nconst SearchIcon = () => {\n  const [isSearchOpened, setSearchOpened] = useState(false)\n  const { releaseBranch, theme } = useContext(HeaderContext)\n\n  const closeSearchBox = () => {\n    setSearchOpened(false)\n  }\n  const ref = useOutsideClick(closeSearchBox)\n\n  const handleClickSearch = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    setSearchOpened(true)\n    if (!ref.current) return\n    const input = ref.current.getElementsByTagName('input')[0]\n    input?.focus()\n  }\n\n  const onSearch = (keywords: string) => {\n    setSearchOpened(false)\n    if (typeof window !== 'undefined') {\n      window.location.href = `${INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`\n    }\n  }\n\n  return (\n    <div className=\"relative\" ref={ref} key=\"search\">\n      <IconButton\n        iconComponent={Search(releaseBranch)}\n        theme={theme}\n        onClick={handleClickSearch}\n        className={clsx(\n          'transition-opacity ease-in-out duration-[300ms]',\n          isSearchOpened ? 'opacity-0 pointer-events-none' : 'opacity-100'\n        )}\n      />\n      <div\n        className={clsx(\n          'absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]',\n          isSearchOpened ? 'opacity-100' : 'opacity-0 pointer-events-none',\n          isSearchOpened ? 'z-999' : '-z-1'\n        )}\n      >\n        <SearchBar\n          placeholder=\"關鍵字搜尋\"\n          theme={theme}\n          onClose={closeSearchBox}\n          onSearch={onSearch}\n          releaseBranch={releaseBranch}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport const Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}> = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {\n  const { isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className=\"ml-[24px] flex flex-row gap-[16px]\">\n      <SearchIcon />\n      <LinkComponent to={INTERNAL_LINKS.myReading.index}>\n        <IconButton iconComponent={KidStar(releaseBranch)} theme={theme} />\n      </LinkComponent>\n      <LinkComponent to={INTERNAL_LINKS.account.index}>\n        <IconButton iconComponent={Member(releaseBranch)} theme={theme} />\n      </LinkComponent>\n    </div>\n  )\n}\n","import { THEME, type Theme } from '../../constants/theme'\nimport { LOGO_TYPE } from '../../logo/constants'\n\nexport const selectLogoType = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return LOGO_TYPE.white\n    default:\n      return LOGO_TYPE.default\n  }\n}\n\nexport const selectHeaderTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n        topRowBgColor: 'bg-photo-dark',\n      }\n    case THEME.transparent:\n      return {\n        bgColor: 'bg-opacity-black-02',\n        topRowBgColor: 'bg-transparent',\n      }\n    case THEME.index:\n      return {\n        bgColor: 'bg-gray-white',\n        topRowBgColor: 'bg-gray-white',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n        topRowBgColor: 'bg-gray-100',\n      }\n  }\n}\n\nexport const selectSloganTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return 'text-gray-white'\n    default:\n      return 'text-gray-800'\n  }\n}\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// constants\nimport { ZIndex } from '../../constants/z-index'\nimport { ANIMATION } from '../../constants/animation'\nimport { HEADER_ACTION_LINKS } from '../../constants/action-links'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// logo\nimport { LogoHeader } from '../../../logo'\nimport type { LogoType } from '../../../logo/constants'\n// buton\nimport { IconButton, PillButton } from '../../../button'\n// components\nimport { Icons } from './icons'\nimport { Hamburger } from '../../../icons'\n// utils\nimport { selectSloganTheme } from '../../utils/theme'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\ntype TopRowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TopRow: FC<TopRowProps> = ({ topRowBgColor, logoType }) => {\n  const { toUseNarrow, releaseBranch, theme, isLinkExternal } =\n    useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`,\n        toUseNarrow ? 'py-[16px]' : 'py-[24px]'\n      )}\n    >\n      {/* left group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            toUseNarrow ? 'opacity-100' : 'opacity-0',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'delay-[350ms]' : 'delay-0'\n          )}\n        >\n          <IconButton\n            iconComponent={Hamburger(releaseBranch)}\n            theme={theme}\n            onClick={toggleHamburger}\n          />\n        </div>\n        {/* Logo */}\n        <div\n          className={clsx(\n            `flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'ml-[24px]' : 'ml-0',\n            toUseNarrow ? 'translate-x-0' : '-translate-x-[24px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n          )}\n        >\n          <LinkComponent to={INTERNAL_LINKS.home}>\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(\n                `transition-height ${ANIMATION.step3Duration}`,\n                toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n                toUseNarrow ? 'h-[24px]' : 'h-[32px]'\n              )}\n            />\n          </LinkComponent>\n        </div>\n        <div\n          className={clsx(\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            'flex items-center font-serif font-normal text-[14px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100',\n            selectSloganTheme(theme)\n          )}\n        >\n          深度 × 開放 × 非營利\n        </div>\n      </div>\n      {/* right group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            'flex items-center gap-[16px]',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100'\n          )}\n        >\n          {HEADER_ACTION_LINKS.map((link) => (\n            <LinkComponent to={link.to} target={link.target} key={link.label}>\n              <PillButton text={link.label} theme={theme} type={link.type} />\n            </LinkComponent>\n          ))}\n        </div>\n        {/* icons */}\n        <Icons releaseBranch={releaseBranch} theme={theme} />\n      </div>\n    </div>\n  )\n}\n\nexport default TopRow\n","import { INTERNAL_LINKS } from '../../../../constants/internal-links'\nimport type { LinkTarget } from '../../../../customized-link/type'\n\ntype ChannelType = {\n  label: string\n  to: string\n  target: LinkTarget\n}\nexport const CHANNELS: ChannelType[] = [\n  {\n    label: '最新',\n    to: INTERNAL_LINKS.latest,\n    target: '_self',\n  },\n  {\n    label: '深度專題',\n    to: INTERNAL_LINKS.topics,\n    target: '_self',\n  },\n  {\n    label: '國際兩岸',\n    to: INTERNAL_LINKS.categories.world,\n    target: '_self',\n  },\n  {\n    label: '人權司法',\n    to: INTERNAL_LINKS.categories.humanRights,\n    target: '_self',\n  },\n  {\n    label: '政治社會',\n    to: INTERNAL_LINKS.categories.politicsAndSociety,\n    target: '_self',\n  },\n  {\n    label: '醫療健康',\n    to: INTERNAL_LINKS.categories.health,\n    target: '_self',\n  },\n  {\n    label: '環境永續',\n    to: INTERNAL_LINKS.categories.environment,\n    target: '_self',\n  },\n  {\n    label: '經濟產業',\n    to: INTERNAL_LINKS.categories.econ,\n    target: '_self',\n  },\n  {\n    label: '文化生活',\n    to: INTERNAL_LINKS.categories.culture,\n    target: '_self',\n  },\n  {\n    label: '教育校園',\n    to: INTERNAL_LINKS.categories.education,\n    target: '_self',\n  },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\ntype ChannelItemProps = {\n  link: {\n    href: string\n    target: LinkTarget\n  }\n  label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n  link = { href: '', target: '_self' },\n  label = '',\n}) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n      <LinkComponent to={link.href} target={link.target}>\n        <TextButton\n          text={label}\n          size={TextButton.Size.l}\n          theme={theme}\n          style={TextButton.Style.dark}\n        />\n      </LinkComponent>\n    </div>\n  )\n}\n\nconst Channel = () => {\n  const { releaseBranch, theme } = useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n        <IconButton\n          iconComponent={Hamburger(releaseBranch)}\n          theme={theme}\n          onClick={toggleHamburger}\n        />\n        {_.map(CHANNELS, (channel) => {\n          return (\n            <ChannelItem\n              key={`channel-${channel.label}`}\n              label={channel.label}\n              link={{\n                href: channel.to,\n                target: channel.target,\n              }}\n            />\n          )\n        })}\n      </div>\n      <Divider />\n    </div>\n  )\n}\n\nexport default Channel\n","import { useContext, useRef, type FC } from 'react'\nimport clsx from 'clsx'\nimport { CSSTransition } from 'react-transition-group'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { ANIMATION } from '../constants/animation'\n// compontents\nimport TopRow from './top-row'\nimport Channel from './channels'\nimport Divider from '../../divider'\n// type\nimport type { LogoType } from '../../logo/constants'\ntype DesktopAndAboveProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst DesktopAndAbove: FC<DesktopAndAboveProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const { toUseNarrow } = useContext(HeaderContext)\n  const channelRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"hidden desktop:flex desktop:flex-col\">\n      <TopRow topRowBgColor={topRowBgColor} logoType={logoType} />\n      {/* divider */}\n      <div\n        className={clsx(\n          `transition-opacity ${ANIMATION.step2Duration}`,\n          toUseNarrow ? 'opacity-0' : 'opacity-100',\n          toUseNarrow ? 'delay-0' : `${ANIMATION.step2Delay}`\n        )}\n      >\n        <Divider direction={Divider.Direction.horizontal} />\n      </div>\n      {/* channels */}\n      <div className={`${ZIndex.channel}`}>\n        <CSSTransition\n          in={!toUseNarrow}\n          nodeRef={channelRef}\n          classNames={{\n            enter: `opacity-0 -translate-y-full`,\n            enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,\n            exit: `opacity-100 translate-y-0`,\n            exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`,\n          }}\n          timeout={{ appear: 0, enter: 350, exit: 200 }}\n          unmountOnExit\n        >\n          <div ref={channelRef}>\n            <Channel />\n          </div>\n        </CSSTransition>\n      </div>\n    </div>\n  )\n}\n\nexport default DesktopAndAbove\n","import {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../constants/release-branch'\nimport { forClientSideRendering } from '../../constants/request-origins'\n\nexport const checkReferrer = (\n  referrer: string = '',\n  releaseBranch: ReleaseBranch = RELEASE_BRANCH.master\n) => {\n  try {\n    const url = new URL(referrer)\n    return url.origin === forClientSideRendering[releaseBranch].main\n  } catch (_err) {\n    return false\n  }\n}\n","import { useContext, useState, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton, IconButton } from '../../button'\n// icon\nimport { Arrow, Member } from '../../icons'\n// utils\nimport { checkReferrer } from '../utils/links'\n// lodash\nimport some from 'lodash/some'\nimport includes from 'lodash/includes'\nimport throttle from 'lodash/throttle'\nconst _ = {\n  some,\n  includes,\n  throttle,\n}\n\ntype TabletAndBelowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const {\n    isLinkExternal,\n    releaseBranch,\n    theme,\n    pathname,\n    referrerPath,\n    isAuthed,\n  } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n  const [currentClientWidth, setCurrentClientWidth] = useState(0)\n  useEffect(() => {\n    const handleResize = _.throttle(() => {\n      setCurrentClientWidth(document.body.clientWidth)\n    }, 200)\n\n    handleResize()\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  const isOnArticlePage = _.includes(pathname, `${INTERNAL_LINKS.article}/`)\n  const needPrevIconRoute = [\n    INTERNAL_LINKS.account.donationHistoryPage,\n    INTERNAL_LINKS.account.emailSubscription,\n    INTERNAL_LINKS.myReading.savedBookmarks,\n    INTERNAL_LINKS.myReading.browsingHistory,\n  ]\n  const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) =>\n    _.includes(pathname, el)\n  )\n\n  const showPrevIcon =\n    isOnArticlePage || (isOnNeedPrevIconPage && currentClientWidth < 768) // only show it on mobile\n\n  const gotoPrev = () => {\n    if (referrerPath || checkReferrer(document.referrer, releaseBranch)) {\n      // go to previous page when referer is twreporter site\n      window.history.back()\n    } else {\n      // go to home page when referer is not twreporter site\n      window.location.href = '/'\n    }\n  }\n\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n        'desktop:hidden'\n      )}\n    >\n      <div className=\"flex flex-row gap-[8px]\">\n        {/* pre button */}\n        {showPrevIcon ? (\n          <div className=\"p-[4px] -translate-x-[8px]\">\n            <IconButton\n              iconComponent={\n                <Arrow\n                  direction={Arrow.Direction.left}\n                  releaseBranch={releaseBranch}\n                />\n              }\n              theme={theme}\n              onClick={gotoPrev}\n            />\n          </div>\n        ) : null}\n        {/* logo */}\n        <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n          <LogoHeader type={logoType} className=\"h-[21px]\" />\n        </LinkComponent>\n      </div>\n      {/* actions */}\n      <div className=\"flex flex-row items-center gap-[16px]\">\n        <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n          <PillButton\n            text=\"贊助\"\n            theme={PillButton.Theme.normal}\n            type={PillButton.Type.primary}\n            style={PillButton.Style.brand}\n          />\n        </LinkComponent>\n        <LinkComponent to={INTERNAL_LINKS.account.index}>\n          {isAuthed ? (\n            <IconButton iconComponent={Member(releaseBranch)} />\n          ) : (\n            <TextButton\n              text=\"登入\"\n              theme={TextButton.Theme.normal}\n              style={TextButton.Style.dark}\n              size={TextButton.Size.s}\n            />\n          )}\n        </LinkComponent>\n      </div>\n    </div>\n  )\n}\n\nexport default TabletAndBelow\n","import { create, type StateCreator } from 'zustand'\n\nexport type AuthState = {\n  isAuthed: boolean\n  token?: string\n  setAuthed: (isAuthed: boolean) => void\n  setToken: (token?: string) => void\n  reset: () => void\n}\n\nconst creator: StateCreator<AuthState> = (set) => ({\n  isAuthed: false,\n  token: undefined,\n  setAuthed: (isAuthed: boolean) => set({ isAuthed }),\n  setToken: (token?: string) => set({ token }),\n  reset: () => set({ isAuthed: false, token: undefined }),\n})\n\nexport const useAuthStore = create<AuthState>()(creator)\n","import { useRef, useState, useCallback, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n\n// constants\nimport { THEME, type Theme } from '../constants/theme'\nimport type { ReleaseBranch } from '../constants/release-branch'\nimport { ZIndex } from './constants/z-index'\n// components\nimport DesktopAndAbove from './components/desktop-and-above'\nimport TabletAndBelow from './components/tablet-and-below'\n// context\nimport {\n  HeaderContext,\n  HamburgerContext,\n  type HamburgerContextType,\n} from './context'\n// utils\nimport { selectHeaderTheme, selectLogoType } from './utils/theme'\n// hamburger menu\nimport HamburgerMenu from '../hamburger-menu'\n// tab bar\nimport TabBar from '../tab-bar'\nimport { useAuthStore, type AuthState } from './store/auth-store'\n// hook\nimport { useOutsideClick } from '../hooks'\n\nconst HIDE_HEADER_THRESHOLD = 8\nconst TRANSFORM_HEADER_THRESHOLD = 40\nconst TRANSFORM_TIMEOUT = 800\n\ntype HeaderProps = {\n  releaseBranch: ReleaseBranch\n  isLinkExternal: boolean\n  theme: Theme\n  pathname: string\n  referrerPath: string\n  hamburgerContext: HamburgerContextType\n}\nconst Header: FC<HeaderProps> = ({\n  releaseBranch,\n  isLinkExternal,\n  theme,\n  pathname,\n  referrerPath,\n  hamburgerContext,\n}) => {\n  const isAuthed = useAuthStore((s: AuthState) => s.isAuthed)\n  const { bgColor, topRowBgColor } = selectHeaderTheme(theme)\n  const logoType = selectLogoType(theme)\n\n  const { isHamburgerMenuOpen, closeHamburgerMenu } = hamburgerContext\n\n  const [toUseNarrow, setToUseNarrow] = useState(false)\n  const [hideHeader, setHideHeader] = useState(false)\n\n  const lastKnownPageYOffset = useRef(0)\n  const ticking = useRef(false)\n  const currentY = useRef(0)\n  const readyY = useRef(0)\n  const isTransforming = useRef(false)\n  const transformTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const outsideRef = useOutsideClick(closeHamburgerMenu)\n\n  const getScrollState = useCallback(\n    (scrollTop: number, scrollDirection: 'up' | 'down') => {\n      const isCurrentNarrow = toUseNarrow\n      const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD\n      const scrollState = { toUseNarrow, hideHeader }\n\n      if (isTransforming.current) {\n        return scrollState\n      }\n\n      if (scrollDirection === 'up') {\n        readyY.current = scrollTop\n        scrollState.hideHeader = false\n      }\n\n      if (scrollDirection === 'down') {\n        if (\n          isCurrentNarrow &&\n          scrollTop - readyY.current > HIDE_HEADER_THRESHOLD\n        ) {\n          scrollState.hideHeader = true\n        }\n      }\n\n      if (isCurrentNarrow) {\n        scrollState.toUseNarrow =\n          scrollDirection === 'down' ? true : nextToUseNarrow\n      } else {\n        scrollState.toUseNarrow =\n          scrollDirection === 'up' ? false : nextToUseNarrow\n      }\n\n      if (isCurrentNarrow !== scrollState.toUseNarrow) {\n        if (!transformTimer.current) {\n          isTransforming.current = true\n          transformTimer.current = setTimeout(() => {\n            isTransforming.current = false\n            readyY.current = currentY.current\n            transformTimer.current = null\n          }, TRANSFORM_TIMEOUT)\n        }\n      }\n\n      return scrollState\n    },\n    [toUseNarrow, hideHeader]\n  )\n\n  const updateScrollState = useCallback(\n    (currentScrollTop: number) => {\n      const scrollDirection =\n        currentScrollTop > currentY.current ? 'down' : 'up'\n      currentY.current = currentScrollTop\n      const updateState = getScrollState(currentScrollTop, scrollDirection)\n      setToUseNarrow(() => updateState.toUseNarrow)\n      setHideHeader(() => updateState.hideHeader)\n    },\n    [getScrollState]\n  )\n\n  const handleScroll = useCallback(() => {\n    lastKnownPageYOffset.current = window.pageYOffset\n    if (!ticking.current) {\n      window.requestAnimationFrame(() => {\n        updateScrollState(lastKnownPageYOffset.current)\n        ticking.current = false\n      })\n      ticking.current = true\n    }\n  }, [updateScrollState])\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll, { passive: true })\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [handleScroll])\n\n  return (\n    <HeaderContext\n      value={{\n        releaseBranch,\n        isLinkExternal,\n        isAuthed,\n        theme,\n        pathname,\n        referrerPath,\n        toUseNarrow,\n        hideHeader,\n      }}\n    >\n      <HamburgerContext value={hamburgerContext}>\n        <header\n          className={clsx(\n            `w-full top-0 transition-transform duration-300 ${bgColor} ${ZIndex.header}`,\n            theme === THEME.transparent ? 'fixed' : 'sticky',\n            hideHeader ? 'ease-in' : 'ease-out',\n            hideHeader ? '-translate-y-full' : 'translate-y-0'\n          )}\n        >\n          <div\n            className={clsx(\n              `flex flex-col mx-auto px-[24px]`,\n              'tablet:px-[32px]',\n              'desktop:px-[48px]',\n              'hd:w-[1280px] hd:px-0'\n            )}\n          >\n            <DesktopAndAbove\n              topRowBgColor={topRowBgColor}\n              logoType={logoType}\n            />\n            <TabletAndBelow topRowBgColor={topRowBgColor} logoType={logoType} />\n          </div>\n        </header>\n        <div\n          ref={outsideRef}\n          className={clsx(\n            `fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen\n              ? 'translate-x-0 opacity-100'\n              : '-translate-x-full opacity-100',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:-translate-x-[320px] tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:-translate-x-[280px] desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n        <TabBar />\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAa,YAAY;CACvB,eAAe;CACf,YAAY;CACZ,eAAe;CACf,YAAY;CACZ,eAAe;CAChB;;;;ACgBD,MAAM,mBAAmB;CACvB,MAAM,CAAC,gBAAgB,uCAA4B,MAAM;CACzD,MAAM,EAAE,eAAe,gCAAqBA,8BAAc;CAE1D,MAAM,uBAAuB;AAC3B,kBAAgB,MAAM;;CAExB,MAAM,MAAMC,0CAAgB,eAAe;CAE3C,MAAM,qBAAqB,MAAqC;AAC9D,IAAE,gBAAgB;AAClB,kBAAgB,KAAK;AACrB,MAAI,CAAC,IAAI,QAAS;AAElB,EADc,IAAI,QAAQ,qBAAqB,QAAQ,CAAC,IACjD,OAAO;;CAGhB,MAAM,YAAY,aAAqB;AACrC,kBAAgB,MAAM;AACtB,MAAI,OAAO,WAAW,YACpB,QAAO,SAAS,OAAO,GAAGC,sCAAe,OAAO,KAAK,mBAAmB,SAAS;;AAIrF,QACE,4CAAC;EAAI,WAAU;EAAgB;aAC7B,2CAACC;GACC,eAAeC,qBAAO,cAAc;GAC7B;GACP,SAAS;GACT,6BACE,mDACA,iBAAiB,kCAAkC,cACpD;IACD,EACF,2CAAC;GACC,6BACE,+EACA,iBAAiB,gBAAgB,iCACjC,iBAAiB,UAAU,OAC5B;aAED,2CAACC;IACC,aAAY;IACL;IACP,SAAS;IACC;IACK;KACf;IACE;IAxBgC,SAyBlC;;AAIV,MAAaC,SAGP,EAAE,gBAAgBC,sCAAe,QAAQ,QAAQC,oBAAM,aAAa;CACxE,MAAM,EAAE,yCAA8BR,8BAAc;CACpD,MAAM,gBAAgB,iBAAiBS,8CAAeC;AACtD,QACE,4CAAC;EAAI,WAAU;;GACb,2CAAC,eAAa;GACd,2CAAC;IAAc,IAAIR,sCAAe,UAAU;cAC1C,2CAACC;KAAW,eAAeQ,sBAAQ,cAAc;KAAS;MAAS;KACrD;GAChB,2CAAC;IAAc,IAAIT,sCAAe,QAAQ;cACxC,2CAACC;KAAW,eAAeS,qBAAO,cAAc;KAAS;MAAS;KACpD;;GACZ;;;;;ACxFV,MAAa,kBAAkB,UAAiB;AAC9C,SAAQ,OAAR;EACE,KAAKC,oBAAM;EACX,KAAKA,oBAAM,YACT,QAAOC,8BAAU;EACnB,QACE,QAAOA,8BAAU;;;AAIvB,MAAa,qBAAqB,UAAiB;AACjD,SAAQ,OAAR;EACE,KAAKD,oBAAM,YACT,QAAO;GACL,SAAS;GACT,eAAe;GAChB;EACH,KAAKA,oBAAM,YACT,QAAO;GACL,SAAS;GACT,eAAe;GAChB;EACH,KAAKA,oBAAM,MACT,QAAO;GACL,SAAS;GACT,eAAe;GAChB;EACH,QACE,QAAO;GACL,SAAS;GACT,eAAe;GAChB;;;AAIP,MAAa,qBAAqB,UAAiB;AACjD,SAAQ,OAAR;EACE,KAAKA,oBAAM;EACX,KAAKA,oBAAM,YACT,QAAO;EACT,QACE,QAAO;;;;;;AClBb,MAAME,UAA2B,EAAE,eAAe,eAAe;CAC/D,MAAM,EAAE,aAAa,eAAe,OAAO,yCAC9BC,8BAAc;CAC3B,MAAM,EAAE,0CAA+BC,iCAAiB;CACxD,MAAM,gBAAgB,iBAAiBC,8CAAeC;AACtD,QACE,4CAAC;EACC,6BACE,qCAAqCC,uBAAO,OAAO,aAAa,iBAChE,cAAc,cAAc,YAC7B;aAGD,4CAAC;GAAI,WAAU;;IACb,2CAAC;KACC,6BACE,cAAc,gBAAgB,aAC9B,sBAAsB,UAAU,iBAChC,cAAc,kBAAkB,UACjC;eAED,2CAACC;MACC,eAAeC,wBAAU,cAAc;MAChC;MACP,SAAS;OACT;MACE;IAEN,2CAAC;KACC,6BACE,8CAA8C,UAAU,iBACxD,cAAc,cAAc,QAC5B,cAAc,kBAAkB,uBAChC,cAAc,GAAG,UAAU,eAAe,UAC3C;eAED,2CAAC;MAAc,IAAIC,sCAAe;gBAChC,2CAACC;OACC,MAAM;OACS;OACf,6BACE,qBAAqB,UAAU,iBAC/B,cAAc,GAAG,UAAU,eAAe,WAC1C,cAAc,aAAa,WAC5B;QACD;OACY;MACZ;IACN,2CAAC;KACC,6BACE,sBAAsB,UAAU,iBAChC,wDACA,cAAc,GAAG,UAAU,eAAe,WAC1C,cAAc,wBAAwB,uBACtC,cAAc,cAAc,eAC5B,kBAAkB,MAAM,CACzB;eACF;MAEK;;IACF,EAEN,4CAAC;GAAI,WAAU;cACb,2CAAC;IACC,6BACE,gCACA,sBAAsB,UAAU,iBAChC,cAAc,GAAG,UAAU,eAAe,WAC1C,cAAc,wBAAwB,uBACtC,cAAc,cAAc,cAC7B;cAEAC,2CAAoB,KAAK,SACxB,2CAAC;KAAc,IAAI,KAAK;KAAI,QAAQ,KAAK;eACvC,2CAACC;MAAW,MAAM,KAAK;MAAc;MAAO,MAAM,KAAK;OAAQ;OADX,KAAK,MAE3C,CAChB;KACE,EAEN,2CAAC;IAAqB;IAAsB;KAAS;IACjD;GACF;;AAIV,sBAAe;;;;ACvGf,MAAaC,WAA0B;CACrC;EACE,OAAO;EACP,IAAIC,sCAAe;EACnB,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe;EACnB,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACD;EACE,OAAO;EACP,IAAIA,sCAAe,WAAW;EAC9B,QAAQ;EACT;CACF;;;;AC5CD,MAAMC,MAAI,EACR,yBACD;AAQD,MAAMC,eAAqC,EACzC,OAAO;CAAE,MAAM;CAAI,QAAQ;CAAS,EACpC,QAAQ,SACJ;CACJ,MAAM,EAAE,OAAO,yCAA8BC,8BAAc;CAC3D,MAAM,gBAAgB,iBAAiBC,8CAAeC;AACtD,QACE,2CAAC;EAAI,6BAAgB,qBAAqB,qBAAqB;YAC7D,2CAAC;GAAc,IAAI,KAAK;GAAM,QAAQ,KAAK;aACzC,2CAACC;IACC,MAAM;IACN,MAAMA,mCAAW,KAAK;IACf;IACP,OAAOA,mCAAW,MAAM;KACxB;IACY;GACZ;;AAIV,MAAM,gBAAgB;CACpB,MAAM,EAAE,eAAe,gCAAqBH,8BAAc;CAC1D,MAAM,EAAE,0CAA+BI,iCAAiB;AACxD,QACE,4CAAC;EAAI,WAAU;aACb,4CAAC;GAAI,WAAU;cACb,2CAACC;IACC,eAAeC,wBAAU,cAAc;IAChC;IACP,SAAS;KACT,EACDR,IAAE,IAAI,WAAW,YAAY;AAC5B,WACE,2CAAC;KAEC,OAAO,QAAQ;KACf,MAAM;MACJ,MAAM,QAAQ;MACd,QAAQ,QAAQ;MACjB;OALI,WAAW,QAAQ,QAMxB;KAEJ;IACE,EACN,2CAACS,oCAAU;GACP;;AAIV,uBAAe;;;;ACxDf,MAAMC,mBAA6C,EACjD,eACA,eACI;CACJ,MAAM,EAAE,sCAA2BC,8BAAc;CACjD,MAAM,+BAAoC,KAAK;AAC/C,QACE,4CAAC;EAAI,WAAU;;GACb,2CAACC;IAAsB;IAAyB;KAAY;GAE5D,2CAAC;IACC,6BACE,sBAAsB,UAAU,iBAChC,cAAc,cAAc,eAC5B,cAAc,YAAY,GAAG,UAAU,aACxC;cAED,2CAACC,mCAAQ,WAAWA,gCAAQ,UAAU,aAAc;KAChD;GAEN,2CAAC;IAAI,WAAW,GAAGC,uBAAO;cACxB,2CAACC;KACC,IAAI,CAAC;KACL,SAAS;KACT,YAAY;MACV,OAAO;MACP,aAAa,8BAA8B,UAAU,cAAc,GAAG,UAAU,WAAW;MAC3F,MAAM;MACN,YAAY,8BAA8B,UAAU,cAAc;MACnE;KACD,SAAS;MAAE,QAAQ;MAAG,OAAO;MAAK,MAAM;MAAK;KAC7C;eAEA,2CAAC;MAAI,KAAK;gBACR,2CAACC,qBAAU;OACP;MACQ;KACZ;;GACF;;AAIV,gCAAe;;;;ACtDf,MAAa,iBACX,WAAmB,IACnB,gBAA+BC,sCAAe,WAC3C;AACH,KAAI;AAEF,SADY,IAAI,IAAI,SAAS,CAClB,WAAWC,+CAAuB,eAAe;UACrD,MAAM;AACb,SAAO;;;;;;ACSX,MAAM,IAAI;CACR;CACA;CACA;CACD;AAMD,MAAMC,kBAA2C,EAC/C,eACA,eACI;CACJ,MAAM,EACJ,gBACA,eACA,OACA,UACA,cACA,mCACaC,8BAAc;CAC7B,MAAM,gBAAgB,iBAAiBC,8CAAeC;CAEtD,MAAM,CAAC,oBAAoB,6CAAkC,EAAE;AAC/D,4BAAgB;EACd,MAAM,eAAe,EAAE,eAAe;AACpC,yBAAsB,SAAS,KAAK,YAAY;KAC/C,IAAI;AAEP,gBAAc;AACd,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;;IAEnD,EAAE,CAAC;CAEN,MAAM,kBAAkB,EAAE,SAAS,UAAU,GAAGC,sCAAe,QAAQ,GAAG;CAC1E,MAAM,oBAAoB;EACxBA,sCAAe,QAAQ;EACvBA,sCAAe,QAAQ;EACvBA,sCAAe,UAAU;EACzBA,sCAAe,UAAU;EAC1B;CACD,MAAM,uBAAuB,EAAE,KAAK,oBAAoB,OACtD,EAAE,SAAS,UAAU,GAAG,CACzB;CAED,MAAM,eACJ,mBAAoB,wBAAwB,qBAAqB;CAEnE,MAAM,iBAAiB;AACrB,MAAI,gBAAgB,cAAc,SAAS,UAAU,cAAc,CAEjE,QAAO,QAAQ,MAAM;MAGrB,QAAO,SAAS,OAAO;;AAI3B,QACE,4CAAC;EACC,6BACE,qCAAqCC,uBAAO,OAAO,aAAa,iBAChE,iBACD;aAED,4CAAC;GAAI,WAAU;cAEZ,eACC,2CAAC;IAAI,WAAU;cACb,2CAACC;KACC,eACE,2CAACC;MACC,WAAWA,oBAAM,UAAU;MACZ;OACf;KAEG;KACP,SAAS;MACT;KACE,GACJ,MAEJ,2CAAC;IAAc,IAAIH,sCAAe;IAAM,WAAU;cAChD,2CAACI;KAAW,MAAM;KAAU,WAAU;MAAa;KACrC;IACZ,EAEN,4CAAC;GAAI,WAAU;cACb,2CAAC;IAAc,IAAIC,sCAAe;cAChC,2CAACC;KACC,MAAK;KACL,OAAOA,mCAAW,MAAM;KACxB,MAAMA,mCAAW,KAAK;KACtB,OAAOA,mCAAW,MAAM;MACxB;KACY,EAChB,2CAAC;IAAc,IAAIN,sCAAe,QAAQ;cACvC,WACC,2CAACE,sCAAW,eAAeK,qBAAO,cAAc,GAAI,GAEpD,2CAACC;KACC,MAAK;KACL,OAAOA,mCAAW,MAAM;KACxB,OAAOA,mCAAW,MAAM;KACxB,MAAMA,mCAAW,KAAK;MACtB;KAEU;IACZ;GACF;;AAIV,+BAAe;;;;AClIf,MAAMC,WAAoC,SAAS;CACjD,UAAU;CACV,OAAO;CACP,YAAY,aAAsB,IAAI,EAAE,UAAU,CAAC;CACnD,WAAW,UAAmB,IAAI,EAAE,OAAO,CAAC;CAC5C,aAAa,IAAI;EAAE,UAAU;EAAO,OAAO;EAAW,CAAC;CACxD;AAED,MAAa,oCAAkC,CAAC,QAAQ;;;;ACQxD,MAAM,wBAAwB;AAC9B,MAAM,6BAA6B;AACnC,MAAM,oBAAoB;AAU1B,MAAMC,UAA2B,EAC/B,eACA,gBACA,OACA,UACA,cACA,uBACI;CACJ,MAAM,WAAW,cAAc,MAAiB,EAAE,SAAS;CAC3D,MAAM,EAAE,SAAS,kBAAkB,kBAAkB,MAAM;CAC3D,MAAM,WAAW,eAAe,MAAM;CAEtC,MAAM,EAAE,qBAAqB,uBAAuB;CAEpD,MAAM,CAAC,aAAa,sCAA2B,MAAM;CACrD,MAAM,CAAC,YAAY,qCAA0B,MAAM;CAEnD,MAAM,yCAA8B,EAAE;CACtC,MAAM,4BAAiB,MAAM;CAC7B,MAAM,6BAAkB,EAAE;CAC1B,MAAM,2BAAgB,EAAE;CACxB,MAAM,mCAAwB,MAAM;CACpC,MAAM,mCAA8D,KAAK;CAEzE,MAAM,aAAaC,0CAAgB,mBAAmB;CAEtD,MAAM,yCACH,WAAmB,oBAAmC;EACrD,MAAM,kBAAkB;EACxB,MAAM,kBAAkB,YAAY;EACpC,MAAM,cAAc;GAAE;GAAa;GAAY;AAE/C,MAAI,eAAe,QACjB,QAAO;AAGT,MAAI,oBAAoB,MAAM;AAC5B,UAAO,UAAU;AACjB,eAAY,aAAa;;AAG3B,MAAI,oBAAoB,QACtB;OACE,mBACA,YAAY,OAAO,UAAU,sBAE7B,aAAY,aAAa;;AAI7B,MAAI,gBACF,aAAY,cACV,oBAAoB,SAAS,OAAO;MAEtC,aAAY,cACV,oBAAoB,OAAO,QAAQ;AAGvC,MAAI,oBAAoB,YAAY,aAClC;OAAI,CAAC,eAAe,SAAS;AAC3B,mBAAe,UAAU;AACzB,mBAAe,UAAU,iBAAiB;AACxC,oBAAe,UAAU;AACzB,YAAO,UAAU,SAAS;AAC1B,oBAAe,UAAU;OACxB,kBAAkB;;;AAIzB,SAAO;IAET,CAAC,aAAa,WAAW,CAC1B;CAED,MAAM,4CACH,qBAA6B;EAC5B,MAAM,kBACJ,mBAAmB,SAAS,UAAU,SAAS;AACjD,WAAS,UAAU;EACnB,MAAM,cAAc,eAAe,kBAAkB,gBAAgB;AACrE,uBAAqB,YAAY,YAAY;AAC7C,sBAAoB,YAAY,WAAW;IAE7C,CAAC,eAAe,CACjB;CAED,MAAM,4CAAiC;AACrC,uBAAqB,UAAU,OAAO;AACtC,MAAI,CAAC,QAAQ,SAAS;AACpB,UAAO,4BAA4B;AACjC,sBAAkB,qBAAqB,QAAQ;AAC/C,YAAQ,UAAU;KAClB;AACF,WAAQ,UAAU;;IAEnB,CAAC,kBAAkB,CAAC;AAEvB,4BAAgB;AACd,SAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;AAClE,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;;IAEnD,CAAC,aAAa,CAAC;AAElB,QACE,2CAACC;EACC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;YAED,4CAACC;GAAiB,OAAO;;IACvB,2CAAC;KACC,6BACE,kDAAkD,QAAQ,GAAGC,uBAAO,UACpE,UAAUC,oBAAM,cAAc,UAAU,UACxC,aAAa,YAAY,YACzB,aAAa,sBAAsB,gBACpC;eAED,4CAAC;MACC,6BACE,mCACA,oBACA,qBACA,wBACD;iBAED,2CAACC;OACgB;OACL;QACV,EACF,2CAACC;OAA8B;OAAyB;QAAY;OAChE;MACC;IACT,2CAAC;KACC,KAAK;KACL,6BACE,sBAAsBH,uBAAO,UAAU,iDACvC,sBACI,8BACA,iCACJ,wBACA,sBACI,kDACA,kDACJ,yBACA,sBACI,oDACA,mDACL;eAED,2CAACI,kDAAgB;MACb;IACN,2CAACC,oCAAS;;IACO;GACL;;AAIpB,qBAAe"}

package/lib/header/index.mjs

@@ -3,25 +3,30 @@ import "../constants-oTHAnh6r.mjs";
 import "../constants-CBSEPx91.mjs";
 import "../paragraph-Cf9jr8RF.mjs";
 import { THEME } from "../theme-BG6yZVj-.mjs";
-import { icon_button_default, pill_button_default, text_button_default } from "../button-hDNHA85d.mjs";
+import { icon_button_default, pill_button_default, text_button_default } from "../button-D_AWI7r9.mjs";
 import { EXTERNAL_LINKS } from "../external-links-B-A17Osq.mjs";
 import { INTERNAL_LINKS } from "../internal-links-CP3dqmrz.mjs";
 import { RELEASE_BRANCH } from "../release-branch-DNCD1uH_.mjs";
 import { forClientSideRendering } from "../request-origins-CGkNWg8R.mjs";
-import { external_link_default } from "../external-link-DXT5ep5-.mjs";
-import "../customized-link-DnaZxeKK.mjs";
-import "../constants-z9Q8ph_H.mjs";
-import { divider_default } from "../divider-CE4u6SR5.mjs";
+import "../constants-Cz7n-nLz.mjs";
+import { divider_default } from "../divider-CEIxmAsH.mjs";
+import { external_link_default } from "../external-link-BykRRwmY.mjs";
+import "../customized-link-DNKmWI0u.mjs";
 import { HamburgerContext, HeaderContext } from "../context-BgdqM3zA.mjs";
 import "../constants-5phfWHvb.mjs";
 import { Arrow, Hamburger, KidStar, Member, Search } from "../icons-I7T-auOQ.mjs";
 import { LOGO_TYPE } from "../constants-DRxdMM_X.mjs";
-import "../dropdown-menu-D7VNOiIl.mjs";
-import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-b8Ck07ms.mjs";
+import "../dropdown-menu-CuyS5r71.mjs";
+import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-Ca6QMgF9.mjs";
 import { logo_header_default } from "../logo-D68VZ-fc.mjs";
-import { ZIndex, tab_bar_default } from "../tab-bar-SYrjAH5q.mjs";
-import "../theme-DQCIQh_8.mjs";
-import "../constants--CDeoDub.mjs";
+import "../constants-Dfgyc0ND.mjs";
+import "../theme-CkSx7UX3.mjs";
+import { search_bar_default } from "../input-_Hl5B4_K.mjs";
+import { ZIndex, tab_bar_default } from "../tab-bar-BqiC7-Lw.mjs";
+import { useOutsideClick } from "../use-outside-click-Bz_v9VCq.mjs";
+import "../hooks-DFV2v01e.mjs";
+import "../theme-PhMjSVv9.mjs";
+import "../constants-BYqJQzQQ.mjs";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,16 +48,50 @@ const ANIMATION = {
 
 //#endregion
 //#region src/header/components/top-row/icons.tsx
+const SearchIcon = () => {
+	const [isSearchOpened, setSearchOpened] = useState(false);
+	const { releaseBranch, theme } = useContext(HeaderContext);
+	const closeSearchBox = () => {
+		setSearchOpened(false);
+	};
+	const ref = useOutsideClick(closeSearchBox);
+	const handleClickSearch = (e) => {
+		e.preventDefault();
+		setSearchOpened(true);
+		if (!ref.current) return;
+		ref.current.getElementsByTagName("input")[0]?.focus();
+	};
+	const onSearch = (keywords) => {
+		setSearchOpened(false);
+		if (typeof window !== "undefined") window.location.href = `${INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		ref,
+		children: [/* @__PURE__ */ jsx(icon_button_default, {
+			iconComponent: Search(releaseBranch),
+			theme,
+			onClick: handleClickSearch,
+			className: clsx("transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-0 pointer-events-none" : "opacity-100")
+		}), /* @__PURE__ */ jsx("div", {
+			className: clsx("absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-100" : "opacity-0 pointer-events-none", isSearchOpened ? "z-999" : "-z-1"),
+			children: /* @__PURE__ */ jsx(search_bar_default, {
+				placeholder: "關鍵字搜尋",
+				theme,
+				onClose: closeSearchBox,
+				onSearch,
+				releaseBranch
+			})
+		})]
+	}, "search");
+};
 const Icons = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {
 	const { isLinkExternal } = useContext(HeaderContext);
 	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "ml-[24px] flex flex-row gap-[16px]",
 		children: [
-			/* @__PURE__ */ jsx(icon_button_default, {
-				iconComponent: Search(releaseBranch),
-				theme
-			}),
+			/* @__PURE__ */ jsx(SearchIcon, {}),
 			/* @__PURE__ */ jsx(LinkComponent, {
 				to: INTERNAL_LINKS.myReading.index,
 				children: /* @__PURE__ */ jsx(icon_button_default, {
@@ -425,7 +464,7 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 	const isAuthed = useAuthStore((s) => s.isAuthed);
 	const { bgColor, topRowBgColor } = selectHeaderTheme(theme);
 	const logoType = selectLogoType(theme);
-	const { isHamburgerMenuOpen } = hamburgerContext;
+	const { isHamburgerMenuOpen, closeHamburgerMenu } = hamburgerContext;
 	const [toUseNarrow, setToUseNarrow] = useState(false);
 	const [hideHeader, setHideHeader] = useState(false);
 	const lastKnownPageYOffset = useRef(0);
@@ -434,6 +473,7 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 	const readyY = useRef(0);
 	const isTransforming = useRef(false);
 	const transformTimer = useRef(null);
+	const outsideRef = useOutsideClick(closeHamburgerMenu);
 	const getScrollState = useCallback((scrollTop, scrollDirection) => {
 		const isCurrentNarrow = toUseNarrow;
 		const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
@@ -514,6 +554,7 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
+					ref: outsideRef,
 					className: clsx(`fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`, isHamburgerMenuOpen ? "translate-x-0 opacity-100" : "-translate-x-full opacity-100", "tablet:-left-[320px]", isHamburgerMenuOpen ? "tablet:translate-x-[320px] tablet:opacity-100" : "tablet:-translate-x-[320px] tablet:opacity-100", "desktop:-left-[280px]", isHamburgerMenuOpen ? "desktop:translate-x-[280px] desktop:opacity-100" : "desktop:-translate-x-[280px] desktop:opacity-100"),
 					children: /* @__PURE__ */ jsx(hamburger_menu_default, {})
 				}),