@twreporter/universal-header 2.10.1-rc.1 → 2.11.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.11.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.10.1-rc.1...@twreporter/universal-header@2.11.0-rc.0) (2024-02-07)
+
+
+### Features
+
+* add `my reading` related entry on universal navigator ([79cadc2](https://github.com/twreporter/twreporter-npm-packages/commit/79cadc293493bc517fcf95139ff208633acd699b))
+
+
+
+
+
 ## [2.10.1-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.10.1-rc.0...@twreporter/universal-header@2.10.1-rc.1) (2024-01-25)
 
 **Note:** Version bump only for package @twreporter/universal-header

package/lib/components/hamburger-footer.js

@@ -61,16 +61,22 @@ var FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var LinkItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-footer__LinkItem",
   componentId: "i02xyc-1"
-})(["padding:8px 32px;color:", ";", " &:active{color:", ";background-color:", ";}"], function (props) {
+})(["padding:8px 32px;display:flex;align-items:center;color:", ";svg{height:18px;width:18px;margin-right:4px;background-color:", ";}", " &:active{color:", ";background-color:", ";svg{background-color:", ";}}"], function (props) {
   return props.color;
-}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n  "])), function (props) {
+}, function (props) {
+  return props.color;
+}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      svg {\n        background-color: ", ";\n      }\n    }\n  "])), function (props) {
   return props.hoverColor;
 }, function (props) {
   return props.hoverBgColor;
+}, function (props) {
+  return props.hoverColor;
 }), function (props) {
   return props.activeColor;
 }, function (props) {
   return props.activeBgColor;
+}, function (props) {
+  return props.activeColor;
 });
 
 var LinkSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -113,6 +119,31 @@ var Footer = function Footer(_ref) {
       activeColor = _selectHamburgerFoote.activeColor,
       activeBgColor = _selectHamburgerFoote.activeBgColor;
 
+  var memberLinks = (0, _links.getMemberLinks)(isLinkExternal, releaseBranch);
+  var memberJSX = memberLinks ? /*#__PURE__*/_react["default"].createElement(LinkSection, null, _.map(_footer.MEMBER_ORDER, function (key) {
+    var link = memberLinks[key];
+    var label = _footer.FOOTER_LABEL[key];
+
+    if (!link || !label) {
+      return;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
+      key: key,
+      onClick: closeHamburgerMenu
+    }), /*#__PURE__*/_react["default"].createElement(LinkItem, {
+      color: color,
+      hoverColor: hoverColor,
+      hoverBgColor: hoverBgColor,
+      activeColor: activeColor,
+      activeBgColor: activeBgColor
+    }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      filename: _footer.FOOTER_ICON[key],
+      releaseBranch: releaseBranch
+    }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+      text: label
+    })));
+  })) : null;
   var footerLinks = (0, _links.getFooterLinks)(isLinkExternal, releaseBranch);
   var linkJSX = footerLinks ? /*#__PURE__*/_react["default"].createElement(LinkSection, null, _.map(_footer.FOOTER_ORDER, function (key) {
     var link = footerLinks[key];
@@ -155,7 +186,7 @@ var Footer = function Footer(_ref) {
       theme: footerTheme
     })));
   })) : null;
-  return /*#__PURE__*/_react["default"].createElement(FooterContainer, props, linkJSX, /*#__PURE__*/_react["default"].createElement(DividerContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), socialMediaJSX);
+  return /*#__PURE__*/_react["default"].createElement(FooterContainer, props, memberJSX, /*#__PURE__*/_react["default"].createElement(DividerContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), linkJSX, /*#__PURE__*/_react["default"].createElement(DividerContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), socialMediaJSX);
 };
 
 var _default = Footer;

package/lib/components/hamburger-menu.js

@@ -81,7 +81,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Footer = _featureFlag.FOUNDATION_CATEGORY_SET ? _hamburgerFooter["default"] : _hamburgerFooterOld["default"];
+var Footer = _featureFlag.MY_READING ? _hamburgerFooter["default"] : _hamburgerFooterOld["default"];
 var _ = {
   map: _map["default"]
 }; // global var

package/lib/components/header-old.js

@@ -0,0 +1,393 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+
+var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
+
+var _linksOld = require("../utils/links-old");
+
+var _theme = require("../utils/theme");
+
+var _theme2 = _interopRequireDefault(require("../constants/theme"));
+
+var _hamburgerMenu = require("../constants/hamburger-menu");
+
+var _channels = _interopRequireDefault(require("./channels"));
+
+var _actionButton = require("./action-button");
+
+var _iconsOld = _interopRequireWildcard(require("./icons-old"));
+
+var _slogan = _interopRequireDefault(require("./slogan"));
+
+var _hamburgerMenu2 = _interopRequireDefault(require("./hamburger-menu"));
+
+var _tabBarOld = _interopRequireDefault(require("./tab-bar-old"));
+
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
+
+var _logo = require("@twreporter/react-components/lib/logo");
+
+var _button = require("@twreporter/react-components/lib/button");
+
+var _icon = require("@twreporter/react-components/lib/icon");
+
+var _hook = require("@twreporter/react-components/lib/hook");
+
+var _rwd = require("@twreporter/react-components/lib/rwd");
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+var _some = _interopRequireDefault(require("lodash/some"));
+
+var _includes = _interopRequireDefault(require("lodash/includes"));
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  some: _some["default"],
+  includes: _includes["default"],
+  throttle: _throttle["default"]
+};
+var narrowHeaderHeight = 65;
+var channelHeight = 50;
+var animation = {
+  step1Duration: '200ms',
+  step2Delay: '150ms',
+  step2Duration: '50ms',
+  step3Delay: '150ms',
+  step3Duration: '200ms'
+};
+var zIndex = {
+  tabBarMobile: 10,
+  tabBarTablet: 3,
+  hamburger: 4,
+  header: 3,
+  topRow: 2,
+  channel: 1
+};
+var channelSlideIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(", "px);opacity:0;}to{transform:translateY(0);opacity:1;}"], -channelHeight);
+var channelSlideOut = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(0);}to{transform:translateY(", "px);}"], -channelHeight);
+var ChannelEffect = /*#__PURE__*/(0, _styledComponents.css)([".channel-effect-enter{opacity:0;}.channel-effect-enter-active{animation:", " ", " linear;animation-delay:150ms;}.channel-effect-exit-active{animation:", " ", " linear;animation-delay:0ms;}"], channelSlideIn, animation.step1Duration, channelSlideOut, animation.step1Duration);
+
+var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__HeaderContainer",
+  componentId: "sc-1fortyi-0"
+})(["position:", ";top:0;width:100%;background-color:", ";transform:translateY( ", " );transition:transform 300ms ", ";", ""], function (props) {
+  return props.theme === _theme2["default"].transparent ? 'fixed' : 'sticky';
+}, function (props) {
+  return props.bgColor;
+}, function (props) {
+  return props.hideHeader ? "".concat(-narrowHeaderHeight, "px") : '0';
+}, function (props) {
+  return props.hideHeader ? 'ease-in' : 'ease-out';
+}, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
+  return props.forceShowOnMobile ? 'transform: translateY(0);' : '';
+}));
+
+var HeaderSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__HeaderSection",
+  componentId: "sc-1fortyi-1"
+})(["display:flex;flex-direction:column;margin:auto;z-index:", ";", " ", " ", " ", ""], zIndex.header, _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 1280px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 0 48px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 0 32px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 0 24px;\n  "]))));
+
+var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__LogoContainer",
+  componentId: "sc-1fortyi-2"
+})(["display:flex;align-items:center;margin-right:16px;a{display:flex;}"]);
+
+var MobileLogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__MobileLogoContainer",
+  componentId: "sc-1fortyi-3"
+})(["display:flex;align-items:center;img{height:21px;}a{display:flex;}"]);
+
+var HideWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__HideWhenNarrow",
+  componentId: "sc-1fortyi-4"
+})([""]);
+
+var ShowWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__ShowWhenNarrow",
+  componentId: "sc-1fortyi-5"
+})([""]);
+
+var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__TopRow",
+  componentId: "sc-1fortyi-6"
+})(["display:flex;align-items:center;justify-content:space-between;padding:", " 16px;z-index:", ";background-color:", ";", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{margin-left:", ";transform:translateX(", ");transition:all ", ";transition-delay:", ";img,a{height:", ";transition:height ", ";transition-delay:", ";}}", ""], function (props) {
+  return props.toUseNarrow ? '16px' : '24px';
+}, zIndex.topRow, function (props) {
+  return props.topRowBgColor;
+}, ShowWhenNarrow, function (props) {
+  return props.toUseNarrow ? '1' : '0';
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? '350ms' : 0;
+}, HideWhenNarrow, function (props) {
+  return props.toUseNarrow ? '0' : '1';
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? animation.step3Delay : 0;
+}, LogoContainer, function (props) {
+  return props.toUseNarrow ? '24px' : '0';
+}, function (props) {
+  return props.toUseNarrow ? '0' : '-24px';
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? animation.step3Delay : 0;
+}, function (props) {
+  return props.toUseNarrow ? '24px' : '32px';
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? animation.step3Delay : 0;
+}, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: 16px 0;\n  "]))));
+
+var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
+  displayName: "header-old__StyledDivider",
+  componentId: "sc-1fortyi-7"
+})(["opacity:", ";transition:opacity ", ";transition-delay:", ";"], function (props) {
+  return props.toUseNarrow ? '0' : '1';
+}, animation.step2Duration, function (props) {
+  return props.toUseNarrow ? animation.step2Delay : 0;
+});
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__IconContainer",
+  componentId: "sc-1fortyi-8"
+})(["margin-left:24px;", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-left: 16px;\n  "]))));
+
+var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__FlexGroup",
+  componentId: "sc-1fortyi-9"
+})(["display:flex;align-items:center;"]);
+
+var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__ChannelContainer",
+  componentId: "sc-1fortyi-10"
+})(["z-index:", ";", ""], zIndex.channel, ChannelEffect);
+
+var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__HamburgerContainer",
+  componentId: "sc-1fortyi-11"
+})(["z-index:", ";position:absolute;top:0;left:-", ";transition:transform 300ms ease-in-out;transform:translateX( ", " );", " ", ""], zIndex.hamburger, _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
+  return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.desktop : 0;
+}, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    left: -", ";\n    transform: translateX(", ");\n  "])), _hamburgerMenu.MENU_WIDTH.tablet, function (props) {
+  return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.tablet : 0;
+}), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    left: 0;\n    transform: none;\n    opacity: ", ";\n  "])), function (props) {
+  return props.showHamburger ? 1 : 0;
+}));
+
+var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__TabBarContainer",
+  componentId: "sc-1fortyi-12"
+})(["position:fixed;bottom:0;left:0;width:100%;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    z-index: ", ";\n  "])), zIndex.tabBarTablet), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    z-index: ", ";\n  "])), zIndex.tabBarMobile));
+
+var HideOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__HideOnArticle",
+  componentId: "sc-1fortyi-13"
+})(["", ""], function (props) {
+  return props.isOnArticlePage ? 'display: none;' : '';
+});
+
+var PrevButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__PrevButton",
+  componentId: "sc-1fortyi-14"
+})(["", " margin-right:16px;"], function (props) {
+  return props.isShow ? '' : 'display: none;';
+});
+
+var Header = function Header(_ref) {
+  var _ref$hamburgerContext = _ref.hamburgerContext,
+      hamburgerContext = _ref$hamburgerContext === void 0 ? {} : _ref$hamburgerContext;
+
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      releaseBranch = _useContext.releaseBranch,
+      isLinkExternal = _useContext.isLinkExternal,
+      theme = _useContext.theme,
+      toUseNarrow = _useContext.toUseNarrow,
+      hideHeader = _useContext.hideHeader,
+      pathname = _useContext.pathname,
+      referrerPath = _useContext.referrerPath;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      defaultShowHamburger = _useState2[0],
+      setDefaultShowHamburger = _useState2[1];
+
+  var showHamburger = (hamburgerContext === null || hamburgerContext === void 0 ? void 0 : hamburgerContext.showHamburger) || defaultShowHamburger;
+  var setShowHamburger = (hamburgerContext === null || hamburgerContext === void 0 ? void 0 : hamburgerContext.setShowHamburger) || setDefaultShowHamburger;
+  var logoLink = (0, _linksOld.getLogoLink)(isLinkExternal, releaseBranch);
+  var logoType = (0, _theme.selectLogoType)(theme);
+
+  var HamburgerIcon = /*#__PURE__*/_react["default"].createElement(_icon.Hamburger, {
+    releaseBranch: releaseBranch
+  });
+
+  var _selectHeaderTheme = (0, _theme.selectHeaderTheme)(theme),
+      bgColor = _selectHeaderTheme.bgColor,
+      topRowBgColor = _selectHeaderTheme.topRowBgColor;
+
+  var toggleHamburger = function toggleHamburger(e) {
+    e.stopPropagation();
+    setShowHamburger(!showHamburger);
+  };
+
+  var closeHamburger = function closeHamburger() {
+    return setShowHamburger(false);
+  };
+
+  var ref = (0, _hook.useOutsideClick)(closeHamburger);
+  var contextValue = {
+    toggleHamburger: toggleHamburger,
+    closeHamburgerMenu: closeHamburger,
+    isHamburgerMenuOpen: showHamburger
+  };
+  (0, _react.useEffect)(function () {
+    closeHamburger();
+  }, [pathname]);
+
+  var isOnArticlePage = _.includes(pathname, _entityPath["default"].article);
+
+  var needPrevIconRoute = ["".concat(_entityPath["default"].account, "/donation-history"), "".concat(_entityPath["default"].account, "/email-subscription"), "".concat(_entityPath["default"].myReading, "/saved"), "".concat(_entityPath["default"].myReading, "/history")];
+
+  var isOnNeedPrevIconPage = _.some(needPrevIconRoute, function (el) {
+    return _.includes(pathname, el);
+  });
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentClientWidth = _useState4[0],
+      setCurrentClientWidth = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var handleResize = _.throttle(function () {
+      setCurrentClientWidth(document.body.clientWidth);
+    });
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  var showPrevIcon = isOnArticlePage || isOnNeedPrevIconPage && currentClientWidth < 768; // only show it on mobile
+
+  var BackToPrevIcon = /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "left",
+    releaseBranch: releaseBranch
+  });
+
+  var gotoPrev = function gotoPrev() {
+    if (referrerPath || (0, _linksOld.checkReferrer)(document.referrer, releaseBranch)) {
+      // go to previous page when referer is twreporter site
+      window.history.back();
+    } else {
+      // go to home page when referer is not twreporter site
+      window.location.href = '/';
+    }
+  };
+
+  var DesktopHeaderJSX = /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
+    toUseNarrow: toUseNarrow,
+    topRowBgColor: topRowBgColor
+  }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(ShowWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: HamburgerIcon,
+    theme: theme,
+    onClick: toggleHamburger
+  })), /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], logoLink, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
+    type: logoType,
+    releaseBranch: releaseBranch
+  }))), /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_actionButton.DesktopHeaderAction, null)), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_iconsOld["default"], null)))), /*#__PURE__*/_react["default"].createElement(StyledDivider, {
+    toUseNarrow: toUseNarrow
+  }), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+    "in": !toUseNarrow,
+    classNames: "channel-effect",
+    timeout: {
+      appear: 0,
+      enter: 350,
+      exit: 200
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
+    onClickHambuger: toggleHamburger
+  }))));
+
+  var MobileHeaderJSX = /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
+    toUseNarrow: toUseNarrow,
+    topRowBgColor: topRowBgColor
+  }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(PrevButton, {
+    isShow: showPrevIcon
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: BackToPrevIcon,
+    theme: theme,
+    onClick: gotoPrev
+  })), /*#__PURE__*/_react["default"].createElement(MobileLogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], logoLink, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
+    type: logoType,
+    releaseBranch: releaseBranch
+  })))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(_actionButton.MobileHeaderAction, null), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_iconsOld.MobileIcons, null)))));
+
+  return /*#__PURE__*/_react["default"].createElement(_headerContext.HamburgerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
+    bgColor: bgColor,
+    hideHeader: hideHeader,
+    forceShowOnMobile: showHamburger,
+    theme: theme
+  }, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, DesktopHeaderJSX), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, MobileHeaderJSX)), /*#__PURE__*/_react["default"].createElement(HamburgerContainer, {
+    ref: ref,
+    showHamburger: showHamburger
+  }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+    "in": showHamburger,
+    classNames: "hamburger-effect",
+    timeout: {
+      appear: 0,
+      enter: 300,
+      exit: 300
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenu2["default"], null))), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(HideOnArticle, {
+    isOnArticlePage: isOnArticlePage
+  }, /*#__PURE__*/_react["default"].createElement(TabBarContainer, null, /*#__PURE__*/_react["default"].createElement(_tabBarOld["default"], {
+    toggleHamburger: toggleHamburger
+  })))));
+};
+
+Header.propTypes = {
+  hamburgerContext: _propTypes["default"].object
+};
+var _default = Header;
+exports["default"] = _default;

package/lib/components/header.js

@@ -226,7 +226,7 @@ var HideOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var PrevButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__PrevButton",
   componentId: "sc-1krza7i-14"
-})(["", " margin-right:16px;"], function (props) {
+})(["", " margin-right:8px;padding:4px;transform:translateX(-8px);"], function (props) {
   return props.isShow ? '' : 'display: none;';
 });
 
@@ -350,11 +350,11 @@ var Header = function Header(_ref) {
     toUseNarrow: toUseNarrow,
     topRowBgColor: topRowBgColor
   }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(PrevButton, {
-    isShow: showPrevIcon
+    isShow: showPrevIcon,
+    onClick: gotoPrev
   }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: BackToPrevIcon,
-    theme: theme,
-    onClick: gotoPrev
+    theme: theme
   })), /*#__PURE__*/_react["default"].createElement(MobileLogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], logoLink, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
     type: logoType,
     releaseBranch: releaseBranch

package/lib/components/icons-old.js

@@ -0,0 +1,255 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MobileIcons = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _querystring = _interopRequireDefault(require("querystring"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _linksOld = require("../utils/links-old");
+
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
+
+var _button = require("@twreporter/react-components/lib/button");
+
+var _icon = require("@twreporter/react-components/lib/icon");
+
+var _input = require("@twreporter/react-components/lib/input");
+
+var _hook = require("@twreporter/react-components/lib/hook");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var IconsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons-old__IconsContainer",
+  componentId: "n1dgyi-0"
+})(["display:flex;"]);
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons-old__IconContainer",
+  componentId: "n1dgyi-1"
+})(["position:relative;margin-right:16px;&:last-child{margin-right:0;}a{display:flex;}"]);
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons-old__Container",
+  componentId: "n1dgyi-2"
+})(["opacity:", ";transition:opacity 300ms ease;"], function (props) {
+  return props.isSearchOpened ? '0' : '1';
+});
+
+var LogContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons-old__LogContainer",
+  componentId: "n1dgyi-3"
+})(["display:flex;flex-direction:column;"]);
+
+var SearchContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons-old__SearchContainer",
+  componentId: "n1dgyi-4"
+})(["opacity:", ";transition:opacity 300ms ease;position:absolute;right:0;top:-8px;z-index:", ";"], function (props) {
+  return props.isSearchOpened ? '1' : '0';
+}, function (props) {
+  return props.isSearchOpened ? 999 : -1;
+});
+
+var MemberButtonType = {
+  ICON: 'icon',
+  TEXT: 'text'
+};
+
+var MemberIcon = function MemberIcon(_ref) {
+  var _ref$memberButtonType = _ref.memberButtonType,
+      memberButtonType = _ref$memberButtonType === void 0 ? MemberButtonType.ICON : _ref$memberButtonType,
+      _ref$isForHambuger = _ref.isForHambuger,
+      isForHambuger = _ref$isForHambuger === void 0 ? false : _ref$isForHambuger;
+
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      releaseBranch = _useContext.releaseBranch,
+      theme = _useContext.theme,
+      isAuthed = _useContext.isAuthed,
+      isLinkExternal = _useContext.isLinkExternal;
+
+  var onClickIcon = function onClickIcon(e) {
+    e.preventDefault();
+
+    if (isAuthed) {
+      window.location = (0, _linksOld.getMemberLink)(isLinkExternal, releaseBranch).to;
+      return;
+    }
+
+    var redirectURL = window.location.href;
+
+    var query = _querystring["default"].stringify({
+      destination: redirectURL
+    });
+
+    window.location = (0, _linksOld.getLoginLink)(releaseBranch).to + '?' + query;
+  };
+
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Member, {
+    releaseBranch: releaseBranch
+  });
+
+  var buttonTheme;
+
+  if (isForHambuger) {
+    if (theme === _theme.THEME.transparent) {
+      buttonTheme = _theme.THEME.normal;
+    } else {
+      buttonTheme = theme;
+    }
+  } else {
+    buttonTheme = theme;
+  }
+
+  var LoginButton = memberButtonType === MemberButtonType.ICON || isAuthed ? /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon,
+    theme: buttonTheme
+  }) : /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
+    text: "\u767B\u5165",
+    theme: buttonTheme,
+    style: _button.TextButton.Style.DARK
+  });
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    key: "login"
+  }, /*#__PURE__*/_react["default"].createElement(LogContainer, {
+    onClick: onClickIcon
+  }, LoginButton));
+};
+
+MemberIcon.propTypes = {
+  memberButtonType: _propTypes["default"].oneOf(Object.values(MemberButtonType)),
+  isForHambuger: _propTypes["default"].bool
+};
+
+var SearchIcon = function SearchIcon() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isSearchOpened = _useState2[0],
+      setSearchOpened = _useState2[1];
+
+  var _useContext2 = (0, _react.useContext)(_headerContext["default"]),
+      isLinkExternal = _useContext2.isLinkExternal,
+      releaseBranch = _useContext2.releaseBranch,
+      theme = _useContext2.theme;
+
+  var closeSearchBox = function closeSearchBox() {
+    setSearchOpened(false);
+  };
+
+  var handleClickSearch = function handleClickSearch(e) {
+    e.preventDefault();
+    setSearchOpened(true);
+
+    if (!ref.current) {
+      return;
+    }
+
+    var input = ref.current.getElementsByTagName('INPUT')[0];
+
+    if (input) {
+      input.focus();
+    }
+  };
+
+  var onSearch = function onSearch(keywords) {
+    setSearchOpened(false);
+
+    if (!window) {
+      return;
+    }
+
+    window.location = "".concat((0, _linksOld.getSearchLink)(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
+  };
+
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Search, {
+    releaseBranch: releaseBranch
+  });
+
+  var ref = (0, _hook.useOutsideClick)(closeSearchBox);
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    ref: ref,
+    key: "search"
+  }, /*#__PURE__*/_react["default"].createElement(Container, {
+    onClick: handleClickSearch,
+    isSearchOpened: isSearchOpened
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon,
+    theme: theme
+  })), /*#__PURE__*/_react["default"].createElement(SearchContainer, {
+    isSearchOpened: isSearchOpened
+  }, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
+    placeholder: "\u95DC\u9375\u5B57\u641C\u5C0B",
+    theme: theme,
+    onClose: closeSearchBox,
+    onSearch: onSearch
+  })));
+};
+
+var BookmarkIcon = function BookmarkIcon() {
+  var _useContext3 = (0, _react.useContext)(_headerContext["default"]),
+      releaseBranch = _useContext3.releaseBranch,
+      isLinkExternal = _useContext3.isLinkExternal,
+      theme = _useContext3.theme;
+
+  var link = (0, _linksOld.getBookmarksLink)(isLinkExternal, releaseBranch);
+
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+    releaseBranch: releaseBranch
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    key: "bookmark"
+  }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon,
+    theme: theme
+  })));
+};
+
+var Icons = function Icons() {
+  return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null), /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null), /*#__PURE__*/_react["default"].createElement(MemberIcon, null));
+};
+
+var MobileIcons = function MobileIcons(_ref2) {
+  var _ref2$isForHambuger = _ref2.isForHambuger,
+      isForHambuger = _ref2$isForHambuger === void 0 ? false : _ref2$isForHambuger;
+  return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(MemberIcon, {
+    memberButtonType: MemberButtonType.TEXT,
+    isForHambuger: isForHambuger
+  }));
+};
+
+exports.MobileIcons = MobileIcons;
+MobileIcons.propTypes = {
+  isForHambuger: _propTypes["default"].bool
+};
+var _default = Icons;
+exports["default"] = _default;

package/lib/components/icons.js

@@ -214,15 +214,15 @@ var SearchIcon = function SearchIcon() {
   })));
 };
 
-var BookmarkIcon = function BookmarkIcon() {
+var MyReadingIcon = function MyReadingIcon() {
   var _useContext3 = (0, _react.useContext)(_headerContext["default"]),
       releaseBranch = _useContext3.releaseBranch,
       isLinkExternal = _useContext3.isLinkExternal,
       theme = _useContext3.theme;
 
-  var link = (0, _links.getBookmarksLink)(isLinkExternal, releaseBranch);
+  var link = (0, _links.getMyReadingLink)(isLinkExternal, releaseBranch);
 
-  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.KidStar, {
     releaseBranch: releaseBranch
   });
 
@@ -235,7 +235,7 @@ var BookmarkIcon = function BookmarkIcon() {
 };
 
 var Icons = function Icons() {
-  return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null), /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null), /*#__PURE__*/_react["default"].createElement(MemberIcon, null));
+  return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null), /*#__PURE__*/_react["default"].createElement(MyReadingIcon, null), /*#__PURE__*/_react["default"].createElement(MemberIcon, null));
 };
 
 var MobileIcons = function MobileIcons(_ref2) {

package/lib/components/tab-bar-old.js

@@ -0,0 +1,144 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
+
+var _links = require("../utils/links");
+
+var _theme = require("../utils/theme");
+
+var _theme2 = _interopRequireDefault(require("../constants/theme"));
+
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
+
+var _materialIcon = _interopRequireDefault(require("@twreporter/react-components/lib/material-icon"));
+
+var _button = require("@twreporter/react-components/lib/button");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab-bar-old__TabBarContainer",
+  componentId: "odm8r5-0"
+})(["display:flex;justify-content:space-between;padding:8px 16px;box-shadow:0px 0px 2px rgba(0,0,0,0.15);background-color:", ";padding-bottom:calc(8px + env(safe-area-inset-bottom,0));a{text-decoration:none;}a:visited,a:active{color:inherit;background-color:inherit;}"], function (props) {
+  return props.bgColor;
+});
+
+var buttonContainerCss = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;justify-content:center;margin-right:8px;flex:1;&:last-child{margin-right:0;}"]);
+var ButtonLinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
+  displayName: "tab-bar-old__ButtonLinkContainer",
+  componentId: "odm8r5-1"
+})(["text-decoration:none;", ""], buttonContainerCss);
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab-bar-old__ButtonContainer",
+  componentId: "odm8r5-2"
+})(["", ""], buttonContainerCss);
+
+var TabBar = function TabBar() {
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext.theme,
+      releaseBranch = _useContext.releaseBranch,
+      isLinkExternal = _useContext.isLinkExternal,
+      pathname = _useContext.pathname;
+
+  var _useContext2 = (0, _react.useContext)(_headerContext.HamburgerContext),
+      closeHamburgerMenu = _useContext2.closeHamburgerMenu,
+      toggleHamburger = _useContext2.toggleHamburger,
+      isHamburgerMenuOpen = _useContext2.isHamburgerMenuOpen;
+
+  var iconTheme = theme === _theme2["default"].photography ? theme : _theme2["default"].normal;
+
+  var _getTabBarLinks = (0, _links.getTabBarLinks)(isLinkExternal, releaseBranch),
+      home = _getTabBarLinks.home,
+      latest = _getTabBarLinks.latest,
+      bookmark = _getTabBarLinks.bookmark;
+
+  var HomeIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
+    icon: "home",
+    weight: 400,
+    grade: 0,
+    size: 24
+  });
+
+  var ClockIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
+    icon: "schedule",
+    weight: 400,
+    grade: 0,
+    size: 24
+  });
+
+  var BookmarkIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
+    icon: "bookmark",
+    weight: 400,
+    grade: 0,
+    size: 24
+  });
+
+  var HamburgerIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
+    icon: "menu",
+    weight: 400,
+    grade: 0,
+    size: 24
+  });
+
+  var _selectTabBarTheme = (0, _theme.selectTabBarTheme)(theme),
+      bgColor = _selectTabBarTheme.bgColor,
+      borderColor = _selectTabBarTheme.borderColor;
+
+  var isHomeActive = !isHamburgerMenuOpen && pathname === '/';
+  var isLatestActive = !isHamburgerMenuOpen && (0, _links.checkPathnameParent)(pathname, 'latest');
+  var isBookmarkActive = !isHamburgerMenuOpen && pathname === '/bookmarks';
+  var hamburgerIconText = isHamburgerMenuOpen ? '關閉選單' : '選單';
+  return /*#__PURE__*/_react["default"].createElement(TabBarContainer, {
+    bgColor: bgColor,
+    borderColor: borderColor
+  }, /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, home, {
+    onClick: closeHamburgerMenu
+  }), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u9996\u9801",
+    iconComponent: HomeIcon,
+    theme: iconTheme,
+    active: isHomeActive
+  })), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, latest, {
+    onClick: closeHamburgerMenu
+  }), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u6700\u65B0",
+    iconComponent: ClockIcon,
+    theme: iconTheme,
+    active: isLatestActive
+  })), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, bookmark, {
+    onClick: closeHamburgerMenu
+  }), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u6211\u7684\u66F8\u7C64",
+    iconComponent: BookmarkIcon,
+    theme: iconTheme,
+    active: isBookmarkActive
+  })), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    onClick: toggleHamburger
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: hamburgerIconText,
+    iconComponent: HamburgerIcon,
+    theme: iconTheme,
+    active: isHamburgerMenuOpen
+  })));
+};
+
+var _default = TabBar;
+exports["default"] = _default;

package/lib/components/tab-bar.js

@@ -68,7 +68,8 @@ var TabBar = function TabBar() {
   var _getTabBarLinks = (0, _links.getTabBarLinks)(isLinkExternal, releaseBranch),
       home = _getTabBarLinks.home,
       latest = _getTabBarLinks.latest,
-      bookmark = _getTabBarLinks.bookmark;
+      topic = _getTabBarLinks.topic,
+      myreading = _getTabBarLinks.myreading;
 
   var HomeIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
     icon: "home",
@@ -84,8 +85,15 @@ var TabBar = function TabBar() {
     size: 24
   });
 
-  var BookmarkIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
-    icon: "bookmark",
+  var TopicIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
+    icon: "import_contacts",
+    weight: 400,
+    grade: 0,
+    size: 24
+  });
+
+  var MyReadingIcon = /*#__PURE__*/_react["default"].createElement(_materialIcon["default"], {
+    icon: "kid_star",
     weight: 400,
     grade: 0,
     size: 24
@@ -104,7 +112,8 @@ var TabBar = function TabBar() {
 
   var isHomeActive = !isHamburgerMenuOpen && pathname === '/';
   var isLatestActive = !isHamburgerMenuOpen && (0, _links.checkPathnameParent)(pathname, 'latest');
-  var isBookmarkActive = !isHamburgerMenuOpen && pathname === '/bookmarks';
+  var isTopicActive = !isHamburgerMenuOpen && pathname === '/topics';
+  var isMyReadingActive = !isHamburgerMenuOpen && pathname === '/myreading';
   var hamburgerIconText = isHamburgerMenuOpen ? '關閉選單' : '選單';
   return /*#__PURE__*/_react["default"].createElement(TabBarContainer, {
     bgColor: bgColor,
@@ -123,13 +132,20 @@ var TabBar = function TabBar() {
     iconComponent: ClockIcon,
     theme: iconTheme,
     active: isLatestActive
-  })), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, bookmark, {
+  })), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, topic, {
+    onClick: closeHamburgerMenu
+  }), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u6DF1\u5EA6\u5C08\u984C",
+    iconComponent: TopicIcon,
+    theme: iconTheme,
+    active: isTopicActive
+  })), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, myreading, {
     onClick: closeHamburgerMenu
   }), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
-    text: "\u6211\u7684\u66F8\u7C64",
-    iconComponent: BookmarkIcon,
+    text: "\u6211\u7684\u95B1\u8B80",
+    iconComponent: MyReadingIcon,
     theme: iconTheme,
-    active: isBookmarkActive
+    active: isMyReadingActive
   })), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     onClick: toggleHamburger
   }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {

package/lib/constants/footer-old.js

@@ -10,15 +10,16 @@ var _FOOTER_PATH, _FOOTER_LABEL;
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var footerKey = {
+  foundation: 'foundation',
   aboutUs: 'about-us',
   influenceReport: 'influence-report',
   openLab: 'open-lab'
 };
-var FOOTER_KEY = footerKey;
+var FOOTER_KEY = Object.freeze(footerKey);
 exports.FOOTER_KEY = FOOTER_KEY;
-var FOOTER_PATH = (_FOOTER_PATH = {}, _defineProperty(_FOOTER_PATH, footerKey.aboutUs, '/about-us'), _defineProperty(_FOOTER_PATH, footerKey.influenceReport, '/a/impact-and-annual-report'), _FOOTER_PATH);
+var FOOTER_PATH = (_FOOTER_PATH = {}, _defineProperty(_FOOTER_PATH, footerKey.foundation, '/categories/foundation'), _defineProperty(_FOOTER_PATH, footerKey.aboutUs, '/about-us'), _defineProperty(_FOOTER_PATH, footerKey.influenceReport, '/a/impact-and-annual-report'), _FOOTER_PATH);
 exports.FOOTER_PATH = FOOTER_PATH;
-var FOOTER_LABEL = (_FOOTER_LABEL = {}, _defineProperty(_FOOTER_LABEL, footerKey.aboutUs, '關於我們'), _defineProperty(_FOOTER_LABEL, footerKey.influenceReport, '影響力報告'), _defineProperty(_FOOTER_LABEL, footerKey.openLab, '報導者開放實驗室'), _FOOTER_LABEL);
+var FOOTER_LABEL = (_FOOTER_LABEL = {}, _defineProperty(_FOOTER_LABEL, footerKey.foundation, '基金會消息'), _defineProperty(_FOOTER_LABEL, footerKey.aboutUs, '關於我們'), _defineProperty(_FOOTER_LABEL, footerKey.influenceReport, '影響力報告'), _defineProperty(_FOOTER_LABEL, footerKey.openLab, '報導者開放實驗室'), _FOOTER_LABEL);
 exports.FOOTER_LABEL = FOOTER_LABEL;
-var FOOTER_ORDER = [footerKey.aboutUs, footerKey.influenceReport, footerKey.openLab];
+var FOOTER_ORDER = [footerKey.foundation, footerKey.aboutUs, footerKey.influenceReport, footerKey.openLab];
 exports.FOOTER_ORDER = FOOTER_ORDER;

package/lib/constants/footer.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FOOTER_PATH = exports.FOOTER_ORDER = exports.FOOTER_LABEL = exports.FOOTER_KEY = void 0;
+exports.MEMBER_ORDER = exports.FOOTER_PATH = exports.FOOTER_ORDER = exports.FOOTER_LABEL = exports.FOOTER_KEY = exports.FOOTER_ICON = void 0;
 
-var _FOOTER_PATH, _FOOTER_LABEL;
+var _FOOTER_PATH, _FOOTER_LABEL, _FOOTER_ICON;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -13,13 +13,21 @@ var footerKey = {
   foundation: 'foundation',
   aboutUs: 'about-us',
   influenceReport: 'influence-report',
-  openLab: 'open-lab'
+  openLab: 'open-lab',
+  member: 'member',
+  myReading: 'myreading',
+  bookmark: 'bookmark',
+  history: 'history'
 };
 var FOOTER_KEY = Object.freeze(footerKey);
 exports.FOOTER_KEY = FOOTER_KEY;
-var FOOTER_PATH = (_FOOTER_PATH = {}, _defineProperty(_FOOTER_PATH, footerKey.foundation, '/categories/foundation'), _defineProperty(_FOOTER_PATH, footerKey.aboutUs, '/about-us'), _defineProperty(_FOOTER_PATH, footerKey.influenceReport, '/a/impact-and-annual-report'), _FOOTER_PATH);
+var FOOTER_PATH = (_FOOTER_PATH = {}, _defineProperty(_FOOTER_PATH, footerKey.foundation, '/categories/foundation'), _defineProperty(_FOOTER_PATH, footerKey.aboutUs, '/about-us'), _defineProperty(_FOOTER_PATH, footerKey.influenceReport, '/a/impact-and-annual-report'), _defineProperty(_FOOTER_PATH, footerKey.member, '/account'), _defineProperty(_FOOTER_PATH, footerKey.myReading, '/myreading'), _defineProperty(_FOOTER_PATH, footerKey.bookmark, '/myreading/saved'), _defineProperty(_FOOTER_PATH, footerKey.history, '/myreading/history'), _FOOTER_PATH);
 exports.FOOTER_PATH = FOOTER_PATH;
-var FOOTER_LABEL = (_FOOTER_LABEL = {}, _defineProperty(_FOOTER_LABEL, footerKey.foundation, '基金會消息'), _defineProperty(_FOOTER_LABEL, footerKey.aboutUs, '關於我們'), _defineProperty(_FOOTER_LABEL, footerKey.influenceReport, '影響力報告'), _defineProperty(_FOOTER_LABEL, footerKey.openLab, '報導者開放實驗室'), _FOOTER_LABEL);
+var FOOTER_LABEL = (_FOOTER_LABEL = {}, _defineProperty(_FOOTER_LABEL, footerKey.foundation, '基金會消息'), _defineProperty(_FOOTER_LABEL, footerKey.aboutUs, '關於我們'), _defineProperty(_FOOTER_LABEL, footerKey.influenceReport, '影響力報告'), _defineProperty(_FOOTER_LABEL, footerKey.openLab, '報導者開放實驗室'), _defineProperty(_FOOTER_LABEL, footerKey.member, '個人專區'), _defineProperty(_FOOTER_LABEL, footerKey.myReading, '我的閱讀'), _defineProperty(_FOOTER_LABEL, footerKey.bookmark, '已收藏'), _defineProperty(_FOOTER_LABEL, footerKey.history, '造訪紀錄'), _FOOTER_LABEL);
 exports.FOOTER_LABEL = FOOTER_LABEL;
+var FOOTER_ICON = (_FOOTER_ICON = {}, _defineProperty(_FOOTER_ICON, footerKey.member, 'member'), _defineProperty(_FOOTER_ICON, footerKey.myReading, 'kid_star'), _defineProperty(_FOOTER_ICON, footerKey.bookmark, 'bookmark_basic'), _defineProperty(_FOOTER_ICON, footerKey.history, 'history'), _FOOTER_ICON);
+exports.FOOTER_ICON = FOOTER_ICON;
 var FOOTER_ORDER = [footerKey.foundation, footerKey.aboutUs, footerKey.influenceReport, footerKey.openLab];
-exports.FOOTER_ORDER = FOOTER_ORDER;
+exports.FOOTER_ORDER = FOOTER_ORDER;
+var MEMBER_ORDER = [footerKey.member, footerKey.myReading, footerKey.bookmark, footerKey.history];
+exports.MEMBER_ORDER = MEMBER_ORDER;

package/lib/containers/header.js

@@ -17,6 +17,10 @@ var _propTypes = require("../constants/prop-types");
 
 var _header = _interopRequireDefault(require("../components/header"));
 
+var _headerOld = _interopRequireDefault(require("../components/header-old"));
+
+var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -47,6 +51,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var Header = _featureFlag.MY_READING ? _header["default"] : _headerOld["default"];
 var _ = {
   get: _get["default"]
 };
@@ -203,7 +208,7 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
       };
       return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
         value: contextValue
-      }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(Header, {
         hamburgerContext: hamburgerContext
       }));
     }

package/lib/utils/links-old.js

@@ -176,7 +176,7 @@ function getFooterLinks() {
 
   var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
   var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
-  return _ref2 = {}, _defineProperty(_ref2, _footerOld.FOOTER_KEY.foundation, __getLink(true, releaseBranch, mainBaseURL, _footerOld.FOOTER_PATH[_footerOld.FOOTER_KEY.foundation])), _defineProperty(_ref2, _footerOld.FOOTER_KEY.aboutUs, __getLink(true, releaseBranch, mainBaseURL, _footerOld.FOOTER_PATH[_footerOld.FOOTER_KEY.aboutUs], '_blank')), _defineProperty(_ref2, _footerOld.FOOTER_KEY.influenceReport, __getLink(isExternal, releaseBranch, mainBaseURL, _footerOld.FOOTER_PATH[_footerOld.FOOTER_KEY.influenceReport])), _defineProperty(_ref2, _footerOld.FOOTER_KEY.openLab, __composeExternalLink(__getExternalLinks().openLab, '_blank')), _ref2;
+  return _ref2 = {}, _defineProperty(_ref2, _footerOld.FOOTER_KEY.foundation, __getLink(isExternal, releaseBranch, mainBaseURL, _footerOld.FOOTER_PATH[_footerOld.FOOTER_KEY.foundation])), _defineProperty(_ref2, _footerOld.FOOTER_KEY.aboutUs, __getLink(true, releaseBranch, mainBaseURL, _footerOld.FOOTER_PATH[_footerOld.FOOTER_KEY.aboutUs], '_blank')), _defineProperty(_ref2, _footerOld.FOOTER_KEY.influenceReport, __getLink(isExternal, releaseBranch, mainBaseURL, _footerOld.FOOTER_PATH[_footerOld.FOOTER_KEY.influenceReport])), _defineProperty(_ref2, _footerOld.FOOTER_KEY.openLab, __composeExternalLink(__getExternalLinks().openLab, '_blank')), _ref2;
 }
 
 function getSocialMediaLinks() {

package/lib/utils/links.js

@@ -12,6 +12,8 @@ exports.getLink = getLink;
 exports.getLoginLink = getLoginLink;
 exports.getLogoLink = getLogoLink;
 exports.getMemberLink = getMemberLink;
+exports.getMemberLinks = getMemberLinks;
+exports.getMyReadingLink = getMyReadingLink;
 exports.getSearchLink = getSearchLink;
 exports.getSocialMediaLinks = getSocialMediaLinks;
 exports.getTabBarLinks = getTabBarLinks;
@@ -148,7 +150,13 @@ function getMemberLink() {
 function getBookmarksLink() {
   var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
   var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
-  return __getLink(isExternal, releaseBranch, mainBaseURL, '/bookmarks');
+  return __getLink(isExternal, releaseBranch, mainBaseURL, '/myreading/saved');
+}
+
+function getMyReadingLink() {
+  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
+  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
+  return __getLink(isExternal, releaseBranch, mainBaseURL, '/myreading');
 }
 
 function getSearchLink() {
@@ -179,6 +187,15 @@ function getFooterLinks() {
   return _ref2 = {}, _defineProperty(_ref2, _footer.FOOTER_KEY.foundation, __getLink(isExternal, releaseBranch, mainBaseURL, _footer.FOOTER_PATH[_footer.FOOTER_KEY.foundation])), _defineProperty(_ref2, _footer.FOOTER_KEY.aboutUs, __getLink(true, releaseBranch, mainBaseURL, _footer.FOOTER_PATH[_footer.FOOTER_KEY.aboutUs], '_blank')), _defineProperty(_ref2, _footer.FOOTER_KEY.influenceReport, __getLink(isExternal, releaseBranch, mainBaseURL, _footer.FOOTER_PATH[_footer.FOOTER_KEY.influenceReport])), _defineProperty(_ref2, _footer.FOOTER_KEY.openLab, __composeExternalLink(__getExternalLinks().openLab, '_blank')), _ref2;
 }
 
+function getMemberLinks() {
+  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
+  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
+  return _.reduce(_footer.MEMBER_ORDER, function (res, memberKey) {
+    res[memberKey] = __getLink(isExternal, releaseBranch, mainBaseURL, _footer.FOOTER_PATH[memberKey]);
+    return res;
+  }, {});
+}
+
 function getSocialMediaLinks() {
   var externalLinks = __getExternalLinks();
 
@@ -214,6 +231,7 @@ function getTabBarLinks() {
   return {
     home: __getLink(isExternal, releaseBranch, mainBaseURL, ''),
     latest: __getLink(isExternal, releaseBranch, mainBaseURL, '/latest'),
-    bookmark: __getLink(isExternal, releaseBranch, mainBaseURL, '/bookmarks')
+    topic: __getLink(isExternal, releaseBranch, mainBaseURL, '/topics'),
+    myreading: __getLink(isExternal, releaseBranch, mainBaseURL, '/myreading')
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.10.1-rc.1",
+  "version": "2.11.0-rc.0",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -20,8 +20,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@twreporter/core": "^1.17.0",
-    "@twreporter/react-components": "^8.24.1-rc.1",
+    "@twreporter/core": "^1.17.1-rc.0",
+    "@twreporter/react-components": "^8.25.0-rc.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -51,5 +51,5 @@
     "babel-loader": "^8.2.5",
     "react-dom": "16.8.6"
   },
-  "gitHead": "96ee1e6fcb830faf4727a1222735ce881453ea38"
+  "gitHead": "42b025c9e74ea6697305ccabfa5dada913efc099"
 }