@kitconcept/volto-light-theme 3.3.2 → 4.0.0

package/.changelog.draft

@@ -1,8 +1,26 @@
-## 3.3.2 (2024-05-31)
+## 4.0.0 (2024-06-21)
+
+### Breaking
+
+- Fix tabbing order in the top header. It modifies the underlying HTML to move the top header to the bottom, and modifies CSS to adjust. @iRohitSingh @sneridagh [#374](https://github.com/kitconcept/volto-light-theme/pull/374)
+- Updated the MobileNavigation component to be more easily customizable.
+  The component can now handle infinite navigation depth instead of only three levels, if configured to do so.
+  The Burger Menu can now be easily customized by overriding the new MobileNavigationToggler.jsx file.
+  @lenadax
+
+  Breaking:
+  - The "hamburger" icon in the mobile navigation now has an additional wrapper that allows for better customization.
+
+  If you have overriden the hamburger icon, you should make sure that your customizations still work and adjust otherwise. [#393](https://github.com/kitconcept/volto-light-theme/pull/393)
 
 ### Bugfix
 
-- Add top padding to login page @danalvrz [#387](https://github.com/kitconcept/volto-light-theme/pull/387)
-- Add default width mixin to content creation Forms @danalvrz [#388](https://github.com/kitconcept/volto-light-theme/pull/388)
+- Fix Logo alt-Title @jonaspiterek [#337](https://github.com/kitconcept/volto-light-theme/pull/337)
+- fix link in introduction block being smaller than normal text @jonaspiterek [#365](https://github.com/kitconcept/volto-light-theme/pull/365)
+- Fix Description block width in Edit and Add mode. @danalvrz [#394](https://github.com/kitconcept/volto-light-theme/pull/394)
+
+### Internal
+
+- Update the setup. Use new images. @sneridagh [#390](https://github.com/kitconcept/volto-light-theme/pull/390)
 
 

package/.release-it.json

@@ -4,7 +4,8 @@
       "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft",
       "pipx run towncrier build --yes --version ${version}",
       "cp ../../README.md ./ && cp CHANGELOG.md ../../CHANGELOG.md",
-      "git add ../../CHANGELOG.md"
+      "python3 -c 'import json; data = json.load(open(\"../../package.json\")); data[\"version\"] = \"${version}\"; json.dump(data, open(\"../../package.json\", \"w\"), indent=2)'",
+      "git add ../../CHANGELOG.md ../../package.json"
     ],
     "after:release": "rm .changelog.draft"
   },

package/CHANGELOG.md

@@ -8,6 +8,31 @@
 
 <!-- towncrier release notes start -->
 
+## 4.0.0 (2024-06-21)
+
+### Breaking
+
+- Fix tabbing order in the top header. It modifies the underlying HTML to move the top header to the bottom, and modifies CSS to adjust. @iRohitSingh @sneridagh [#374](https://github.com/kitconcept/volto-light-theme/pull/374)
+- Updated the MobileNavigation component to be more easily customizable.
+  The component can now handle infinite navigation depth instead of only three levels, if configured to do so.
+  The Burger Menu can now be easily customized by overriding the new MobileNavigationToggler.jsx file.
+  @lenadax
+
+  Breaking:
+  - The "hamburger" icon in the mobile navigation now has an additional wrapper that allows for better customization.
+
+  If you have overriden the hamburger icon, you should make sure that your customizations still work and adjust otherwise. [#393](https://github.com/kitconcept/volto-light-theme/pull/393)
+
+### Bugfix
+
+- Fix Logo alt-Title @jonaspiterek [#337](https://github.com/kitconcept/volto-light-theme/pull/337)
+- fix link in introduction block being smaller than normal text @jonaspiterek [#365](https://github.com/kitconcept/volto-light-theme/pull/365)
+- Fix Description block width in Edit and Add mode. @danalvrz [#394](https://github.com/kitconcept/volto-light-theme/pull/394)
+
+### Internal
+
+- Update the setup. Use new images. @sneridagh [#390](https://github.com/kitconcept/volto-light-theme/pull/390)
+
 ## 3.3.2 (2024-05-31)
 
 ### Bugfix

package/locales/de/LC_MESSAGES/volto.po

@@ -19,7 +19,12 @@ msgstr ""
 #. Default: "Back"
 #: components/MobileNavigation/MobileNavigation
 msgid "Back"
-msgstr ""
+msgstr "Zurück"
+
+#. Default: "Back to homepage"
+#: components/Logo/Logo
+msgid "Back to homepage"
+msgstr "Zurück zur Startseite"
 
 #. Default: "Background color"
 #: components/Blocks/schema
@@ -34,7 +39,7 @@ msgstr "Block Breite"
 #. Default: "Breadcrumbs"
 #: components/Breadcrumbs/Breadcrumbs
 msgid "Breadcrumbs"
-msgstr ""
+msgstr "Brotkrumen"
 
 #. Default: "Browse the site, drop an image, or type an URL"
 #: components/Blocks/Image/Edit
@@ -44,7 +49,7 @@ msgstr "Bild auswählen, hochladen oder URL angeben"
 #. Default: "Button text"
 #: components/Blocks/Slider/schema
 msgid "Button text"
-msgstr ""
+msgstr "Button Text"
 
 #. Default: "Center"
 #: components/Widgets/AlignWidget
@@ -65,7 +70,7 @@ msgstr "Kontakt"
 #. Default: "Continue reading"
 #: components/Blocks/Slider/DefaultBody
 msgid "Continue reading"
-msgstr ""
+msgstr "Weiterlesen"
 
 #. Default: "Copyright"
 #: components/Footer/Footer
@@ -80,7 +85,7 @@ msgstr "Beschreibung"
 #. Default: "Distributed under the {license}."
 #: components/Footer/Footer
 msgid "Distributed under the {license}."
-msgstr ""
+msgstr "Vertrieben unter {license}"
 
 #. Default: "End"
 #: components/Blocks/EventMetadata/View
@@ -100,18 +105,18 @@ msgstr "Volle Breite"
 #. Default: "GNU GPL license"
 #: components/Footer/Footer
 msgid "GNU GPL license"
-msgstr ""
+msgstr "GNU GPL Lizenz"
 
 #. Default: "Hide Button"
 #: components/Blocks/Slider/schema
 msgid "Hide Button"
-msgstr "kein Button anzeigen"
+msgstr "keinen Button anzeigen"
 
 #. Default: "Home"
 #: components/Breadcrumbs/Breadcrumbs
 #: components/MobileNavigation/MobileNavigation
 msgid "Home"
-msgstr ""
+msgstr "Startseite"
 
 #. Default: "ICS Download"
 #: components/Blocks/EventMetadata/View
@@ -177,18 +182,13 @@ msgstr "Telefon"
 #. Default: "Please choose an existing content as source for this element"
 #: components/Blocks/Slider/DefaultBody
 msgid "Please choose an existing content as source for this element"
-msgstr ""
+msgstr "Bitte wählen sie einen bestehenden Inhalt als Quelle für dieses Element"
 
 #. Default: "Plone Foundation"
 #: components/Footer/Footer
 msgid "Plone Foundation"
 msgstr ""
 
-#. Default: "Plone Site"
-#: components/Logo/Logo
-msgid "Plone Site"
-msgstr ""
-
 #. Default: "Plone{reg} Open Source CMS/WCM"
 #: components/Footer/Footer
 msgid "Plone{reg} Open Source CMS/WCM"
@@ -272,7 +272,7 @@ msgstr "Sortierung"
 #. Default: "Source"
 #: components/Blocks/Slider/DefaultBody
 msgid "Source"
-msgstr ""
+msgstr "Quelle"
 
 #. Default: "Start"
 #: components/Blocks/EventMetadata/View
@@ -317,7 +317,7 @@ msgstr "Bild löschen"
 #. Default: "Image preview"
 #: components/Blocks/Image/ImageSidebar
 msgid "image_block_preview"
-msgstr ""
+msgstr "Bild Vorschau"
 
 #. Default: "Loading"
 #: components/Blocks/Listing/ListingBody
@@ -327,7 +327,7 @@ msgstr "laden"
 #. Default: "More info"
 #: components/Blocks/Slider/DefaultBody
 msgid "moreInfo"
-msgstr ""
+msgstr "Mehr Informationen"
 
 #. Default: "of"
 #: components/Blocks/Listing/ListingBody

package/locales/en/LC_MESSAGES/volto.po

@@ -16,6 +16,11 @@ msgstr ""
 msgid "Back"
 msgstr ""
 
+#. Default: "Back to homepage"
+#: components/Logo/Logo
+msgid "Back to homepage"
+msgstr ""
+
 #. Default: "Background color"
 #: components/Blocks/schema
 msgid "Background color"
@@ -179,11 +184,6 @@ msgstr ""
 msgid "Plone Foundation"
 msgstr ""
 
-#. Default: "Plone Site"
-#: components/Logo/Logo
-msgid "Plone Site"
-msgstr ""
-
 #. Default: "Plone{reg} Open Source CMS/WCM"
 #: components/Footer/Footer
 msgid "Plone{reg} Open Source CMS/WCM"

package/locales/es/LC_MESSAGES/volto.po

@@ -22,6 +22,11 @@ msgstr ""
 msgid "Back"
 msgstr "Atrás"
 
+#. Default: "Back to homepage"
+#: components/Logo/Logo
+msgid "Back to homepage"
+msgstr ""
+
 #. Default: "Background color"
 #: components/Blocks/schema
 msgid "Background color"
@@ -185,11 +190,6 @@ msgstr "Elija un contenido para utilizarlo como fuente de datos para este elemen
 msgid "Plone Foundation"
 msgstr "Fundación Plone"
 
-#. Default: "Plone Site"
-#: components/Logo/Logo
-msgid "Plone Site"
-msgstr "Sitio Plone"
-
 #. Default: "Plone{reg} Open Source CMS/WCM"
 #: components/Footer/Footer
 msgid "Plone{reg} Open Source CMS/WCM"

package/locales/eu/LC_MESSAGES/volto.po

@@ -22,6 +22,11 @@ msgstr ""
 msgid "Back"
 msgstr "Atzera"
 
+#. Default: "Back to homepage"
+#: components/Logo/Logo
+msgid "Back to homepage"
+msgstr ""
+
 #. Default: "Background color"
 #: components/Blocks/schema
 msgid "Background color"
@@ -185,11 +190,6 @@ msgstr "Aukeratu eduki bat elementu honen iturburu gisa"
 msgid "Plone Foundation"
 msgstr "Plone Fundazioa"
 
-#. Default: "Plone Site"
-#: components/Logo/Logo
-msgid "Plone Site"
-msgstr "Plone Ataria"
-
 #. Default: "Plone{reg} Open Source CMS/WCM"
 #: components/Footer/Footer
 msgid "Plone{reg} Open Source CMS/WCM"

package/locales/pt_BR/volto.po

@@ -16,6 +16,11 @@ msgstr ""
 msgid "Back"
 msgstr "Voltar"
 
+#. Default: "Back to homepage"
+#: components/Logo/Logo
+msgid "Back to homepage"
+msgstr "Voltar à página inicial"
+
 #. Default: "Background color"
 #: components/Blocks/schema
 msgid "Background color"
@@ -179,11 +184,6 @@ msgstr "Por favor, escolha um conteúdo existente como fonte para esse elemento"
 msgid "Plone Foundation"
 msgstr "Plone Foundation"
 
-#. Default: "Plone Site"
-#: components/Logo/Logo
-msgid "Plone Site"
-msgstr "Site Plone"
-
 #. Default: "Plone{reg} Open Source CMS/WCM"
 #: components/Footer/Footer
 msgid "Plone{reg} Open Source CMS/WCM"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-03-22T15:33:53.504Z\n"
+"POT-Creation-Date: 2024-05-31T09:46:26.312Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -18,6 +18,11 @@ msgstr ""
 msgid "Back"
 msgstr ""
 
+#. Default: "Back to homepage"
+#: components/Logo/Logo
+msgid "Back to homepage"
+msgstr ""
+
 #. Default: "Background color"
 #: components/Blocks/schema
 msgid "Background color"
@@ -181,11 +186,6 @@ msgstr ""
 msgid "Plone Foundation"
 msgstr ""
 
-#. Default: "Plone Site"
-#: components/Logo/Logo
-msgid "Plone Site"
-msgstr ""
-
 #. Default: "Plone{reg} Open Source CMS/WCM"
 #: components/Footer/Footer
 msgid "Plone{reg} Open Source CMS/WCM"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "3.3.2",
+  "version": "4.0.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "types": "src/types/index.d.ts",
@@ -37,17 +37,8 @@
     "@plone/scripts": "^3.6.1",
     "release-it": "^17.1.1"
   },
-  "peerAddons": [
-    "@eeacms/volto-accordion-block",
-    "@kitconcept/volto-button-block",
-    "@kitconcept/volto-heading-block",
-    "@kitconcept/volto-highlight-block",
-    "@kitconcept/volto-introduction-block",
-    "@kitconcept/volto-separator-block",
-    "@kitconcept/volto-slider-block"
-  ],
   "dependencies": {
-    "@plone/components": "2.0.0-alpha.6"
+    "@plone/components": "workspace:*"
   },
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^10.4.6",

package/src/components/Header/Header.jsx

@@ -28,18 +28,6 @@ const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
   return (
     <>
       <div className="header">
-        <div className="logo-nav-wrapper">
-          <div className="logo">
-            <Logo />
-          </div>
-          <Navigation pathname={pathname} />
-          <MobileNavigation pathname={pathname} />
-          <div className="search-wrapper navigation-desktop">
-            <div className="search">
-              <SearchWidget />
-            </div>
-          </div>
-        </div>
         <div className="tools-wrapper">
           <LanguageSelector />
 
@@ -58,6 +46,18 @@ const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
             </div>
           )}
         </div>
+        <div className="logo-nav-wrapper">
+          <div className="logo">
+            <Logo />
+          </div>
+          <Navigation pathname={pathname} />
+          <MobileNavigation pathname={pathname} />
+          <div className="search-wrapper navigation-desktop">
+            <div className="search">
+              <SearchWidget />
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );

package/src/components/Logo/Logo.jsx

@@ -12,9 +12,9 @@ const messages = defineMessages({
     id: 'Site',
     defaultMessage: 'Site',
   },
-  plonesite: {
-    id: 'Plone Site',
-    defaultMessage: 'Plone Site',
+  homepage: {
+    id: 'Back to homepage',
+    defaultMessage: 'Back to homepage',
   },
 });
 
@@ -35,8 +35,8 @@ const Logo = () => {
             ? flattenToAppURL(site['plone.site_logo'])
             : LogoImage
         }
-        alt={intl.formatMessage(messages.plonesite)}
-        title={intl.formatMessage(messages.plonesite)}
+        alt={intl.formatMessage(messages.homepage)}
+        title={intl.formatMessage(messages.homepage)}
       />
     </UniversalLink>
   );

package/src/components/MobileNavigation/MobileNavigation.jsx

@@ -1,15 +1,17 @@
-import React, { useCallback } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import cx from 'classnames';
 import { CSSTransition } from 'react-transition-group';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 
 import config from '@plone/volto/registry';
 import { Icon, SearchWidget } from '@plone/volto/components';
 import { toBackendLang } from '@plone/volto/helpers';
 import arrowRightSVG from '@plone/volto/icons/right-key.svg';
 import arrowLeftSVG from '@plone/volto/icons/left-key.svg';
+import { MobileNavigationToggler } from './MobileNavigationToggler';
 import { MobileToolsFooter } from './MobileToolsFooter';
 
 const messages = defineMessages({
@@ -25,27 +27,106 @@ const messages = defineMessages({
     id: 'Search',
     defaultMessage: 'Search',
   },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
 });
 
-const MobileNavigation = (props) => {
-  const [menuState, setMenuState] = React.useState({
-    isMobileMenuOpen: false,
-    secondaryMenuOpened: null,
-    isSecondaryMobileMenuOpen: false,
-    tertiaryMenuOpened: null,
-    isTertiaryMobileMenuOpen: false,
-  });
+const MenuItem = ({
+  section,
+  level,
+  closeMenus,
+  handleLinkClicked,
+  resetToRoot,
+  pathname,
+}) => {
+  const [isSubMenuOpen, setSubMenuOpen] = useState(false);
+
+  const openSubMenu = useCallback((e) => {
+    e.stopPropagation();
+    setSubMenuOpen(true);
+  }, []);
+
+  const closeSubMenu = useCallback((e) => {
+    e.stopPropagation();
+    setSubMenuOpen(false);
+  }, []);
+
+  // Reset submenus when history changes
+  useEffect(() => {
+    if (resetToRoot) {
+      setSubMenuOpen(false);
+    }
+  }, [resetToRoot]);
+
+  return (
+    <li className={section.url === pathname ? 'current' : ''}>
+      <Link
+        to={section.url === '' ? '/' : section.url}
+        onClick={(e) =>
+          handleLinkClicked(e, section, openSubMenu, closeSubMenu, level)
+        }
+      >
+        {section.nav_title || section.title}
+        {section.items.length > 0 && <Icon name={arrowRightSVG} />}
+      </Link>
+      <CSSTransition
+        in={isSubMenuOpen}
+        timeout={500}
+        classNames="menu-drawer"
+        unmountOnExit
+      >
+        <div className="menu-drawer subsection">
+          <div className="search-header">
+            <div className="search-wrapper">
+              <div className="search">
+                <SearchWidget />
+              </div>
+            </div>
+            <button onClick={closeSubMenu}>
+              <Icon name={arrowLeftSVG} size="60px" />
+              <span>
+                <FormattedMessage {...messages.back} />
+              </span>
+            </button>
+          </div>
+          <ul className="sections">
+            <li className="header">{section.nav_title || section.title}</li>
+            <li>
+              <Link
+                to={section.url === '' ? '/' : section.url}
+                onClick={closeMenus}
+              >
+                <FormattedMessage id="Overview" defaultMessage="Overview" />
+              </Link>
+            </li>
+            {section.items &&
+              section.items.map((subsection, index) => (
+                <MenuItem
+                  key={subsection.url}
+                  section={subsection}
+                  level={level + 1}
+                  closeMenus={closeMenus}
+                  handleLinkClicked={handleLinkClicked}
+                  resetToRoot={resetToRoot}
+                  pathname={pathname}
+                />
+              ))}
+          </ul>
+          <MobileToolsFooter />
+        </div>
+      </CSSTransition>
+    </li>
+  );
+};
 
-  const {
-    isMobileMenuOpen,
-    secondaryMenuOpened,
-    isSecondaryMobileMenuOpen,
-    tertiaryMenuOpened,
-    isTertiaryMobileMenuOpen,
-  } = menuState;
+const MobileNavigation = (props) => {
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [resetToRoot, setResetToRoot] = useState(false);
   const { settings } = config;
   const intl = useIntl();
-  const menus = React.useRef(null);
+  const menus = useRef(null);
   const currentLang = useSelector((state) => state.intl.locale);
   const items = useSelector((state) => state.navigation.items || []);
   const history = useHistory();
@@ -55,94 +136,64 @@ const MobileNavigation = (props) => {
   const toggleMobileMenu = useCallback(() => {
     const body = document.getElementsByTagName('body')[0];
     body.classList.toggle('has-menu-open');
-
-    setMenuState((prevState) => ({
-      ...prevState,
-      isMobileMenuOpen: !prevState.isMobileMenuOpen,
-    }));
-  }, []);
-
-  const openSecondaryMenu = useCallback((e, index) => {
-    e.stopPropagation();
-
-    setMenuState((prevState) => ({
-      ...prevState,
-      secondaryMenuOpened: index,
-      isSecondaryMobileMenuOpen: true,
-    }));
-  }, []);
-
-  const closeSecondaryMenu = useCallback((e) => {
-    e.stopPropagation();
-    setMenuState((prevState) => ({
-      ...prevState,
-      isSecondaryMobileMenuOpen: false,
-      secondaryMenuOpened: null,
-    }));
-  }, []);
-
-  const openTertiaryMenu = useCallback((e, index) => {
-    e.stopPropagation();
-
-    setMenuState((prevState) => ({
-      ...prevState,
-      tertiaryMenuOpened: index,
-      isTertiaryMobileMenuOpen: true,
-    }));
-  }, []);
-
-  const closeTertiaryMenu = useCallback((e) => {
-    e.stopPropagation();
-
-    setMenuState((prevState) => ({
-      ...prevState,
-      isTertiaryMobileMenuOpen: false,
-      tertiaryMenuOpened: null,
-    }));
-  }, []);
+    setMobileMenuOpen((prev) => !prev);
+    if (!isMobileMenuOpen) {
+      setResetToRoot(false); // Disable reset to root when opening menu
+    }
+  }, [isMobileMenuOpen]);
 
   const closeMenus = useCallback((e) => {
     if (e && e.stopPropagation) {
       e.stopPropagation();
     }
-
-    setMenuState(() => ({
-      isSecondaryMobileMenuOpen: false,
-      isTertiaryMobileMenuOpen: false,
-      secondaryMenuOpened: null,
-      tertiaryMenuOpened: null,
-      isMobileMenuOpen: false,
-    }));
+    setMobileMenuOpen(false);
   }, []);
 
   const handleLinkClicked = useCallback(
-    (e, section, callback, index) => {
+    (e, section, openSubMenu, closeSubMenu, level) => {
       e.preventDefault();
       if (section.items.length > 0) {
-        callback(e, index);
+        openSubMenu(e);
       } else {
         history.push(section.url);
-        return closeMenus(e);
+        closeMenus(e);
+        setResetToRoot(true);
       }
     },
     [history, closeMenus],
   );
 
-  React.useEffect(() => {
-    const closeMenuOnHistoryChange = history.listen(() => closeMenus({}));
+  useEffect(() => {
+    const closeMenuOnHistoryChange = history.listen(() => {
+      closeMenus({});
+      setResetToRoot(true);
+    });
     return () => {
       closeMenuOnHistoryChange();
     };
   }, [history, closeMenus]);
 
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menus.current && !doesNodeContainClick(menus.current, e)) {
+        closeMenus(e);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside, false);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  }, [closeMenus]);
+
   return (
     <div className="mobile-nav mobile only tablet only" ref={menus}>
       <div className="hamburger-wrapper">
         <button
-          className={cx('hamburger hamburger--collapse', {
+          className={cx('hamburger-toggler hamburger-toggler--collapse', {
             'is-active': isMobileMenuOpen,
           })}
-          aria-expanded={isMobileMenuOpen ? true : false}
+          aria-expanded={isMobileMenuOpen}
           aria-label={
             isMobileMenuOpen
               ? intl.formatMessage(messages.closeMobileMenu)
@@ -156,9 +207,7 @@ const MobileNavigation = (props) => {
           type="button"
           onClick={toggleMobileMenu}
         >
-          <span className="hamburger-box">
-            <span className="hamburger-inner" />
-          </span>
+          <MobileNavigationToggler isMobileMenuOpen={isMobileMenuOpen} />
         </button>
       </div>
 
@@ -169,7 +218,7 @@ const MobileNavigation = (props) => {
       >
         <div className="menu-drawer">
           <div className="search-header">
-            <div className=" search-wrapper ">
+            <div className="search-wrapper">
               <div className="search">
                 <SearchWidget />
               </div>
@@ -190,169 +239,15 @@ const MobileNavigation = (props) => {
             </li>
             {items &&
               items.map((section, index) => (
-                <li
+                <MenuItem
                   key={section.url}
-                  className={section.url === props.pathname ? 'current' : ''}
-                >
-                  <Link
-                    to={section.url === '' ? '/' : section.url}
-                    onClick={(e) =>
-                      handleLinkClicked(e, section, openSecondaryMenu, index)
-                    }
-                  >
-                    {section.nav_title || section.title}
-                    {section.items.length > 0 && <Icon name={arrowRightSVG} />}
-                  </Link>
-                  <CSSTransition
-                    in={
-                      isSecondaryMobileMenuOpen && secondaryMenuOpened === index
-                    }
-                    timeout={500}
-                    classNames="menu-drawer"
-                    unmountOnExit
-                  >
-                    <div className="menu-drawer subsection">
-                      <div className="search-header">
-                        <div className=" search-wrapper ">
-                          <div className="search">
-                            <SearchWidget />
-                          </div>
-                        </div>
-
-                        <button onClick={(e) => closeSecondaryMenu(e)}>
-                          <Icon name={arrowLeftSVG} size="60px" />
-                          <span>
-                            <FormattedMessage id="Back" defaultMessage="Back" />
-                          </span>
-                        </button>
-                      </div>
-                      <ul className="sections">
-                        <li className="header">
-                          {section.nav_title || section.title}
-                        </li>
-                        <li>
-                          <Link
-                            to={section.url === '' ? '/' : section.url}
-                            onClick={closeMenus}
-                          >
-                            <FormattedMessage
-                              id="Overview"
-                              defaultMessage="Overview"
-                            />
-                          </Link>
-                        </li>
-
-                        {section.items &&
-                          section.items.map((subsection, index) => (
-                            <li
-                              key={subsection.url}
-                              className={
-                                subsection.url === props.pathname
-                                  ? 'current'
-                                  : ''
-                              }
-                            >
-                              <Link
-                                to={
-                                  subsection.url === '' ? '/' : subsection.url
-                                }
-                                onClick={(e) =>
-                                  handleLinkClicked(
-                                    e,
-                                    subsection,
-                                    openTertiaryMenu,
-                                    index,
-                                  )
-                                }
-                              >
-                                {subsection.nav_title || subsection.title}
-                                {subsection.items.length > 0 && (
-                                  <Icon name={arrowRightSVG} />
-                                )}
-                              </Link>
-                              <CSSTransition
-                                in={
-                                  isTertiaryMobileMenuOpen &&
-                                  tertiaryMenuOpened === index
-                                }
-                                timeout={500}
-                                classNames="menu-drawer"
-                                unmountOnExit
-                              >
-                                <div className="menu-drawer subsection">
-                                  <div className="search-header">
-                                    <div className=" search-wrapper ">
-                                      <div className="search">
-                                        <SearchWidget />
-                                      </div>
-                                    </div>
-
-                                    <button
-                                      onClick={(e) => closeTertiaryMenu(e)}
-                                    >
-                                      <Icon name={arrowLeftSVG} size="60px" />
-                                      <span>
-                                        <FormattedMessage
-                                          id="Back"
-                                          defaultMessage="Back"
-                                        />
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <ul className="sections">
-                                    <li className="header">
-                                      {subsection.nav_title || subsection.title}
-                                    </li>
-                                    <li>
-                                      <Link
-                                        to={
-                                          subsection.url === ''
-                                            ? '/'
-                                            : subsection.url
-                                        }
-                                        onClick={closeMenus}
-                                      >
-                                        <FormattedMessage
-                                          id="Overview"
-                                          defaultMessage="Overview"
-                                        />
-                                      </Link>
-                                    </li>
-                                    {subsection.items &&
-                                      subsection.items.map(
-                                        (subsubsection, subindex) => (
-                                          <li
-                                            key={subsubsection.url}
-                                            className={cx('sub-section', {
-                                              'last-child':
-                                                subindex ===
-                                                subsection.items.length - 1,
-                                              current:
-                                                subsubsection.url ===
-                                                props.pathname,
-                                            })}
-                                          >
-                                            <Link
-                                              to={subsubsection.url}
-                                              onClick={closeMenus}
-                                            >
-                                              {subsubsection.nav_title ||
-                                                subsubsection.title}
-                                            </Link>
-                                          </li>
-                                        ),
-                                      )}
-                                  </ul>
-                                  <Footer />
-                                </div>
-                              </CSSTransition>
-                            </li>
-                          ))}
-                      </ul>
-                      <Footer />
-                    </div>
-                  </CSSTransition>
-                </li>
+                  section={section}
+                  level={0}
+                  closeMenus={closeMenus}
+                  handleLinkClicked={handleLinkClicked}
+                  resetToRoot={resetToRoot}
+                  pathname={props.pathname}
+                />
               ))}
           </ul>
           <Footer />

package/src/components/MobileNavigation/MobileNavigationToggler.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+
+export const MobileNavigationToggler = ({ isMobileMenuOpen }) => {
+  return (
+    <div
+      className={cx('hamburger hamburger--collapse', {
+        'is-active': isMobileMenuOpen,
+      })}
+    >
+      <span className="hamburger-box">
+        <span className="hamburger-inner" />
+      </span>
+    </div>
+  );
+};

package/src/theme/_header.scss

@@ -1,6 +1,6 @@
 .header-wrapper .header {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
 
   .logo-nav-wrapper {
     display: flex;
@@ -672,8 +672,13 @@ body.has-toolbar.has-sidebar {
     padding: 15px;
   }
 
-  .hamburger {
-    padding-bottom: 0;
+  .hamburger-toggler {
+    width: 40px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
   }
 
   .hamburger-wrapper {
@@ -716,7 +721,7 @@ body.has-toolbar.has-sidebar {
     .search-wrapper .search {
       padding-top: 20px;
       button {
-        padding-top: 0px;
+        padding: 0px;
         margin-right: 20px;
       }
     }
@@ -880,6 +885,11 @@ body.has-toolbar.has-sidebar {
         cursor: pointer;
       }
 
+      &.header {
+        align-items: flex-start;
+        line-height: 36px;
+      }
+
       &.current {
         font-weight: 700;
       }

package/src/theme/_layout.scss

@@ -291,7 +291,8 @@ External link removal for all the blocks.
     .block.separator
     .line,
   .block-editor-codeBlock,
-  .block-editor-mermaidBlock {
+  .block-editor-mermaidBlock,
+  .block-editor-description .documentDescription {
     @include narrow-container-width();
     @include adjustMarginsToEditContainer($narrow-container-width);
   }

package/src/theme/blocks/_introduction.scss

@@ -4,9 +4,11 @@
 
 .block.introduction {
   .block-container p,
+  .block-container a,
   .block-container ul li,
   .block-container ol li,
   .slate-editor p,
+  .slate-editor a,
   .slate-editor ul li,
   .slate-editor ol li {
     margin: 0;