@kids-reporter/routing-ui 0.1.12 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constants/default-values.js +1 -1
- package/dist/constants/default-values.js.map +1 -1
- package/dist/header/desktop-header.js +1 -1
- package/dist/header/desktop-header.js.map +1 -1
- package/dist/header/menu/index.d.ts.map +1 -1
- package/dist/header/menu/index.js +3 -5
- package/dist/header/menu/index.js.map +1 -1
- package/dist/header/mobile-header.js +1 -1
- package/dist/header/mobile-header.js.map +1 -1
- package/dist/styles.css +24 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-values.js","names":["_icons","require","_jsxRuntime","SUBSCRIBE_URL","exports","DONATE_URL","JOIN_US_URL","PRIVACY_POLICY","SEARCH_PLACEHOLDER","MENU_ITEMS","label","href","subItems","MY_READING_URL","READING_SETTINGS_URL","ADDITIONAL_MENU_ITEMS","showIcon","icon","jsx","MyReadingIconSmall","hideInFooter","SettingsIconSmall","external","SOCIAL_MEDIA_ITEMS"],"sources":["../../src/constants/default-values.tsx"],"sourcesContent":["import { MyReadingIconSmall, SettingsIconSmall } from '../icons'\nimport { MenuItem } from '../types'\n\nexport const SUBSCRIBE_URL =\n 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3'\nexport const DONATE_URL = 'https://support.twreporter.org/'\nexport const JOIN_US_URL = 'https://kids.twreporter.org/article/about-join-us'\nexport const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-policy'\nexport const SEARCH_PLACEHOLDER = '搜尋更多新聞、議題'\n\nexport const MENU_ITEMS: MenuItem[] = [\n {\n label: '最新',\n href: '/all',\n subItems: [],\n },\n {\n label: '專題',\n href: '/topic/page',\n subItems: [],\n },\n {\n label: '新聞',\n href: '/category/news',\n subItems: [\n { label: '焦點新聞', href: '/category/news/times' },\n { label: '真的假的', href: '/category/news/knowledge' },\n { label: '人物故事', href: '/category/news/story' },\n { label: '文化報導', href: '/category/news/explore' },\n { label: '專欄', href: '/category/news/column' },\n { label: '英文新聞', href: '/categories/news/english-version' },\n ],\n },\n {\n label: '多媒體',\n href: '/category/storytelling',\n subItems: [\n { label: '圖解新聞', href: '/category/storytelling/times' },\n { label: '新聞遊戲', href: '/category/storytelling/news-game' },\n { label: '圖文故事', href: '/category/storytelling/graphic-story' },\n ],\n },\n {\n label: '校園',\n href: '/category/campus',\n subItems: [\n { label: '校園寶可夢', href: '/category/campus/campus-pokemon' },\n { label: '上課好好玩', href: '/category/campus/teaching' },\n { label: '小讀者連線', href: '/category/campus/joining' },\n ],\n },\n {\n label: 'Podcast',\n href: '/category/listening-news',\n subItems: [\n {\n label: '小記者，問什麼？',\n href: '/category/listening-news/kids-reporter-ask',\n },\n {\n label: '新聞讀報',\n href: '/category/listening-news/multilingual-listening-news',\n },\n {\n label: '新聞關鍵字',\n href: '/category/listening-news/listening-news-keywords',\n },\n {\n label: '文化關鍵字',\n href: '/category/listening-news/listening-news-culture-keywords',\n },\n ],\n },\n {\n label: '教案',\n href: '/category/classroom',\n subItems: [],\n },\n]\n\nexport const MY_READING_URL = '/myreading'\nexport const READING_SETTINGS_URL = '/custom'\n\nexport const ADDITIONAL_MENU_ITEMS: MenuItem[] = [\n {\n label: '我的回答',\n href: MY_READING_URL,\n subItems: [],\n showIcon: true,\n icon: <MyReadingIconSmall />,\n hideInFooter: true,\n },\n {\n label: '閱讀設定',\n href: READING_SETTINGS_URL,\n subItems: [],\n showIcon: true,\n icon: <SettingsIconSmall />,\n hideInFooter: true,\n },\n {\n label: '小讀者觀點大集合',\n href: '/idea-hub',\n subItems: [],\n hideInFooter: true,\n },\n {\n label: '關於我們',\n href: '/about',\n subItems: [],\n },\n {\n label: '呼叫報導仔',\n href: '/about#call',\n subItems: [],\n },\n\n {\n label: '我要投稿',\n href: 'https://forms.gle/49AEG8kFj7QWjgij8',\n subItems: [],\n external: true,\n },\n {\n label: '加入小記者',\n href: 'https://forms.gle/eGq5jagNTwriwSCX6',\n subItems: [],\n external: true,\n },\n {\n label: '訂閱電子報',\n href: 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3',\n subItems: [],\n external: true,\n },\n {\n label: '訂閱Podcast',\n href: 'https://solink.soundon.fm/kidstwreporter',\n subItems: [],\n external: true,\n },\n {\n label: '聯絡我們',\n href: '/about#
|
|
1
|
+
{"version":3,"file":"default-values.js","names":["_icons","require","_jsxRuntime","SUBSCRIBE_URL","exports","DONATE_URL","JOIN_US_URL","PRIVACY_POLICY","SEARCH_PLACEHOLDER","MENU_ITEMS","label","href","subItems","MY_READING_URL","READING_SETTINGS_URL","ADDITIONAL_MENU_ITEMS","showIcon","icon","jsx","MyReadingIconSmall","hideInFooter","SettingsIconSmall","external","SOCIAL_MEDIA_ITEMS"],"sources":["../../src/constants/default-values.tsx"],"sourcesContent":["import { MyReadingIconSmall, SettingsIconSmall } from '../icons'\nimport { MenuItem } from '../types'\n\nexport const SUBSCRIBE_URL =\n 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3'\nexport const DONATE_URL = 'https://support.twreporter.org/'\nexport const JOIN_US_URL = 'https://kids.twreporter.org/article/about-join-us'\nexport const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-policy'\nexport const SEARCH_PLACEHOLDER = '搜尋更多新聞、議題'\n\nexport const MENU_ITEMS: MenuItem[] = [\n {\n label: '最新',\n href: '/all',\n subItems: [],\n },\n {\n label: '專題',\n href: '/topic/page',\n subItems: [],\n },\n {\n label: '新聞',\n href: '/category/news',\n subItems: [\n { label: '焦點新聞', href: '/category/news/times' },\n { label: '真的假的', href: '/category/news/knowledge' },\n { label: '人物故事', href: '/category/news/story' },\n { label: '文化報導', href: '/category/news/explore' },\n { label: '專欄', href: '/category/news/column' },\n { label: '英文新聞', href: '/categories/news/english-version' },\n ],\n },\n {\n label: '多媒體',\n href: '/category/storytelling',\n subItems: [\n { label: '圖解新聞', href: '/category/storytelling/times' },\n { label: '新聞遊戲', href: '/category/storytelling/news-game' },\n { label: '圖文故事', href: '/category/storytelling/graphic-story' },\n ],\n },\n {\n label: '校園',\n href: '/category/campus',\n subItems: [\n { label: '校園寶可夢', href: '/category/campus/campus-pokemon' },\n { label: '上課好好玩', href: '/category/campus/teaching' },\n { label: '小讀者連線', href: '/category/campus/joining' },\n ],\n },\n {\n label: 'Podcast',\n href: '/category/listening-news',\n subItems: [\n {\n label: '小記者，問什麼？',\n href: '/category/listening-news/kids-reporter-ask',\n },\n {\n label: '新聞讀報',\n href: '/category/listening-news/multilingual-listening-news',\n },\n {\n label: '新聞關鍵字',\n href: '/category/listening-news/listening-news-keywords',\n },\n {\n label: '文化關鍵字',\n href: '/category/listening-news/listening-news-culture-keywords',\n },\n ],\n },\n {\n label: '教案',\n href: '/category/classroom',\n subItems: [],\n },\n]\n\nexport const MY_READING_URL = '/myreading'\nexport const READING_SETTINGS_URL = '/custom'\n\nexport const ADDITIONAL_MENU_ITEMS: MenuItem[] = [\n {\n label: '我的回答',\n href: MY_READING_URL,\n subItems: [],\n showIcon: true,\n icon: <MyReadingIconSmall />,\n hideInFooter: true,\n },\n {\n label: '閱讀設定',\n href: READING_SETTINGS_URL,\n subItems: [],\n showIcon: true,\n icon: <SettingsIconSmall />,\n hideInFooter: true,\n },\n {\n label: '小讀者觀點大集合',\n href: '/idea-hub',\n subItems: [],\n hideInFooter: true,\n },\n {\n label: '關於我們',\n href: '/about',\n subItems: [],\n },\n {\n label: '呼叫報導仔',\n href: '/about#call',\n subItems: [],\n },\n\n {\n label: '我要投稿',\n href: 'https://forms.gle/49AEG8kFj7QWjgij8',\n subItems: [],\n external: true,\n },\n {\n label: '加入小記者',\n href: 'https://forms.gle/eGq5jagNTwriwSCX6',\n subItems: [],\n external: true,\n },\n {\n label: '訂閱電子報',\n href: 'https://twreporter.us14.list-manage.com/subscribe?u=4da5a7d3b98dbc9fdad009e7e&id=2154ac40c3',\n subItems: [],\n external: true,\n },\n {\n label: '訂閱Podcast',\n href: 'https://solink.soundon.fm/kidstwreporter',\n subItems: [],\n external: true,\n },\n {\n label: '聯絡我們',\n href: '/about#contact',\n subItems: [],\n },\n {\n label: '前往《報導者》',\n href: 'https://www.twreporter.org/',\n subItems: [],\n external: true,\n },\n]\n\nexport const SOCIAL_MEDIA_ITEMS = [\n {\n label: 'Facebook',\n href: 'https://www.facebook.com/twreporter/',\n },\n {\n label: 'Instagram',\n href: 'https://www.instagram.com/twreporter/',\n },\n {\n label: 'YouTube',\n href: 'https://www.youtube.com/@TwreporterOrg',\n },\n {\n label: 'Threads',\n href: 'https://www.threads.com/@twreporter',\n },\n {\n label: 'Medium',\n href: 'https://medium.com/twreporter',\n },\n {\n label: 'RSS',\n href: 'https://kids-storage.twreporter.org/rss/rss.xml',\n },\n]\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -26,7 +26,7 @@ function DesktopHeader({
|
|
|
26
26
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
27
27
|
className: "hidden h-(--desktop-header-height) desktop:block"
|
|
28
28
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
29
|
-
className: (0, _cn.cn)('top-0 ease-in-out fixed left-1/2 z-
|
|
29
|
+
className: (0, _cn.cn)('top-0 ease-in-out fixed left-1/2 z-bar hidden w-full -translate-x-1/2 transform transition-all duration-500 desktop:block', compactMode && 'bg-white', hide ? 'pointer-events-none -translate-y-full opacity-0' : 'translate-y-0 pointer-events-auto opacity-100'),
|
|
30
30
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
31
31
|
className: "px-12 hidden w-full bg-transparent desktop:block",
|
|
32
32
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktop-header.js","names":["Object","defineProperty","exports","value","DesktopHeader","_icons","require","_cn","_sharedComponents","_jsxRuntime","onHamburgerOverlayOpen","keywords","compactMode","postTitle","hide","searchPlaceholder","subscribeUrl","menuItems","isLoggedIn","loginUrl","joinUsUrl","jsxs","Fragment","children","jsx","className","cn","HamburgerButton","small","LogoLink","ActionButtons","tags","hideCtaButtons","href","LoginIcon","BottomNavigation"],"sources":["../../src/header/desktop-header.tsx"],"sourcesContent":["'use client'\n\nimport { LoginIcon } from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\nimport {\n ActionButtons,\n BottomNavigation,\n HamburgerButton,\n LogoLink,\n} from './shared-components'\n\ntype DesktopHeaderProps = {\n onHamburgerOverlayOpen: () => void\n keywords: string[]\n compactMode: boolean\n postTitle?: string\n hide: boolean\n searchPlaceholder: string\n subscribeUrl: string\n menuItems: MenuItem[]\n isLoggedIn?: boolean\n loginUrl?: string\n joinUsUrl: string\n}\n\nexport function DesktopHeader({\n onHamburgerOverlayOpen,\n keywords,\n compactMode,\n postTitle,\n hide,\n searchPlaceholder,\n subscribeUrl,\n menuItems,\n isLoggedIn,\n loginUrl,\n joinUsUrl,\n}: DesktopHeaderProps) {\n return (\n <>\n <div className=\"hidden h-(--desktop-header-height) desktop:block\"></div>\n <div\n className={cn(\n 'top-0 ease-in-out fixed left-1/2 z-
|
|
1
|
+
{"version":3,"file":"desktop-header.js","names":["Object","defineProperty","exports","value","DesktopHeader","_icons","require","_cn","_sharedComponents","_jsxRuntime","onHamburgerOverlayOpen","keywords","compactMode","postTitle","hide","searchPlaceholder","subscribeUrl","menuItems","isLoggedIn","loginUrl","joinUsUrl","jsxs","Fragment","children","jsx","className","cn","HamburgerButton","small","LogoLink","ActionButtons","tags","hideCtaButtons","href","LoginIcon","BottomNavigation"],"sources":["../../src/header/desktop-header.tsx"],"sourcesContent":["'use client'\n\nimport { LoginIcon } from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\nimport {\n ActionButtons,\n BottomNavigation,\n HamburgerButton,\n LogoLink,\n} from './shared-components'\n\ntype DesktopHeaderProps = {\n onHamburgerOverlayOpen: () => void\n keywords: string[]\n compactMode: boolean\n postTitle?: string\n hide: boolean\n searchPlaceholder: string\n subscribeUrl: string\n menuItems: MenuItem[]\n isLoggedIn?: boolean\n loginUrl?: string\n joinUsUrl: string\n}\n\nexport function DesktopHeader({\n onHamburgerOverlayOpen,\n keywords,\n compactMode,\n postTitle,\n hide,\n searchPlaceholder,\n subscribeUrl,\n menuItems,\n isLoggedIn,\n loginUrl,\n joinUsUrl,\n}: DesktopHeaderProps) {\n return (\n <>\n <div className=\"hidden h-(--desktop-header-height) desktop:block\"></div>\n <div\n className={cn(\n 'top-0 ease-in-out fixed left-1/2 z-bar hidden w-full -translate-x-1/2 transform transition-all duration-500 desktop:block',\n compactMode && 'bg-white',\n hide\n ? 'pointer-events-none -translate-y-full opacity-0'\n : 'translate-y-0 pointer-events-auto opacity-100'\n )}\n >\n <div className=\"px-12 hidden w-full bg-transparent desktop:block\">\n <div className=\"max-w-300 mx-auto\">\n <div\n className={cn(\n 'px-4 flex items-center justify-between py-[18px]',\n compactMode && 'py-2.5'\n )}\n >\n <div className={'flex items-center'}>\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'translate-x-0 max-w-12 mr-4 w-auto scale-100 opacity-100'\n : '-translate-x-2 w-0 max-w-0 pointer-events-none scale-95 opacity-0'\n )}\n >\n <HamburgerButton\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n small\n />\n </div>\n <div className={compactMode ? 'mr-12' : 'mr-8'}>\n <LogoLink compactMode={compactMode} />\n </div>\n {postTitle && (\n <div className=\"pr-12 block\">\n <p className=\"font-medium tracking-wide max-w-124 overflow-hidden prose-p2 text-ellipsis whitespace-nowrap text-neutral-900\">\n {postTitle}\n </p>\n </div>\n )}\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'max-h-0 -translate-x-8 scale-95 opacity-0'\n : 'max-h-20 max-w-auto scale-100 opacity-100',\n postTitle && compactMode && 'max-w-0'\n )}\n >\n <span className=\"font-medium translate-y-0 inline-block prose-p2 tracking-[2.2px]! text-nowrap text-neutral-900 opacity-100\">\n 理解世界 × 參與未來\n </span>\n </div>\n </div>\n\n <div className=\"gap-4 flex items-center\">\n <ActionButtons\n tags={keywords}\n hideCtaButtons={compactMode}\n searchPlaceholder={searchPlaceholder}\n subscribeUrl={subscribeUrl}\n joinUsUrl={joinUsUrl}\n />\n <a\n href={isLoggedIn ? '/member' : (loginUrl ?? '/login')}\n className=\"w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500\"\n aria-label=\"登入\"\n >\n <LoginIcon />\n </a>\n </div>\n </div>\n\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'h-0 -translate-y-4 opacity-0'\n : 'translate-y-0 h-auto opacity-100'\n )}\n >\n <BottomNavigation\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n menuItems={menuItems}\n />\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n"],"mappings":";AAAA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,aAAA,GAAAA,aAAA;AAEZ,IAAAC,MAAA,GAAAC,OAAA;AAEA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAK4B,IAAAG,WAAA,GAAAH,OAAA;AAgBrB,SAASF,aAAaA,CAAC;EAC5BM,sBAAsB;EACtBC,QAAQ;EACRC,WAAW;EACXC,SAAS;EACTC,IAAI;EACJC,iBAAiB;EACjBC,YAAY;EACZC,SAAS;EACTC,UAAU;EACVC,QAAQ;EACRC;AACkB,CAAC,EAAE;EACrB,oBACE,IAAAX,WAAA,CAAAY,IAAA,EAAAZ,WAAA,CAAAa,QAAA;IAAAC,QAAA,gBACE,IAAAd,WAAA,CAAAe,GAAA;MAAKC,SAAS,EAAC;IAAkD,CAAM,CAAC,eACxE,IAAAhB,WAAA,CAAAe,GAAA;MACEC,SAAS,EAAE,IAAAC,MAAE,EACX,2HAA2H,EAC3Hd,WAAW,IAAI,UAAU,EACzBE,IAAI,GACA,iDAAiD,GACjD,+CACN,CAAE;MAAAS,QAAA,eAEF,IAAAd,WAAA,CAAAe,GAAA;QAAKC,SAAS,EAAC,kDAAkD;QAAAF,QAAA,eAC/D,IAAAd,WAAA,CAAAY,IAAA;UAAKI,SAAS,EAAC,mBAAmB;UAAAF,QAAA,gBAChC,IAAAd,WAAA,CAAAY,IAAA;YACEI,SAAS,EAAE,IAAAC,MAAE,EACX,kDAAkD,EAClDd,WAAW,IAAI,QACjB,CAAE;YAAAW,QAAA,gBAEF,IAAAd,WAAA,CAAAY,IAAA;cAAKI,SAAS,EAAE,mBAAoB;cAAAF,QAAA,gBAClC,IAAAd,WAAA,CAAAe,GAAA;gBACEC,SAAS,EAAE,IAAAC,MAAE,EACX,yDAAyD,EACzDd,WAAW,GACP,0DAA0D,GAC1D,mEACN,CAAE;gBAAAW,QAAA,eAEF,IAAAd,WAAA,CAAAe,GAAA,EAAChB,iBAAA,CAAAmB,eAAe;kBACdjB,sBAAsB,EAAEA,sBAAuB;kBAC/CkB,KAAK;gBAAA,CACN;cAAC,CACC,CAAC,eACN,IAAAnB,WAAA,CAAAe,GAAA;gBAAKC,SAAS,EAAEb,WAAW,GAAG,OAAO,GAAG,MAAO;gBAAAW,QAAA,eAC7C,IAAAd,WAAA,CAAAe,GAAA,EAAChB,iBAAA,CAAAqB,QAAQ;kBAACjB,WAAW,EAAEA;gBAAY,CAAE;cAAC,CACnC,CAAC,EACLC,SAAS,iBACR,IAAAJ,WAAA,CAAAe,GAAA;gBAAKC,SAAS,EAAC,aAAa;gBAAAF,QAAA,eAC1B,IAAAd,WAAA,CAAAe,GAAA;kBAAGC,SAAS,EAAC,+GAA+G;kBAAAF,QAAA,EACzHV;gBAAS,CACT;cAAC,CACD,CACN,eACD,IAAAJ,WAAA,CAAAe,GAAA;gBACEC,SAAS,EAAE,IAAAC,MAAE,EACX,yDAAyD,EACzDd,WAAW,GACP,2CAA2C,GAC3C,2CAA2C,EAC/CC,SAAS,IAAID,WAAW,IAAI,SAC9B,CAAE;gBAAAW,QAAA,eAEF,IAAAd,WAAA,CAAAe,GAAA;kBAAMC,SAAS,EAAC,4GAA4G;kBAAAF,QAAA,EAAC;gBAE7H,CAAM;cAAC,CACJ,CAAC;YAAA,CACH,CAAC,eAEN,IAAAd,WAAA,CAAAY,IAAA;cAAKI,SAAS,EAAC,yBAAyB;cAAAF,QAAA,gBACtC,IAAAd,WAAA,CAAAe,GAAA,EAAChB,iBAAA,CAAAsB,aAAa;gBACZC,IAAI,EAAEpB,QAAS;gBACfqB,cAAc,EAAEpB,WAAY;gBAC5BG,iBAAiB,EAAEA,iBAAkB;gBACrCC,YAAY,EAAEA,YAAa;gBAC3BI,SAAS,EAAEA;cAAU,CACtB,CAAC,eACF,IAAAX,WAAA,CAAAe,GAAA;gBACES,IAAI,EAAEf,UAAU,GAAG,SAAS,GAAIC,QAAQ,IAAI,QAAU;gBACtDM,SAAS,EAAC,sHAAsH;gBAChI,cAAW,cAAI;gBAAAF,QAAA,eAEf,IAAAd,WAAA,CAAAe,GAAA,EAACnB,MAAA,CAAA6B,SAAS,IAAE;cAAC,CACZ,CAAC;YAAA,CACD,CAAC;UAAA,CACH,CAAC,eAEN,IAAAzB,WAAA,CAAAe,GAAA;YACEC,SAAS,EAAE,IAAAC,MAAE,EACX,yDAAyD,EACzDd,WAAW,GACP,8BAA8B,GAC9B,kCACN,CAAE;YAAAW,QAAA,eAEF,IAAAd,WAAA,CAAAe,GAAA,EAAChB,iBAAA,CAAA2B,gBAAgB;cACfzB,sBAAsB,EAAEA,sBAAuB;cAC/CO,SAAS,EAAEA;YAAU,CACtB;UAAC,CACC,CAAC;QAAA,CACH;MAAC,CACH;IAAC,CACH,CAAC;EAAA,CACN,CAAC;AAEP","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/menu/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAO7D,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,mBAAmB,EAAE,QAAQ,EAAE,CAAA;IAC/B,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAUD,iBAAS,IAAI,CAAC,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAClB,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/menu/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAO7D,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,mBAAmB,EAAE,QAAQ,EAAE,CAAA;IAC/B,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAUD,iBAAS,IAAI,CAAC,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAClB,EAAE,SAAS,2CAgKX;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -60,10 +60,10 @@ function Menu({
|
|
|
60
60
|
}, [isOpen, onClose]);
|
|
61
61
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
62
62
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
63
|
-
className: (0, _cn.cn)('inset-0 fixed z-
|
|
63
|
+
className: (0, _cn.cn)('inset-0 fixed z-overlay bg-neutral-500/50 transition-opacity duration-300', isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'),
|
|
64
64
|
onClick: onClose
|
|
65
65
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
66
|
-
className: (0, _cn.cn)('top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out tablet:pt-0 fixed z-
|
|
66
|
+
className: (0, _cn.cn)('top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out tablet:pt-0 fixed z-overlay h-full scrollbar-thin w-full transform pt-(--mobile-header-height) transition-transform duration-300', isOpen ? 'translate-x-0' : '-translate-x-full'),
|
|
67
67
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
68
68
|
className: "flex h-full flex-col overflow-y-auto",
|
|
69
69
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -96,9 +96,7 @@ function Menu({
|
|
|
96
96
|
})
|
|
97
97
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
98
98
|
className: "py-4 flex-1",
|
|
99
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
100
|
-
...menuItems?.[0]
|
|
101
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
99
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
102
100
|
className: "py-2",
|
|
103
101
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_headerMenuItemGroup.default, {
|
|
104
102
|
isMenuOpen: isOpen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_react","_button","_icons","_cn","_generateSocialMediaConfig","_sharedComponents","_headerMenuItem","_headerMenuItemGroup","_jsxRuntime","Divider","jsx","className","children","Menu","isOpen","onClose","keywords","menuItems","additionalMenuItems","socialMediaHrefs","donateUrl","subscribeUrl","searchPlaceholder","socialMediaConfig","generateSocialMediaConfig","useEffect","document","body","classList","add","remove","handleEscape","e","key","addEventListener","removeEventListener","jsxs","Fragment","cn","onClick","href","src","alt","height","width","loading","ClearIcon","SearchInputSection","mode","tags","isMenuOpen","contentClassName","slice","map","item","label","external","target","rel","icon","variant","size","asChild","_default"],"sources":["../../../src/header/menu/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport Button from '../../components/button'\nimport { ClearIcon } from '../../icons'\nimport type { MenuItem, SocialMediaHrefs } from '../../types'\nimport { cn } from '../../utils/cn'\nimport { generateSocialMediaConfig } from '../../utils/generate-social-media-config'\nimport { SearchInputSection } from '../shared-components'\nimport HeaderMenuItem from './header-menu-item'\nimport HeaderMenuItemGroup from './header-menu-item-group'\n\ntype MenuProps = {\n isOpen: boolean\n onClose: () => void\n keywords: string[]\n menuItems: MenuItem[]\n additionalMenuItems: MenuItem[]\n socialMediaHrefs: SocialMediaHrefs\n donateUrl: string\n subscribeUrl: string\n searchPlaceholder: string\n}\n\nfunction Divider() {\n return (\n <div className=\"px-6 tablet:px-8 py-4 w-full\">\n <div className=\"h-px w-full bg-neutral-300\"></div>\n </div>\n )\n}\n\nfunction Menu({\n isOpen,\n onClose,\n keywords,\n menuItems,\n additionalMenuItems,\n socialMediaHrefs,\n donateUrl,\n subscribeUrl,\n searchPlaceholder,\n}: MenuProps) {\n const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)\n\n useEffect(() => {\n if (isOpen) {\n document.body.classList.add('no-scroll')\n } else {\n document.body.classList.remove('no-scroll')\n }\n\n return () => {\n document.body.classList.remove('no-scroll')\n }\n }, [isOpen])\n\n useEffect(() => {\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose()\n }\n }\n\n if (isOpen) {\n document.addEventListener('keydown', handleEscape)\n }\n\n return () => {\n document.removeEventListener('keydown', handleEscape)\n }\n }, [isOpen, onClose])\n\n return (\n <>\n {/* Overlay */}\n <div\n className={cn(\n 'inset-0 fixed z-1001 bg-neutral-500/50 transition-opacity duration-300',\n isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'\n )}\n onClick={onClose}\n />\n\n {/* Menu */}\n <div\n className={cn(\n 'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out tablet:pt-0 fixed z-1001 h-full scrollbar-thin w-full transform pt-(--mobile-header-height) transition-transform duration-300',\n isOpen ? 'translate-x-0' : '-translate-x-full'\n )}\n >\n <div className=\"flex h-full flex-col overflow-y-auto\">\n <div className=\"px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex\">\n <div className=\"flex items-center\">\n <a href=\"/\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n className=\"h-5\"\n height={20}\n width={183}\n loading=\"eager\"\n />\n </a>\n </div>\n <button\n onClick={onClose}\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800\"\n aria-label=\"關閉選單\"\n >\n <ClearIcon />\n </button>\n </div>\n\n <div className=\"px-6 tablet:px-8 pt-4 desktop:hidden\">\n <SearchInputSection\n mode=\"inline\"\n tags={keywords}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <div className=\"py-4 flex-1\">\n <HeaderMenuItem {...menuItems?.[0]} />\n\n <Divider />\n\n {/* Categories */}\n <div className=\"py-2\">\n <HeaderMenuItemGroup isMenuOpen={isOpen} menuItems={menuItems} />\n </div>\n\n <Divider />\n\n {/* My Reading */}\n <HeaderMenuItem\n {...additionalMenuItems?.[0]}\n contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n />\n {/* Reading Settings */}\n <HeaderMenuItem\n {...additionalMenuItems?.[1]}\n contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n />\n\n <Divider />\n\n {/* About Us Section */}\n <div className=\"py-2\">\n {additionalMenuItems.slice(2).map((item) => (\n <HeaderMenuItem\n key={item.label}\n label={item.label}\n href={item.href}\n external={item.external}\n contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n />\n ))}\n </div>\n\n <Divider />\n\n {/* Social Media */}\n <div className=\"px-6 tablet:px-8\">\n <div className=\"gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between\">\n {socialMediaConfig.map((item) => (\n <a\n key={item.label}\n href={item.href}\n className=\"text-neutral-900 transition-colors duration-200 hover:text-red-500\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label={item.label}\n >\n <div className=\"w-6 h-6 flex items-center justify-center\">\n {item.icon && <item.icon />}\n </div>\n </a>\n ))}\n </div>\n </div>\n </div>\n\n {/* Action Buttons */}\n <div className=\"px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8\">\n <div className=\"gap-4 flex flex-col\">\n <Button variant=\"secondary\" size={44} asChild className=\"w-full\">\n <a\n href={subscribeUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n 訂閱電子報\n </a>\n </Button>\n <Button variant=\"primary\" size={44} asChild className=\"w-full\">\n <a href={donateUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 贊助我們\n </a>\n </Button>\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default Menu\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_react","_button","_icons","_cn","_generateSocialMediaConfig","_sharedComponents","_headerMenuItem","_headerMenuItemGroup","_jsxRuntime","Divider","jsx","className","children","Menu","isOpen","onClose","keywords","menuItems","additionalMenuItems","socialMediaHrefs","donateUrl","subscribeUrl","searchPlaceholder","socialMediaConfig","generateSocialMediaConfig","useEffect","document","body","classList","add","remove","handleEscape","e","key","addEventListener","removeEventListener","jsxs","Fragment","cn","onClick","href","src","alt","height","width","loading","ClearIcon","SearchInputSection","mode","tags","isMenuOpen","contentClassName","slice","map","item","label","external","target","rel","icon","variant","size","asChild","_default"],"sources":["../../../src/header/menu/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport Button from '../../components/button'\nimport { ClearIcon } from '../../icons'\nimport type { MenuItem, SocialMediaHrefs } from '../../types'\nimport { cn } from '../../utils/cn'\nimport { generateSocialMediaConfig } from '../../utils/generate-social-media-config'\nimport { SearchInputSection } from '../shared-components'\nimport HeaderMenuItem from './header-menu-item'\nimport HeaderMenuItemGroup from './header-menu-item-group'\n\ntype MenuProps = {\n isOpen: boolean\n onClose: () => void\n keywords: string[]\n menuItems: MenuItem[]\n additionalMenuItems: MenuItem[]\n socialMediaHrefs: SocialMediaHrefs\n donateUrl: string\n subscribeUrl: string\n searchPlaceholder: string\n}\n\nfunction Divider() {\n return (\n <div className=\"px-6 tablet:px-8 py-4 w-full\">\n <div className=\"h-px w-full bg-neutral-300\"></div>\n </div>\n )\n}\n\nfunction Menu({\n isOpen,\n onClose,\n keywords,\n menuItems,\n additionalMenuItems,\n socialMediaHrefs,\n donateUrl,\n subscribeUrl,\n searchPlaceholder,\n}: MenuProps) {\n const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)\n\n useEffect(() => {\n if (isOpen) {\n document.body.classList.add('no-scroll')\n } else {\n document.body.classList.remove('no-scroll')\n }\n\n return () => {\n document.body.classList.remove('no-scroll')\n }\n }, [isOpen])\n\n useEffect(() => {\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose()\n }\n }\n\n if (isOpen) {\n document.addEventListener('keydown', handleEscape)\n }\n\n return () => {\n document.removeEventListener('keydown', handleEscape)\n }\n }, [isOpen, onClose])\n\n return (\n <>\n {/* Overlay */}\n <div\n className={cn(\n 'inset-0 fixed z-overlay bg-neutral-500/50 transition-opacity duration-300',\n isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'\n )}\n onClick={onClose}\n />\n\n {/* Menu */}\n <div\n className={cn(\n 'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out tablet:pt-0 fixed z-overlay h-full scrollbar-thin w-full transform pt-(--mobile-header-height) transition-transform duration-300',\n isOpen ? 'translate-x-0' : '-translate-x-full'\n )}\n >\n <div className=\"flex h-full flex-col overflow-y-auto\">\n <div className=\"px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex\">\n <div className=\"flex items-center\">\n <a href=\"/\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n className=\"h-5\"\n height={20}\n width={183}\n loading=\"eager\"\n />\n </a>\n </div>\n <button\n onClick={onClose}\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800\"\n aria-label=\"關閉選單\"\n >\n <ClearIcon />\n </button>\n </div>\n\n <div className=\"px-6 tablet:px-8 pt-4 desktop:hidden\">\n <SearchInputSection\n mode=\"inline\"\n tags={keywords}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <div className=\"py-4 flex-1\">\n {/* Categories */}\n <div className=\"py-2\">\n <HeaderMenuItemGroup isMenuOpen={isOpen} menuItems={menuItems} />\n </div>\n\n <Divider />\n\n {/* My Reading */}\n <HeaderMenuItem\n {...additionalMenuItems?.[0]}\n contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n />\n {/* Reading Settings */}\n <HeaderMenuItem\n {...additionalMenuItems?.[1]}\n contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n />\n\n <Divider />\n\n {/* About Us Section */}\n <div className=\"py-2\">\n {additionalMenuItems.slice(2).map((item) => (\n <HeaderMenuItem\n key={item.label}\n label={item.label}\n href={item.href}\n external={item.external}\n contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n />\n ))}\n </div>\n\n <Divider />\n\n {/* Social Media */}\n <div className=\"px-6 tablet:px-8\">\n <div className=\"gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between\">\n {socialMediaConfig.map((item) => (\n <a\n key={item.label}\n href={item.href}\n className=\"text-neutral-900 transition-colors duration-200 hover:text-red-500\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label={item.label}\n >\n <div className=\"w-6 h-6 flex items-center justify-center\">\n {item.icon && <item.icon />}\n </div>\n </a>\n ))}\n </div>\n </div>\n </div>\n\n {/* Action Buttons */}\n <div className=\"px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8\">\n <div className=\"gap-4 flex flex-col\">\n <Button variant=\"secondary\" size={44} asChild className=\"w-full\">\n <a\n href={subscribeUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n 訂閱電子報\n </a>\n </Button>\n <Button variant=\"primary\" size={44} asChild className=\"w-full\">\n <a href={donateUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 贊助我們\n </a>\n </Button>\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default Menu\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,7 +25,7 @@ function MobileHeader({
|
|
|
25
25
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
26
26
|
className: (0, _cn.cn)('h-(--mobile-header-height) desktop:hidden', hide && 'h-0')
|
|
27
27
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
28
|
-
className: (0, _cn.cn)('px-6 tablet:px-8 ease-in-out top-0 translate-y-0 pointer-events-auto fixed z-
|
|
28
|
+
className: (0, _cn.cn)('px-6 tablet:px-8 ease-in-out top-0 translate-y-0 pointer-events-auto fixed z-modal w-full opacity-100 transition-all duration-300 tablet:z-bar desktop:hidden', hide && 'pointer-events-none -translate-y-full opacity-0', showBackgroundColor && 'bg-neutral-white'),
|
|
29
29
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
30
30
|
className: "py-4 flex items-center justify-between",
|
|
31
31
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-header.js","names":["Object","defineProperty","exports","value","MobileHeader","_icons","require","_cn","_sharedComponents","_jsxRuntime","onHamburgerOverlayOpen","onCloseMenu","showCloseButtonWhenMenuOpen","isMenuOpen","isLoggedIn","loginUrl","mobileBackButtonHref","hide","showBackgroundColor","showCloseButton","jsxs","Fragment","children","jsx","className","cn","href","ArrowIcon","LogoLink","LoginIcon","onClick","ClearIcon","HamburgerButton"],"sources":["../../src/header/mobile-header.tsx"],"sourcesContent":["'use client'\n\nimport { ArrowIcon, ClearIcon, LoginIcon } from '../icons'\nimport { cn } from '../utils/cn'\nimport { HamburgerButton, LogoLink } from './shared-components'\n\ntype MobileHeaderProps = {\n onHamburgerOverlayOpen: () => void\n onCloseMenu: () => void\n showCloseButtonWhenMenuOpen: boolean\n isMenuOpen: boolean\n isLoggedIn?: boolean\n mobileBackButtonHref?: string\n loginUrl?: string\n hide?: boolean\n showBackgroundColor?: boolean\n}\n\nexport function MobileHeader({\n onHamburgerOverlayOpen,\n onCloseMenu,\n showCloseButtonWhenMenuOpen,\n isMenuOpen,\n isLoggedIn,\n loginUrl,\n mobileBackButtonHref,\n hide = false,\n showBackgroundColor = false,\n}: MobileHeaderProps) {\n const showCloseButton = showCloseButtonWhenMenuOpen && isMenuOpen\n\n return (\n <>\n <div\n className={cn(\n 'h-(--mobile-header-height) desktop:hidden',\n hide && 'h-0'\n )}\n ></div>\n <div\n className={cn(\n 'px-6 tablet:px-8 ease-in-out top-0 translate-y-0 pointer-events-auto fixed z-
|
|
1
|
+
{"version":3,"file":"mobile-header.js","names":["Object","defineProperty","exports","value","MobileHeader","_icons","require","_cn","_sharedComponents","_jsxRuntime","onHamburgerOverlayOpen","onCloseMenu","showCloseButtonWhenMenuOpen","isMenuOpen","isLoggedIn","loginUrl","mobileBackButtonHref","hide","showBackgroundColor","showCloseButton","jsxs","Fragment","children","jsx","className","cn","href","ArrowIcon","LogoLink","LoginIcon","onClick","ClearIcon","HamburgerButton"],"sources":["../../src/header/mobile-header.tsx"],"sourcesContent":["'use client'\n\nimport { ArrowIcon, ClearIcon, LoginIcon } from '../icons'\nimport { cn } from '../utils/cn'\nimport { HamburgerButton, LogoLink } from './shared-components'\n\ntype MobileHeaderProps = {\n onHamburgerOverlayOpen: () => void\n onCloseMenu: () => void\n showCloseButtonWhenMenuOpen: boolean\n isMenuOpen: boolean\n isLoggedIn?: boolean\n mobileBackButtonHref?: string\n loginUrl?: string\n hide?: boolean\n showBackgroundColor?: boolean\n}\n\nexport function MobileHeader({\n onHamburgerOverlayOpen,\n onCloseMenu,\n showCloseButtonWhenMenuOpen,\n isMenuOpen,\n isLoggedIn,\n loginUrl,\n mobileBackButtonHref,\n hide = false,\n showBackgroundColor = false,\n}: MobileHeaderProps) {\n const showCloseButton = showCloseButtonWhenMenuOpen && isMenuOpen\n\n return (\n <>\n <div\n className={cn(\n 'h-(--mobile-header-height) desktop:hidden',\n hide && 'h-0'\n )}\n ></div>\n <div\n className={cn(\n 'px-6 tablet:px-8 ease-in-out top-0 translate-y-0 pointer-events-auto fixed z-modal w-full opacity-100 transition-all duration-300 tablet:z-bar desktop:hidden',\n hide && 'pointer-events-none -translate-y-full opacity-0',\n showBackgroundColor && 'bg-neutral-white'\n )}\n >\n <div className=\"py-4 flex items-center justify-between\">\n <div className=\"flex items-center\">\n {mobileBackButtonHref && (\n <a\n href={mobileBackButtonHref}\n className=\"size-8 mr-2 flex cursor-pointer items-center justify-center text-neutral-600 tablet:hidden\"\n >\n <ArrowIcon />\n </a>\n )}\n <LogoLink />\n </div>\n\n <div className=\"gap-4 flex items-center\">\n {!showCloseButton && (\n <a\n href={isLoggedIn ? '/member' : (loginUrl ?? '/login')}\n className=\"w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500\"\n aria-label=\"登入\"\n >\n <LoginIcon />\n </a>\n )}\n {showCloseButton ? (\n <button\n onClick={onCloseMenu}\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800\"\n aria-label=\"關閉選單\"\n >\n <ClearIcon />\n </button>\n ) : (\n <HamburgerButton\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n />\n )}\n </div>\n </div>\n </div>\n </>\n )\n}\n"],"mappings":";AAAA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,YAAA,GAAAA,YAAA;AAEZ,IAAAC,MAAA,GAAAC,OAAA;AACA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAA+D,IAAAG,WAAA,GAAAH,OAAA;AAcxD,SAASF,YAAYA,CAAC;EAC3BM,sBAAsB;EACtBC,WAAW;EACXC,2BAA2B;EAC3BC,UAAU;EACVC,UAAU;EACVC,QAAQ;EACRC,oBAAoB;EACpBC,IAAI,GAAG,KAAK;EACZC,mBAAmB,GAAG;AACL,CAAC,EAAE;EACpB,MAAMC,eAAe,GAAGP,2BAA2B,IAAIC,UAAU;EAEjE,oBACE,IAAAJ,WAAA,CAAAW,IAAA,EAAAX,WAAA,CAAAY,QAAA;IAAAC,QAAA,gBACE,IAAAb,WAAA,CAAAc,GAAA;MACEC,SAAS,EAAE,IAAAC,MAAE,EACX,2CAA2C,EAC3CR,IAAI,IAAI,KACV;IAAE,CACE,CAAC,eACP,IAAAR,WAAA,CAAAc,GAAA;MACEC,SAAS,EAAE,IAAAC,MAAE,EACX,+JAA+J,EAC/JR,IAAI,IAAI,iDAAiD,EACzDC,mBAAmB,IAAI,kBACzB,CAAE;MAAAI,QAAA,eAEF,IAAAb,WAAA,CAAAW,IAAA;QAAKI,SAAS,EAAC,wCAAwC;QAAAF,QAAA,gBACrD,IAAAb,WAAA,CAAAW,IAAA;UAAKI,SAAS,EAAC,mBAAmB;UAAAF,QAAA,GAC/BN,oBAAoB,iBACnB,IAAAP,WAAA,CAAAc,GAAA;YACEG,IAAI,EAAEV,oBAAqB;YAC3BQ,SAAS,EAAC,4FAA4F;YAAAF,QAAA,eAEtG,IAAAb,WAAA,CAAAc,GAAA,EAAClB,MAAA,CAAAsB,SAAS,IAAE;UAAC,CACZ,CACJ,eACD,IAAAlB,WAAA,CAAAc,GAAA,EAACf,iBAAA,CAAAoB,QAAQ,IAAE,CAAC;QAAA,CACT,CAAC,eAEN,IAAAnB,WAAA,CAAAW,IAAA;UAAKI,SAAS,EAAC,yBAAyB;UAAAF,QAAA,GACrC,CAACH,eAAe,iBACf,IAAAV,WAAA,CAAAc,GAAA;YACEG,IAAI,EAAEZ,UAAU,GAAG,SAAS,GAAIC,QAAQ,IAAI,QAAU;YACtDS,SAAS,EAAC,sHAAsH;YAChI,cAAW,cAAI;YAAAF,QAAA,eAEf,IAAAb,WAAA,CAAAc,GAAA,EAAClB,MAAA,CAAAwB,SAAS,IAAE;UAAC,CACZ,CACJ,EACAV,eAAe,gBACd,IAAAV,WAAA,CAAAc,GAAA;YACEO,OAAO,EAAEnB,WAAY;YACrBa,SAAS,EAAC,6IAA6I;YACvJ,cAAW,0BAAM;YAAAF,QAAA,eAEjB,IAAAb,WAAA,CAAAc,GAAA,EAAClB,MAAA,CAAA0B,SAAS,IAAE;UAAC,CACP,CAAC,gBAET,IAAAtB,WAAA,CAAAc,GAAA,EAACf,iBAAA,CAAAwB,eAAe;YACdtB,sBAAsB,EAAEA;UAAuB,CAChD,CACF;QAAA,CACE,CAAC;MAAA,CACH;IAAC,CACH,CAAC;EAAA,CACN,CAAC;AAEP","ignoreList":[]}
|
package/dist/styles.css
CHANGED
|
@@ -116,6 +116,13 @@
|
|
|
116
116
|
/* Header */
|
|
117
117
|
--mobile-header-height: 64px;
|
|
118
118
|
|
|
119
|
+
/* Z-Index scale (999–1003) – generic layer names */
|
|
120
|
+
--z-index-sticky: 999;
|
|
121
|
+
--z-index-bar: 1000;
|
|
122
|
+
--z-index-nav: 1001;
|
|
123
|
+
--z-index-overlay: 1002;
|
|
124
|
+
--z-index-modal: 1003;
|
|
125
|
+
|
|
119
126
|
/* Legacy variables for backward compatibility */
|
|
120
127
|
--fontFamily: var(--font-family-noto);
|
|
121
128
|
--max-width: 1100px;
|
|
@@ -363,3 +370,20 @@
|
|
|
363
370
|
@utility theme-blue {
|
|
364
371
|
--theme-color: var(--color-blue-400);
|
|
365
372
|
}
|
|
373
|
+
|
|
374
|
+
/* Z-Index utilities */
|
|
375
|
+
@utility z-sticky {
|
|
376
|
+
z-index: var(--z-index-sticky);
|
|
377
|
+
}
|
|
378
|
+
@utility z-bar {
|
|
379
|
+
z-index: var(--z-index-bar);
|
|
380
|
+
}
|
|
381
|
+
@utility z-nav {
|
|
382
|
+
z-index: var(--z-index-nav);
|
|
383
|
+
}
|
|
384
|
+
@utility z-overlay {
|
|
385
|
+
z-index: var(--z-index-overlay);
|
|
386
|
+
}
|
|
387
|
+
@utility z-modal {
|
|
388
|
+
z-index: var(--z-index-modal);
|
|
389
|
+
}
|