Fat menu and mobile menu implementation.

README.md

@@ -169,6 +169,17 @@ module.exports = {
 
 You can specify your project add-ons in `volto.config.js`, but sometimes is better to have them all in one place (in your policy add-on) for portability.
 
+## Feature flags
+
+### Enable fat menu
+
+Since 2.0.0, the light theme has a fat menu (below the main site sections) triggered clickin on one of them.
+It's behind a feature flag, as opt-out:
+
+```js
+config.settings.enableFatMenu = true;
+```
+
 ## Development Setup
 
 This theme works under Volto 17 alpha 16 onwards.

acceptance/cypress/tests/basic.cy.js

@@ -23,7 +23,7 @@ context('Basic Acceptance Tests', () => {
     it('As editor I can add a page with a text block', function () {
       // when I add a page with a text block
       cy.get('#toolbar-add').click();
-      cy.get('#toolbar-add-document').click();
+      cy.get('#toolbar-add-document').click({ force: true });
       cy.get('.documentFirstHeading')
         .type('My Page')
         .get('.documentFirstHeading')

acceptance/cypress/tests/nav.cy.js

@@ -0,0 +1,60 @@
+context('Navigation Acceptance Tests', () => {
+  beforeEach(() => {
+    cy.intercept('GET', `/**/*?expand*`).as('content');
+    cy.intercept('GET', '/**/Document').as('schema');
+
+    // given a logged in editor and a page in edit mode
+    cy.autologin();
+    cy.visit('/');
+    cy.viewport('macbook-16');
+
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'level-1',
+      contentTitle: 'Level 1',
+      path: '/',
+    });
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'level-2',
+      contentTitle: 'Level 2',
+      path: '/level-1',
+    });
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'level-3',
+      contentTitle: 'Level 3',
+      path: '/level-1/level-2',
+    });
+
+
+    cy.visit('/');
+    cy.viewport('macbook-16');
+  });
+
+  it('includes 3rd level', function () {
+    cy.wait('@content');
+    cy.get('ul.desktop-menu button').contains('Level 1').click();
+    cy.get('#navigation').contains('Level 2');
+    cy.get('#navigation').contains('Level 3');
+  });
+
+  it('Open 2nd level', function () {
+    cy.wait('@content');
+    cy.get('ul.desktop-menu button').contains('Level 1').click();
+    cy.get('.subitem-wrapper').findByText('Level 2').click();
+    cy.get('.documentFirstHeading').should('have.text', 'Level 2');
+
+  });
+
+  it('Open 3rd level', function () {
+    cy.wait('@content');
+    cy.get('ul.desktop-menu button').contains('Level 1').click();
+    cy.get('.subsubitem-wrapper li').findByText('Level 3').click();
+    cy.get('.documentFirstHeading').should('have.text', 'Level 3');
+
+  });
+});
+
+
+

news/86.breaking

@@ -0,0 +1,7 @@
+Added fat menu and mobile menu. @iFlameing
+Since 2.0.0, the light theme has a fat menu (below the main site sections) triggered clickin on one of them.
+It's behind a feature flag, as opt-out:
+
+```js
+config.settings.enableFatMenu = true;
+```

src/components/Header/Header.jsx

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
+import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 
@@ -26,7 +27,8 @@ const Header = (props) => {
               <Logo />
             </div>
             <Navigation pathname={pathname} />
-            <div className="search-wrapper">
+            <MobileNavigation pathname={pathname} />
+            <div className="search-wrapper navigation-desktop">
               <div className="search">
                 <SearchWidget />
               </div>