pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/widgets/defaultNavigation.js

@@ -1,239 +1,361 @@
-import { useTheme, useI18n, ThemeIcon, utils, Tooltip, useFileRights, useLegalInfo, useCredits, Widget, useEntryMetadata, useEntryTranslations, useShareUrl, useMediaMuted, useOnUnmuteMedia, useDarkWidgets, useMainChapters, useCurrentChapter, usePhonePlatform, useShareProviders, useScrollPosition, paletteColor, WidgetSelectionRect, SelectableWidget, frontend } from 'pageflow-scrolled/frontend';
-import React, { useRef, useEffect, useCallback, useState } from 'react';
+import { useTheme, useI18n, ThemeIcon, Tooltip, utils, useFileRights, useLegalInfo, usePrivacyLink, useCredits, Widget, useEntryMetadata, useEntryTranslations, useShareUrl, useMediaMuted, useOnUnmuteMedia, useDarkWidgets, usePhonePlatform, useScrollPosition, useMainChapters, useCurrentChapter, useShareProviders, paletteColor, WidgetSelectionRect, SelectableWidget, frontend } from 'pageflow-scrolled/frontend';
+import React, { useRef, useEffect, useCallback, createContext, useState, useMemo, useContext } from 'react';
 import classNames from 'classnames';
 import { media } from 'pageflow/frontend';
 import Measure from 'react-measure';
 
-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;
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
+var styles = {"breakpoint-below-md":"(max-width: 767px)","navigationBar":"DefaultNavigation-module_navigationBar__2RK0h scope-defaultNavigation","contextIcons":"DefaultNavigation-module_contextIcons__2e65s","navigationBarExpanded":"DefaultNavigation-module_navigationBarExpanded__C3sLq","navigationBarContentWrapper":"DefaultNavigation-module_navigationBarContentWrapper__3narH","translucentSurface":"DefaultNavigation-module_translucentSurface__3HK6B widgets-module_translucentWidgetSurface__kYVg7","opaqueSurface":"DefaultNavigation-module_opaqueSurface__24o-m","button":"DefaultNavigation-module_button__3QCuK utils-module_unstyledButton__3rgne","menuIcon":"DefaultNavigation-module_menuIcon__2bb8s DefaultNavigation-module_button__3QCuK utils-module_unstyledButton__3rgne","contextIcon":"DefaultNavigation-module_contextIcon__ELsqa DefaultNavigation-module_button__3QCuK utils-module_unstyledButton__3rgne","logo":"DefaultNavigation-module_logo__3gUbx","hasDesktopMenu":"DefaultNavigation-module_hasDesktopMenu__195sb","chapterList":"DefaultNavigation-module_chapterList__3VoXX scope-defaultNavigationChapterList","chapterListItem":"DefaultNavigation-module_chapterListItem__1YF5e","navigationTooltip":"DefaultNavigation-module_navigationTooltip__26Fvn","progressBar":"DefaultNavigation-module_progressBar__1jvov","progressIndicator":"DefaultNavigation-module_progressIndicator__2d_e3","hasChapters":"DefaultNavigation-module_hasChapters__3ab-r","centerMobileLogo":"DefaultNavigation-module_centerMobileLogo__3jtk3","navigationChapters":"DefaultNavigation-module_navigationChapters__3M6zh","hiddenOnMobile":"DefaultNavigation-module_hiddenOnMobile__2c5WI"};
 
-      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 _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 _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(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-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 _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-var styles = {"breakpoint-below-md":"(max-width: 767px)","navigationBar":"DefaultNavigation-module_navigationBar__2RK0h scope-defaultNavigation","contextIcons":"DefaultNavigation-module_contextIcons__2e65s","navigationBarExpanded":"DefaultNavigation-module_navigationBarExpanded__C3sLq","navigationBarContentWrapper":"DefaultNavigation-module_navigationBarContentWrapper__3narH widgets-module_translucentWidgetSurface__kYVg7","button":"DefaultNavigation-module_button__3QCuK utils-module_unstyledButton__3rgne","menuIcon":"DefaultNavigation-module_menuIcon__2bb8s DefaultNavigation-module_button__3QCuK utils-module_unstyledButton__3rgne","contextIcon":"DefaultNavigation-module_contextIcon__ELsqa DefaultNavigation-module_button__3QCuK utils-module_unstyledButton__3rgne","logo":"DefaultNavigation-module_logo__3gUbx","chapterList":"DefaultNavigation-module_chapterList__3VoXX scope-defaultNavigationChapterList","chapterListItem":"DefaultNavigation-module_chapterListItem__1YF5e","navigationTooltip":"DefaultNavigation-module_navigationTooltip__26Fvn","progressBar":"DefaultNavigation-module_progressBar__1jvov","progressIndicator":"DefaultNavigation-module_progressIndicator__2d_e3","hasChapters":"DefaultNavigation-module_hasChapters__3ab-r","centerMobileLogo":"DefaultNavigation-module_centerMobileLogo__3jtk3","navigationChapters":"DefaultNavigation-module_navigationChapters__3M6zh","navigationChaptersHidden":"DefaultNavigation-module_navigationChaptersHidden__2TrUo"};
-
-var styles$1 = {"breakpoint-md":"(min-width: 768px)","burgerMenuIconContainer":"HamburgerIcon-module_burgerMenuIconContainer__3aBkk","small":"HamburgerIcon-module_small__asAkY"};
+var styles$1 = {"breakpoint-md":"(min-width: 768px)","burgerMenuIconContainer":"HamburgerIcon-module_burgerMenuIconContainer__3aBkk","visibleOnDesktop":"HamburgerIcon-module_visibleOnDesktop__2HgR0","small":"HamburgerIcon-module_small__asAkY"};
 
 var hamburgerIconStyles = {"hamburger":"HamburgerIcons-module_hamburger__SOreS","is-active":"HamburgerIcons-module_is-active__2jpzX","hamburger-inner":"HamburgerIcons-module_hamburger-inner__Wv7Dn","hamburger-box":"HamburgerIcons-module_hamburger-box__10MR1","hamburger--collapse":"HamburgerIcons-module_hamburger--collapse__1xOkf"};
 
-function HamburgerIcon(_ref) {
-  var mobileNavHidden = _ref.mobileNavHidden,
-    onClick = _ref.onClick;
-  var theme = useTheme();
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/HamburgerIcon.js";
+function HamburgerIcon({
+  menuOpen,
+  onClick,
+  visibleOnDesktop
+}) {
+  const theme = useTheme();
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.burgerMenuIconContainer
+    className: classNames(styles$1.burgerMenuIconContainer, {
+      [styles$1.visibleOnDesktop]: visibleOnDesktop
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("button", {
     className: styles.menuIcon,
-    title: mobileNavHidden ? t('pageflow_scrolled.public.navigation.open_mobile_menu') : t('pageflow_scrolled.public.navigation.close_mobile_menu'),
+    title: menuOpen ? t('pageflow_scrolled.public.navigation.close_mobile_menu') : t('pageflow_scrolled.public.navigation.open_mobile_menu'),
     type: "button",
-    onClick: onClick
+    onClick: onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(ThemeIcon, {
     name: "menu",
-    renderFallback: function renderFallback() {
-      return /*#__PURE__*/React.createElement("span", {
-        className: classNames(hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], _defineProperty({}, styles$1.small, theme.options.defaultNavigationMenuIconVariant === 'small'), _defineProperty({}, hamburgerIconStyles['is-active'], !mobileNavHidden))
-      }, /*#__PURE__*/React.createElement("span", {
-        className: hamburgerIconStyles['hamburger-box']
-      }, /*#__PURE__*/React.createElement("span", {
-        className: hamburgerIconStyles['hamburger-inner']
-      })));
+    renderFallback: () => /*#__PURE__*/React.createElement("span", {
+      className: classNames(hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], {
+        [styles$1.small]: theme.options.defaultNavigationMenuIconVariant === 'small'
+      }, {
+        [hamburgerIconStyles['is-active']]: menuOpen
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 24,
+        columnNumber: 22
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: hamburgerIconStyles['hamburger-box'],
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 29,
+        columnNumber: 24
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: hamburgerIconStyles['hamburger-inner'],
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 30,
+        columnNumber: 26
+      }
+    }))),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 22,
+      columnNumber: 9
     }
   })));
 }
 
 var styles$2 = {"breakpoint-md":"(min-width: 768px)","chapterLink":"ChapterLink-module_chapterLink__3YspQ typography-defaultNavigationChapterLink","chapterLinkActive":"ChapterLink-module_chapterLinkActive__9i8SL typography-defaultNavigationActiveChapterLink","summary":"ChapterLink-module_summary__2ZfRU typography-defaultNavigationChapterSummary","inlineSummary":"ChapterLink-module_inlineSummary__2Mhk-","tooltipBubble":"ChapterLink-module_tooltipBubble__3VRUO"};
 
-var isBlank = utils.isBlank,
-  presence = utils.presence;
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/ChapterLink.js";
+const {
+  isBlank,
+  presence
+} = utils;
 function ChapterLink(props) {
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
-  var item = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-    className: classNames(styles$2.chapterLink, _defineProperty({}, styles$2.chapterLinkActive, props.active)),
-    href: "#".concat(props.chapterSlug),
-    onClick: function onClick() {
-      return props.handleMenuClick(props.chapterLinkId);
-    }
-  }, presence(props.title) || t('pageflow_scrolled.public.navigation.chapter', {
+  const {
+    t
+  } = useI18n();
+  const renderLink = (triggerProps = {}) => /*#__PURE__*/React.createElement("div", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 17,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("a", Object.assign({}, triggerProps, {
+    className: classNames(styles$2.chapterLink, {
+      [styles$2.chapterLinkActive]: props.active
+    }),
+    href: `#${props.chapterSlug}`,
+    onClick: () => props.handleMenuClick(props.chapterLinkId),
+    "aria-current": props.active ? 'location' : undefined,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }), presence(props.title) || t('pageflow_scrolled.public.navigation.chapter', {
     number: props.chapterIndex
   })), !isBlank(props.summary) && /*#__PURE__*/React.createElement("p", {
     className: classNames(styles$2.summary, styles$2.inlineSummary),
     dangerouslySetInnerHTML: {
       __html: props.summary
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 25,
+      columnNumber: 35
     }
   }));
   if (isBlank(props.summary)) {
-    return item;
+    return renderLink();
   }
-  var content = /*#__PURE__*/React.createElement("p", {
+  const content = /*#__PURE__*/React.createElement("p", {
     className: styles$2.summary,
     dangerouslySetInnerHTML: {
       __html: props.summary
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 35,
+      columnNumber: 5
     }
   });
   return /*#__PURE__*/React.createElement(Tooltip, {
+    name: `chapter-${props.chapterLinkId}`,
     content: content,
     openOnHover: true,
     highlight: true,
-    bubbleClassName: styles$2.tooltipBubble
-  }, item);
+    bubbleClassName: styles$2.tooltipBubble,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 39,
+      columnNumber: 5
+    }
+  }, renderLink);
 }
 
 var styles$3 = {"legalInfoTooltip":"LegalInfoMenu-module_legalInfoTooltip__Qmf8u","scroller":"LegalInfoMenu-module_scroller__3NPW_","links":"LegalInfoMenu-module_links__1kpsd","separator":"LegalInfoMenu-module_separator__3mmjA","section":"LegalInfoMenu-module_section__1bLWD","legalInfoLink":"LegalInfoMenu-module_legalInfoLink__gkXaF","rights":"LegalInfoMenu-module_rights__-XGYO"};
 
-function LegalInfoLink(props) {
-  // eslint-disable-next-line no-script-url
-  if (props.url === 'javascript:pageflowDisplayPrivacySettings()' && props.label) {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-      href: "#privacySettings",
-      onClick: function onClick(event) {
-        window.pageflowDisplayPrivacySettings();
-        event.preventDefault();
-      },
-      className: styles$3.legalInfoLink,
-      dangerouslySetInnerHTML: {
-        __html: props.label
-      }
-    }));
-  }
-  return /*#__PURE__*/React.createElement("div", null, props.label && props.url && /*#__PURE__*/React.createElement("a", {
-    target: "_blank",
-    rel: "noreferrer noopener",
-    href: props.url,
+var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/LegalInfoLink.js";
+const defaultProps = {
+  target: '_blank',
+  rel: 'noreferrer noopener'
+};
+function LegalInfoLink({
+  label,
+  url,
+  props
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 9,
+      columnNumber: 5
+    }
+  }, label && url && /*#__PURE__*/React.createElement("a", Object.assign({
+    href: url
+  }, props || defaultProps, {
     className: styles$3.legalInfoLink,
     dangerouslySetInnerHTML: {
-      __html: props.label
+      __html: label
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 11,
+      columnNumber: 8
     }
-  }));
+  })));
 }
 
+var _jsxFileName$3 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/LegalInfoMenu.js";
 function LegalInfoMenu(props) {
-  var fileRights = useFileRights();
-  var legalInfo = useLegalInfo();
-  var credits = useCredits();
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
-  var content = /*#__PURE__*/React.createElement("div", {
-    className: styles$3.legalInfoTooltip
+  const fileRights = useFileRights();
+  const legalInfo = useLegalInfo();
+  const privacyLink = usePrivacyLink();
+  const credits = useCredits();
+  const {
+    t
+  } = useI18n();
+  const content = /*#__PURE__*/React.createElement("div", {
+    className: styles$3.legalInfoTooltip,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 26,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.scroller
+    className: styles$3.scroller,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 27,
+      columnNumber: 7
+    }
   }, credits && /*#__PURE__*/React.createElement("p", {
     className: styles$3.section,
     dangerouslySetInnerHTML: {
       __html: credits
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 29,
+      columnNumber: 10
     }
   }), fileRights.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: styles$3.section
-  }, /*#__PURE__*/React.createElement("strong", null, t('pageflow_scrolled.public.media')), " ", renderFileRights(fileRights))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$3.links, _defineProperty({}, styles$3.separator, credits || fileRights.length > 0))
-  }, /*#__PURE__*/React.createElement(LegalInfoLink, legalInfo.imprint), /*#__PURE__*/React.createElement(LegalInfoLink, legalInfo.copyright), /*#__PURE__*/React.createElement(LegalInfoLink, legalInfo.privacy)), /*#__PURE__*/React.createElement(Widget, {
-    role: "creditsBoxFooter"
+    className: styles$3.section,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 34,
+      columnNumber: 10
+    }
+  }, /*#__PURE__*/React.createElement("strong", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 35,
+      columnNumber: 12
+    }
+  }, t('pageflow_scrolled.public.media')), " ", renderFileRights(fileRights))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$3.links, {
+      [styles$3.separator]: credits || fileRights.length > 0
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 40,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(LegalInfoLink, Object.assign({}, legalInfo.imprint, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 41,
+      columnNumber: 9
+    }
+  })), /*#__PURE__*/React.createElement(LegalInfoLink, Object.assign({}, legalInfo.copyright, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 42,
+      columnNumber: 9
+    }
+  })), /*#__PURE__*/React.createElement(LegalInfoLink, Object.assign({}, privacyLink, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 43,
+      columnNumber: 9
+    }
+  }))), /*#__PURE__*/React.createElement(Widget, {
+    role: "creditsBoxFooter",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 46,
+      columnNumber: 7
+    }
   }));
   return /*#__PURE__*/React.createElement(Tooltip, {
+    name: "legalInfo",
     horizontalOffset: props.tooltipOffset - 30,
     arrowPos: 120 - props.tooltipOffset,
-    content: content
-  }, /*#__PURE__*/React.createElement("button", {
+    content: content,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 51,
+      columnNumber: 5
+    }
+  }, triggerProps => /*#__PURE__*/React.createElement("button", Object.assign({}, triggerProps, {
     className: classNames(styles.contextIcon),
-    "aria-haspopup": "true",
-    title: t('pageflow_scrolled.public.navigation.legal_info')
-  }, /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: "information"
+    title: t('pageflow_scrolled.public.navigation.legal_info'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 56,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "information",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 59,
+      columnNumber: 11
+    }
   })));
 }
 function renderFileRights(items) {
   return /*#__PURE__*/React.createElement("ul", {
-    className: styles$3.rights
-  }, items.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: index
-    }, index > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0| "), renderFileRightsText(item));
-  }));
+    className: styles$3.rights,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 68,
+      columnNumber: 5
+    }
+  }, items.map((item, index) => /*#__PURE__*/React.createElement("li", {
+    key: index,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 70,
+      columnNumber: 9
+    }
+  }, index > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0| "), renderFileRightsText(item))));
 }
 function renderFileRightsText(item) {
   if (item.urls.length > 1) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, item.text, " (", item.urls.flatMap(function (url, index) {
-      return [index > 0 && ', ', /*#__PURE__*/React.createElement("a", {
-        href: url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        key: index
-      }, index + 1)];
-    }), ")");
+    return /*#__PURE__*/React.createElement(React.Fragment, null, item.text, " (", item.urls.flatMap((url, index) => [index > 0 && ', ', /*#__PURE__*/React.createElement("a", {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      key: index,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 84,
+        columnNumber: 13
+      }
+    }, index + 1)]), ")");
   } else if (item.urls.length === 1) {
     return /*#__PURE__*/React.createElement("a", {
       href: item.urls[0],
       target: "_blank",
-      rel: "noopener noreferrer"
+      rel: "noopener noreferrer",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 92,
+        columnNumber: 7
+      }
     }, item.text);
   } else {
     return item.text;
@@ -242,180 +364,382 @@ function renderFileRightsText(item) {
 
 var styles$4 = {"tooltip":"TranslationsMenu-module_tooltip__g1k9g","list":"TranslationsMenu-module_list__2zLEz","tag":"TranslationsMenu-module_tag__xRYH9"};
 
-function TranslationsMenu(_ref) {
-  var _ref$tooltipOffset = _ref.tooltipOffset,
-    tooltipOffset = _ref$tooltipOffset === void 0 ? 0 : _ref$tooltipOffset;
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
-  var entry = useEntryMetadata();
-  var translations = useEntryTranslations();
+var _jsxFileName$4 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/TranslationsMenu.js";
+function TranslationsMenu({
+  tooltipOffset = 0
+}) {
+  const {
+    t
+  } = useI18n();
+  const entry = useEntryMetadata();
+  const translations = useEntryTranslations();
   if (translations.length < 2) {
     return null;
   }
-  var content = /*#__PURE__*/React.createElement("div", {
-    className: styles$4.tooltip
+  const content = /*#__PURE__*/React.createElement("div", {
+    className: styles$4.tooltip,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 24,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$4.list
-  }, translations.map(function (_ref2) {
-    var id = _ref2.id,
-      url = _ref2.url,
-      displayLocale = _ref2.displayLocale;
+    className: styles$4.list,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, translations.map(({
+    id,
+    url,
+    displayLocale
+  }) => {
     if (entry.id === id) {
       return /*#__PURE__*/React.createElement("li", {
         key: id,
-        "aria-current": "page"
-      }, /*#__PURE__*/React.createElement("strong", null, displayLocale));
+        "aria-current": "page",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 29,
+          columnNumber: 15
+        }
+      }, /*#__PURE__*/React.createElement("strong", {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 30,
+          columnNumber: 17
+        }
+      }, displayLocale));
     } else {
       return /*#__PURE__*/React.createElement("li", {
-        key: id
+        key: id,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 36,
+          columnNumber: 15
+        }
       }, /*#__PURE__*/React.createElement("a", {
         target: "_top",
-        href: url
+        href: url,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 37,
+          columnNumber: 17
+        }
       }, displayLocale));
     }
   })));
   return /*#__PURE__*/React.createElement(Tooltip, {
+    name: "translations",
     horizontalOffset: tooltipOffset - 30,
     arrowPos: 120 - tooltipOffset,
-    content: content
-  }, /*#__PURE__*/React.createElement("button", {
+    content: content,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 47,
+      columnNumber: 5
+    }
+  }, triggerProps => /*#__PURE__*/React.createElement("button", Object.assign({}, triggerProps, {
     className: classNames(styles.contextIcon),
-    "aria-haspopup": "true",
-    title: t('pageflow_scrolled.public.navigation.language')
-  }, /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: "world"
+    title: t('pageflow_scrolled.public.navigation.language'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 52,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "world",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 55,
+      columnNumber: 11
+    }
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$4.tag
-  }, /*#__PURE__*/React.createElement("span", null, entry.locale.substring(0, 2).toUpperCase()))));
+    className: styles$4.tag,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 56,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 57,
+      columnNumber: 13
+    }
+  }, entry.locale.substring(0, 2).toUpperCase()))));
 }
 
 var styles$5 = {"sharingTooltip":"SharingMenu-module_sharingTooltip__2Tyev","shareLinkContainer":"SharingMenu-module_shareLinkContainer__3-3W6","shareLink":"SharingMenu-module_shareLink__3PdRE"};
 
-function SharingMenu(_ref) {
-  var shareProviders = _ref.shareProviders;
-  var shareUrl = useShareUrl();
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+var _jsxFileName$5 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/SharingMenu.js";
+function SharingMenu({
+  shareProviders
+}) {
+  const shareUrl = useShareUrl();
+  const {
+    t
+  } = useI18n();
   function renderShareLinks(shareProviders) {
-    return shareProviders.map(function (shareProvider) {
+    return shareProviders.map(shareProvider => {
       return /*#__PURE__*/React.createElement("div", {
         key: shareProvider.name,
-        className: styles$5.shareLinkContainer
+        className: styles$5.shareLinkContainer,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$5,
+          lineNumber: 20,
+          columnNumber: 9
+        }
       }, /*#__PURE__*/React.createElement("a", {
         className: classNames('share', styles$5.shareLink),
         href: shareProvider.url.replace('%<url>s', shareUrl),
         target: '_blank',
-        rel: "noopener noreferrer"
+        rel: "noopener noreferrer",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$5,
+          lineNumber: 22,
+          columnNumber: 11
+        }
       }, /*#__PURE__*/React.createElement(ThemeIcon, {
-        name: shareProvider.iconName
+        name: shareProvider.iconName,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$5,
+          lineNumber: 26,
+          columnNumber: 13
+        }
       }), shareProvider.name));
     });
   }
   return /*#__PURE__*/React.createElement(Tooltip, {
+    name: "sharing",
     horizontalOffset: -70,
     arrowPos: 160,
-    content: renderShareLinks(shareProviders)
-  }, /*#__PURE__*/React.createElement("button", {
+    content: renderShareLinks(shareProviders),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 35,
+      columnNumber: 5
+    }
+  }, triggerProps => /*#__PURE__*/React.createElement("button", Object.assign({}, triggerProps, {
     className: classNames(styles.contextIcon),
-    title: t('pageflow_scrolled.public.navigation.share')
-  }, /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: "share"
+    title: t('pageflow_scrolled.public.navigation.share'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 40,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "share",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 43,
+      columnNumber: 11
+    }
   })));
 }
 
 var styles$6 = {"button":"ToggleMuteButton-module_button__1ACmo","animate":"ToggleMuteButton-module_animate__pd1yK","pulse":"ToggleMuteButton-module_pulse__2UN7Q"};
 
+var _jsxFileName$6 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/ToggleMuteButton.js";
 function ToggleMuteButton() {
-  var muted = useMediaMuted();
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+  const muted = useMediaMuted();
+  const {
+    t
+  } = useI18n();
   useUnmuteSound();
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(_defineProperty({}, styles$6.animate, !muted))
+    className: classNames({
+      [styles$6.animate]: !muted
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 23,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("button", {
     className: classNames(styles.contextIcon, styles$6.button),
     title: muted ? t('pageflow_scrolled.public.navigation.unmute') : t('pageflow_scrolled.public.navigation.mute'),
-    onClick: function onClick() {
-      return media.mute(!muted);
+    onClick: () => media.mute(!muted),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 24,
+      columnNumber: 7
     }
   }, muted ? /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: "muted"
+    name: "muted",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 29,
+      columnNumber: 18
+    }
   }) : /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: "unmuted"
+    name: "unmuted",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 29,
+      columnNumber: 47
+    }
   })));
 }
 function useUnmuteSound() {
-  var theme = useTheme();
-  var audio = useRef();
-  useEffect(function () {
+  const theme = useTheme();
+  const audio = useRef();
+  useEffect(() => {
     audio.current = new Audio(theme.assets.unmute);
   }, [theme.assets.unmute]);
-  useOnUnmuteMedia(useCallback(function () {
-    return audio.current.play();
-  }, []));
+  useOnUnmuteMedia(useCallback(() => audio.current.play(), []));
 }
 
-function Logo(_ref) {
-  var srcMobile = _ref.srcMobile,
-    srcDesktop = _ref.srcDesktop,
-    url = _ref.url,
-    altText = _ref.altText;
-  var theme = useTheme();
-  var darkWidgets = useDarkWidgets();
+var _jsxFileName$7 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js";
+function Logo({
+  srcMobile,
+  srcDesktop,
+  url,
+  altText
+}) {
+  const theme = useTheme();
+  const darkWidgets = useDarkWidgets();
   srcDesktop = srcDesktop || (darkWidgets ? theme.assets.logoDarkVariantDesktop : theme.assets.logoDesktop);
   srcMobile = srcMobile || (darkWidgets ? theme.assets.logoDarkVariantMobile : theme.assets.logoMobile);
-  var inIframe = typeof window !== 'undefined' && window.parent !== window;
+  const inIframe = typeof window !== 'undefined' && window.parent !== window;
   return /*#__PURE__*/React.createElement("a", {
     target: inIframe || !theme.options.logoOpenInSameTab ? "_blank" : null,
     rel: "noopener noreferrer",
     href: url || theme.options.logoUrl,
-    className: classNames(styles.logo, _defineProperty({}, styles.centerMobileLogo, theme.options.defaultNavigationMobileLogoPosition === 'center'))
-  }, /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("source", {
+    className: classNames(styles.logo, {
+      [styles.centerMobileLogo]: theme.options.defaultNavigationMobileLogoPosition === 'center'
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("picture", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 31,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("source", {
     media: "(max-width: 780px)",
-    srcSet: srcMobile
+    srcSet: srcMobile,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 32,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement("source", {
     media: "(min-width: 781px)",
-    srcSet: srcDesktop
+    srcSet: srcDesktop,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 33,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement("img", {
     src: srcDesktop,
-    alt: altText || theme.options.logoAltText
+    alt: altText || theme.options.logoAltText,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 34,
+      columnNumber: 9
+    }
   })));
 }
 
 var styles$7 = {"link":"SkipLinks-module_link__HMj9l"};
 
+var _jsxFileName$8 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/SkipLinks.js";
 function SkipLinks() {
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+  const {
+    t
+  } = useI18n();
   function scrollDown() {
-    setTimeout(function () {
+    setTimeout(() => {
       window.scrollTo(0, 50);
     }, 50);
   }
   return /*#__PURE__*/React.createElement("div", {
-    id: "skipLinks"
+    id: "skipLinks",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 17,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("a", {
     href: "#goToContent",
     className: styles$7.link,
-    onClick: scrollDown
+    onClick: scrollDown,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 18,
+      columnNumber: 7
+    }
   }, t('pageflow_scrolled.public.navigation_skip_links.content')));
 }
 
 var styles$8 = {"button":"ScrollButton-module_button__1GKRF utils-module_unstyledButton__3rgne","visible":"ScrollButton-module_visible__29yco","start":"ScrollButton-module_start__1XPra ScrollButton-module_button__1GKRF utils-module_unstyledButton__3rgne","end":"ScrollButton-module_end__3PxQt ScrollButton-module_button__1GKRF utils-module_unstyledButton__3rgne"};
 
-function ScrollButton(_ref) {
-  var type = _ref.type,
-    contentRect = _ref.contentRect,
-    onStep = _ref.onStep;
-  var visible = type === 'start' ? contentRect.scroll.left > 0 : contentRect.scroll.width > contentRect.client.width && contentRect.scroll.left < contentRect.scroll.width - contentRect.client.width;
-  var step = type === 'start' ? -100 : 100;
-  var interval = useRef();
+var _jsxFileName$9 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/ScrollButton.js";
+function ScrollButton({
+  type,
+  contentRect,
+  onStep
+}) {
+  const visible = type === 'start' ? contentRect.scroll.left > 0 : contentRect.scroll.width > contentRect.client.width && contentRect.scroll.left < contentRect.scroll.width - contentRect.client.width;
+  const step = type === 'start' ? -100 : 100;
+  const interval = useRef();
   return /*#__PURE__*/React.createElement("button", {
-    className: classNames(_defineProperty(_defineProperty(_defineProperty({}, styles$8.start, type === 'start'), styles$8.end, type === 'end'), styles$8.visible, visible)),
+    className: classNames({
+      [styles$8.start]: type === 'start',
+      [styles$8.end]: type === 'end',
+      [styles$8.visible]: visible
+    }),
     onMouseDown: handleMouseDown,
-    onKeyPress: handleKeyPress
+    onKeyPress: handleKeyPress,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 16,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: type === 'start' ? 'arrowLeft' : 'arrowRight'
+    name: type === 'start' ? 'arrowLeft' : 'arrowRight',
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 21,
+      columnNumber: 7
+    }
   }));
   function handleMouseDown(event) {
     if (event.button === 0) {
@@ -425,9 +749,7 @@ function ScrollButton(_ref) {
   function scrollUntilMouseUp() {
     scrollStep();
     clearInterval(interval.current);
-    interval.current = setInterval(function () {
-      return scrollStep();
-    }, 400);
+    interval.current = setInterval(() => scrollStep(), 400);
     document.addEventListener('mouseup', stopScrolling);
     function stopScrolling() {
       document.removeEventListener('mouseup', stopScrolling);
@@ -446,44 +768,73 @@ function ScrollButton(_ref) {
 
 var styles$9 = {"breakpoint-md":"(min-width: 768px)","scroller":"Scroller-module_scroller__139cK","inner":"Scroller-module_inner__3dhuM"};
 
-function Scroller(_ref) {
-  var children = _ref.children;
-  var ref = useRef();
+var _jsxFileName$a = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/Scroller.js";
+function Scroller({
+  children
+}) {
+  const ref = useRef();
   return /*#__PURE__*/React.createElement(Measure, {
     scroll: true,
     client: true,
-    innerRef: ref
-  }, function (_ref2) {
-    var contentRect = _ref2.contentRect,
-      measureRef = _ref2.measureRef,
-      measure = _ref2.measure;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollButton, {
-      type: "start",
-      contentRect: contentRect,
-      onStep: scrollBy
-    }), /*#__PURE__*/React.createElement(ScrollButton, {
-      type: "end",
-      contentRect: contentRect,
-      onStep: scrollBy
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles$9.scroller,
-      ref: measureRef,
-      onFocus: scrollTargetIntoView,
-      onScroll: function onScroll() {
-        return measure();
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$9.inner
-    }, children)));
-  });
+    innerRef: ref,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 12,
+      columnNumber: 5
+    }
+  }, ({
+    contentRect,
+    measureRef,
+    measure
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollButton, {
+    type: "start",
+    contentRect: contentRect,
+    onStep: scrollBy,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 15,
+      columnNumber: 12
+    }
+  }), /*#__PURE__*/React.createElement(ScrollButton, {
+    type: "end",
+    contentRect: contentRect,
+    onStep: scrollBy,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 18,
+      columnNumber: 12
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$9.scroller,
+    ref: measureRef,
+    onFocus: scrollTargetIntoView,
+    onScroll: () => measure(),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 21,
+      columnNumber: 12
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.inner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 25,
+      columnNumber: 14
+    }
+  }, children))));
   function scrollBy(x) {
     // IE11 does not support scrollBy
     ref.current.scrollLeft = ref.current.scrollLeft + x;
   }
   function scrollTargetIntoView(event) {
-    var targetBounds = event.target.getBoundingClientRect();
-    var scrollerClipRight = ref.current.clientWidth * 0.75;
-    var scrollerClipLeft = ref.current.clientWidth * 0.25;
+    const targetBounds = event.target.getBoundingClientRect();
+    const scrollerClipRight = ref.current.clientWidth * 0.75;
+    const scrollerClipLeft = ref.current.clientWidth * 0.25;
     if (targetBounds.left < scrollerClipLeft) {
       scrollBy(targetBounds.left - scrollerClipLeft);
     } else if (targetBounds.right > scrollerClipRight) {
@@ -492,37 +843,49 @@ function Scroller(_ref) {
   }
 }
 
-function DefaultNavigation(_ref) {
-  var _chapters$, _chapters$2;
-  var configuration = _ref.configuration,
-    ExtraButtons = _ref.ExtraButtons,
-    MobileMenu = _ref.MobileMenu,
-    logo = _ref.logo;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    navExpanded = _useState2[0],
-    setNavExpanded = _useState2[1];
-  var _useState3 = useState(!configuration.defaultMobileNavVisible),
-    _useState4 = _slicedToArray(_useState3, 2),
-    mobileNavHidden = _useState4[0],
-    setMobileNavHidden = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    readingProgress = _useState6[0],
-    setReadingProgress = _useState6[1];
-  var chapters = useMainChapters().filter(function (chapter) {
-    return !chapter.hideInNavigation;
-  });
-  var currentChapter = useCurrentChapter();
-  var isPhonePlatform = usePhonePlatform();
-  var shareProviders = useShareProviders({
-    isPhonePlatform: isPhonePlatform
-  });
-  var theme = useTheme();
-  useScrollPosition(function (_ref2) {
-    var prevPos = _ref2.prevPos,
-      currPos = _ref2.currPos;
-    var expand = currPos.y > prevPos.y ||
+function useTimeoutFlag(duration) {
+  const flagRef = useRef(false);
+  const timeoutRef = useRef(null);
+  const activate = useCallback(() => {
+    flagRef.current = true;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      flagRef.current = false;
+    }, duration);
+  }, [duration]);
+  useEffect(() => {
+    return () => clearTimeout(timeoutRef.current);
+  }, []);
+  return [flagRef, activate];
+}
+
+var styles$a = {"widgetMarginMax":"presenceClassNames-module_widgetMarginMax__24HYl","expanded":"presenceClassNames-module_expanded__mPGsi","widgetMarginMin":"presenceClassNames-module_widgetMarginMin__2D3cx"};
+
+var _jsxFileName$b = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigationPresenceProvider.js";
+const DefaultNavigationContext = createContext({
+  navExpanded: true,
+  setNavExpanded: () => {}
+});
+function useDefaultNavigationState() {
+  return useContext(DefaultNavigationContext);
+}
+function DefaultNavigationPresenceProvider({
+  configuration,
+  children
+}) {
+  const [navExpanded, setNavExpanded] = useState(true);
+  const isPhonePlatform = usePhonePlatform();
+  const [scrollLockRef, activateScrollLock] = useTimeoutFlag(200);
+  const lockNavExpanded = useCallback(() => {
+    activateScrollLock();
+    setNavExpanded(true);
+  }, [activateScrollLock]);
+  useScrollPosition(({
+    prevPos,
+    currPos
+  }) => {
+    if (scrollLockRef.current) return;
+    const expand = currPos.y > prevPos.y ||
     // Mobile Safari reports positive scroll position
     // during scroll bounce animation when scrolling
     // back to the top. Make sure navigation bar
@@ -530,41 +893,110 @@ function DefaultNavigation(_ref) {
     currPos.y >= 0;
     if (expand !== navExpanded) setNavExpanded(expand);
   }, [navExpanded]);
-  useScrollPosition(function (_ref3) {
-    var prevPos = _ref3.prevPos,
-      currPos = _ref3.currPos;
-    var current = currPos.y * -1;
+  useOnUnmuteMedia(useCallback(() => setNavExpanded(true), []));
+  const alwaysExpanded = !isPhonePlatform && configuration.fixedOnDesktop;
+  const expanded = navExpanded || alwaysExpanded;
+  const className = classNames(styles$a.widgetMarginMax, {
+    [styles$a.widgetMarginMin]: configuration.firstBackdropBelowNavigation && configuration.fixedOnDesktop && !isPhonePlatform,
+    [styles$a.expanded]: expanded
+  });
+  const contextValue = useMemo(() => ({
+    navExpanded,
+    setNavExpanded,
+    lockNavExpanded
+  }), [navExpanded, lockNavExpanded]);
+  return /*#__PURE__*/React.createElement(DefaultNavigationContext.Provider, {
+    value: contextValue,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 68,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 69,
+      columnNumber: 7
+    }
+  }, children));
+}
+
+var _jsxFileName$c = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js";
+function DefaultNavigation({
+  configuration,
+  ExtraButtons,
+  Menu,
+  MobileMenu,
+  logo,
+  omitChapterNavigation
+}) {
+  var _chapters$, _chapters$2;
+  const {
+    navExpanded,
+    setNavExpanded,
+    lockNavExpanded
+  } = useDefaultNavigationState();
+  const [menuOpen, setMenuOpen] = useState(!!configuration.defaultMobileNavVisible);
+  const [readingProgress, setReadingProgress] = useState(0);
+  const chapters = useMainChapters().filter(chapter => !chapter.hideInNavigation);
+  const currentChapter = useCurrentChapter();
+  const isPhonePlatform = usePhonePlatform();
+  const shareProviders = useShareProviders({
+    isPhonePlatform
+  });
+  const theme = useTheme();
+  const CustomMenu = Menu || MobileMenu;
+  const hasMenu = !!CustomMenu;
+  const hasDesktopMenu = !!Menu;
+  useScrollPosition(({
+    prevPos,
+    currPos
+  }) => {
+    const current = currPos.y * -1;
     // Todo: Memoize and update on window resize
-    var total = document.body.clientHeight - window.innerHeight;
-    var progress = Math.min(100, Math.abs(current / total) * 100);
+    const total = document.body.clientHeight - window.innerHeight;
+    const progress = Math.min(100, Math.abs(current / total) * 100);
     setReadingProgress(progress);
   }, [readingProgress], null, false, 1);
-  useOnUnmuteMedia(useCallback(function () {
-    return setNavExpanded(true);
-  }, []));
-  var darkWidgets = useDarkWidgets();
-  var hasChapters = chapters.length > 1 || !utils.isBlank((_chapters$ = chapters[0]) === null || _chapters$ === void 0 ? void 0 : _chapters$.title) || !utils.isBlank((_chapters$2 = chapters[0]) === null || _chapters$2 === void 0 ? void 0 : _chapters$2.summary);
+  const darkWidgets = useDarkWidgets();
+  const hasChapters = (chapters.length > 1 || !utils.isBlank((_chapters$ = chapters[0]) === null || _chapters$ === void 0 ? void 0 : _chapters$.title) || !utils.isBlank((_chapters$2 = chapters[0]) === null || _chapters$2 === void 0 ? void 0 : _chapters$2.summary)) && !omitChapterNavigation;
   function handleProgressBarMouseEnter() {
     setNavExpanded(true);
   }
   function handleBurgerMenuClick() {
-    setMobileNavHidden(!mobileNavHidden);
+    setMenuOpen(!menuOpen);
   }
   function handleMenuClick(chapterLinkId) {
-    setMobileNavHidden(true);
+    lockNavExpanded();
+    setMenuOpen(false);
   }
   function renderChapterLinks(chapters) {
-    return chapters.map(function (chapter, index) {
-      var chapterIndex = index + 1;
-      var chapterLinkId = "chapterLink".concat(chapterIndex);
+    return chapters.map((chapter, index) => {
+      const chapterIndex = index + 1;
+      const chapterLinkId = `chapterLink${chapterIndex}`;
       return /*#__PURE__*/React.createElement("li", {
         key: index,
-        className: styles.chapterListItem
+        className: styles.chapterListItem,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$c,
+          lineNumber: 90,
+          columnNumber: 9
+        }
       }, /*#__PURE__*/React.createElement(ChapterLink, Object.assign({}, chapter, {
         chapterIndex: chapterIndex,
         chapterLinkId: chapterLinkId,
         active: (currentChapter === null || currentChapter === void 0 ? void 0 : currentChapter.id) === chapter.id,
-        handleMenuClick: handleMenuClick
+        handleMenuClick: handleMenuClick,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$c,
+          lineNumber: 91,
+          columnNumber: 11
+        }
       })));
     });
   }
@@ -572,56 +1004,183 @@ function DefaultNavigation(_ref) {
     if (!hasChapters) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(Scroller, null, /*#__PURE__*/React.createElement("nav", {
-      className: classNames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden || MobileMenu))
+    return /*#__PURE__*/React.createElement(Scroller, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 107,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React.createElement("nav", {
+      className: classNames(styles.navigationChapters, {
+        [styles.hiddenOnMobile]: !menuOpen || hasMenu
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 108,
+        columnNumber: 9
+      }
     }, /*#__PURE__*/React.createElement("ul", {
-      className: styles.chapterList
+      className: styles.chapterList,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 110,
+        columnNumber: 11
+      }
     }, renderChapterLinks(chapters))));
   }
-  var hideSharingButton = configuration.hideSharingButton || !shareProviders.length;
+  const hideSharingButton = configuration.hideSharingButton || !shareProviders.length;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
-    className: classNames(styles.navigationBar, _defineProperty(_defineProperty({
-      'scope-dark': darkWidgets
-    }, styles.navigationBarExpanded, navExpanded || !isPhonePlatform && configuration.fixedOnDesktop || !mobileNavHidden), styles.hasChapters, hasChapters)),
+    className: classNames(styles.navigationBar, {
+      'scope-dark': darkWidgets,
+      [styles.navigationBarExpanded]: navExpanded || !isPhonePlatform && configuration.fixedOnDesktop || menuOpen,
+      [styles.hasChapters]: hasChapters,
+      [styles.hasDesktopMenu]: hasDesktopMenu
+    }),
     style: {
       '--theme-accent-color': paletteColor(configuration.accentColor)
+    },
+    onFocus: () => setNavExpanded(true),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 123,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(WidgetSelectionRect, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 134,
+      columnNumber: 9
     }
-  }, /*#__PURE__*/React.createElement(WidgetSelectionRect, null, /*#__PURE__*/React.createElement("div", {
-    className: styles.navigationBarContentWrapper
-  }, (hasChapters || MobileMenu) && /*#__PURE__*/React.createElement(HamburgerIcon, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.navigationBarContentWrapper, configuration.firstBackdropBelowNavigation ? styles.opaqueSurface : styles.translucentSurface),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 135,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React.createElement(SkipLinks, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 139,
+      columnNumber: 13
+    }
+  }), (hasChapters || hasMenu) && /*#__PURE__*/React.createElement(HamburgerIcon, {
     onClick: handleBurgerMenuClick,
-    mobileNavHidden: mobileNavHidden
-  }), /*#__PURE__*/React.createElement(SkipLinks, null), /*#__PURE__*/React.createElement(Logo, logo), renderNav(), MobileMenu && /*#__PURE__*/React.createElement(MobileMenu, {
+    menuOpen: menuOpen,
+    visibleOnDesktop: hasDesktopMenu,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 141,
+      columnNumber: 42
+    }
+  }), /*#__PURE__*/React.createElement(Logo, Object.assign({}, logo, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 145,
+      columnNumber: 13
+    }
+  })), renderNav(), CustomMenu && /*#__PURE__*/React.createElement(CustomMenu, {
     configuration: configuration,
-    open: !mobileNavHidden,
-    close: function close() {
-      return setMobileNavHidden(true);
+    open: menuOpen,
+    close: () => setMenuOpen(false),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 148,
+      columnNumber: 28
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.contextIcons)
-  }, !configuration.hideToggleMuteButton && /*#__PURE__*/React.createElement(ToggleMuteButton, null), /*#__PURE__*/React.createElement(TranslationsMenu, null), !theme.options.hideLegalInfoButton && /*#__PURE__*/React.createElement(LegalInfoMenu, {
-    tooltipOffset: hideSharingButton ? -40 : 0
+    className: classNames(styles.contextIcons),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 152,
+      columnNumber: 13
+    }
+  }, !configuration.hideToggleMuteButton && /*#__PURE__*/React.createElement(ToggleMuteButton, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 153,
+      columnNumber: 55
+    }
+  }), /*#__PURE__*/React.createElement(TranslationsMenu, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 154,
+      columnNumber: 15
+    }
+  }), !theme.options.hideLegalInfoButton && /*#__PURE__*/React.createElement(LegalInfoMenu, {
+    tooltipOffset: hideSharingButton ? -40 : 0,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 155,
+      columnNumber: 53
+    }
   }), !hideSharingButton && /*#__PURE__*/React.createElement(SharingMenu, {
-    shareProviders: shareProviders
-  }), ExtraButtons && /*#__PURE__*/React.createElement(ExtraButtons, null))), /*#__PURE__*/React.createElement("div", {
+    shareProviders: shareProviders,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 156,
+      columnNumber: 38
+    }
+  }), ExtraButtons && /*#__PURE__*/React.createElement(ExtraButtons, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 157,
+      columnNumber: 32
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles.progressBar,
-    onMouseEnter: handleProgressBarMouseEnter
+    onMouseEnter: handleProgressBarMouseEnter,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 161,
+      columnNumber: 11
+    }
   }, /*#__PURE__*/React.createElement("span", {
     className: styles.progressIndicator,
     style: {
       width: readingProgress + '%'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 162,
+      columnNumber: 13
     }
   })))), /*#__PURE__*/React.createElement(SelectableWidget, {
     role: "defaultNavigationExtra",
     props: {
       navigationExpanded: navExpanded,
-      mobileNavigationVisible: !mobileNavHidden
+      mobileNavigationVisible: menuOpen
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 166,
+      columnNumber: 7
     }
   }));
 }
 
 frontend.widgetTypes.register('defaultNavigation', {
-  component: DefaultNavigation
+  component: DefaultNavigation,
+  presenceProvider: DefaultNavigationPresenceProvider
 });
 
-export { DefaultNavigation };
+export { DefaultNavigation, DefaultNavigationPresenceProvider };