version 9.1.2

Author: Fred Heusschen

demo/advanced.html

@@ -18,17 +18,13 @@
         <link rel="stylesheet" href="../dist/mmenu.css" />
 
         <style>
-            :root {
-                --mm-sidebar-expanded-size: 300px;
-            }
-
             .mm-wrapper--sidebar-expanded.mm-wrapper--opened #header a {
                 display: none;
             }
 
             .mm-navbar--tabs span {
                 display: inline-block;
-                margin-left: 8px;
+                margin-inline-start: 8px;
             }
 
             @media (max-width: 450px) {
@@ -46,10 +42,8 @@
                 Demo
             </div>
             <div id="content">
-                <p style="height: 1000px">
-                    <strong>This is an advanced demo.</strong><br />
-                    Click the menu icon to open the menu.
-                </p>
+                <h1>This is an advanced demo.</h1>
+                <p>Click the menu icon to open the menu.</p>
             </div>
             <nav id="menu">
                 <div id="panel-menu">
@@ -134,10 +128,10 @@
                     },
                     sidebar: {
                         collapsed: {
-                            use: "(min-width: 450px)",
+                            use: "(min-width: 768px)",
                         },
                         expanded: {
-                            use: "(min-width: 992px)",
+                            use: "(min-width: 1024px)",
                             initial: "closed",
                         },
                     },

demo/css/demo.css

@@ -22,22 +22,11 @@ h3,
 h4,
 h5,
 h6 {
-    line-height: 1;
-    font-weight: bold;
-    margin: 20px 0 10px 0;
-}
-h1,
-h2,
-h3 {
-    font-size: 20px;
-}
-h4,
-h5,
-h6 {
-    font-size: 18px;
+    margin: 1em 0;
+    font-size: 22px;
 }
 p {
-    margin: 0 0 10px 0;
+    margin: 1em 0;
 }
 a,
 a:link,

demo/default.html

@@ -21,10 +21,8 @@
                 Demo
             </div>
             <div id="content">
-                <p>
-                    <strong>This is a demo.</strong><br />
-                    Click the menu icon to open the menu.
-                </p>
+                <h1>This is a demo.</h1>
+                <p>Click the menu icon to open the menu.</p>
             </div>
             <nav id="menu">
                 <ul>
@@ -62,7 +60,11 @@
         <!-- mmenu scripts -->
         <script src="../dist/mmenu.js"></script>
         <script>
-            new Mmenu(document.querySelector("#menu"));
+            new Mmenu(document.querySelector("#menu"), {
+                offCanvas: {
+                    position: "left-front",
+                },
+            });
 
             document.addEventListener("click", function (evnt) {
                 var anchor = evnt.target.closest('a[href="#/"]');

demo/onepage.html

@@ -43,7 +43,7 @@
             </div>
             <div id="content">
                 <section id="intro">
-                    <h4>This is a demo</h4>
+                    <h1>This is a demo</h1>
                     <p>Click the menu icon to open the menu.</p>
                     <p>
                         Some of the links in the menu link to a section on this
@@ -52,7 +52,7 @@ <h4>This is a demo</h4>
                 </section>
 
                 <section id="options">
-                    <h4>Options</h4>
+                    <h2>Options</h2>
                     <p>
                         The mmenu.js plugin provides a set of options for
                         customizing your menu. The default values can be
@@ -62,7 +62,7 @@ <h4>Options</h4>
                 </section>
 
                 <section id="styling">
-                    <h4>Styling</h4>
+                    <h2>Styling</h2>
                     <p>
                         The mmenu.js plugin uses CSS variables for most of its
                         sizing and styling. The default CSS variables can be
@@ -73,7 +73,7 @@ <h4>Styling</h4>
                 </section>
 
                 <section id="api">
-                    <h4>API</h4>
+                    <h2>API</h2>
                     <p>
                         After the class instance is created, an API is available
                         for the menu. With this API, you can invoke the plugin

dist/addons/counters/mmenu.counters.css

@@ -43,22 +43,23 @@ export default function () {
                 }
             });
         });
+        /** The classnames that can be set to a panel */
+        const classnames = [
+            'mm-panel--iconpanel-first',
+            'mm-panel--iconpanel-0',
+            'mm-panel--iconpanel-1',
+            'mm-panel--iconpanel-2',
+            'mm-panel--iconpanel-3'
+        ];
         //  Show only the main panel.
         if (keepFirst) {
             this.bind('initMenu:after', () => {
                 var _a;
-                (_a = DOM.children(this.node.pnls, '.mm-panel')[0]) === null || _a === void 0 ? void 0 : _a.classList.add('mm-panel--iconpanel-first');
+                (_a = DOM.children(this.node.pnls, '.mm-panel')[0]) === null || _a === void 0 ? void 0 : _a.classList.add(classnames[0]);
             });
             //  Show parent panel(s).
         }
         else {
-            /** The classnames that can be set to a panel */
-            const classnames = [
-                'mm-panel--iconpanel-0',
-                'mm-panel--iconpanel-1',
-                'mm-panel--iconpanel-2',
-                'mm-panel--iconpanel-3'
-            ];
             this.bind('openPanel:after', (panel) => {
                 //  Do nothing when opening a vertical submenu
                 if (panel.parentElement.matches('.mm-listitem--vertical')) {
@@ -82,11 +83,18 @@ export default function () {
             if (options.blockPanel &&
                 !panel.parentElement.matches('.mm-listitem--vertical') &&
                 !DOM.children(panel, '.mm-panel__blocker')[0]) {
-                const blocker = DOM.create('a.mm-panel__blocker');
+                const blocker = DOM.create('a.mm-blocker.mm-panel__blocker');
                 blocker.href = `#${panel.closest('.mm-panel').id}`;
                 blocker.title = this.i18n(this.conf.screenReader.closeSubmenu);
                 panel.prepend(blocker);
             }
         });
+        // Block / unblock
+        this.bind('openPanel:after', (panel) => {
+            DOM.children(this.node.pnls, '.mm-panel').forEach(panel => {
+                const blocker = DOM.children(panel, '.mm-panel__blocker')[0];
+                blocker === null || blocker === void 0 ? void 0 : blocker.classList[panel.matches('.mm-panel--parent') ? 'add' : 'remove']('mm-blocker--blocking');
+            });
+        });
     }
 }

dist/addons/iconpanels/mmenu.iconpanels.css

@@ -220,7 +220,8 @@ const createSearchfield = function (addCancel = false) {
         cancel.textContent = this.i18n('cancel');
         form.append(cancel);
         // Close the search panel.
-        cancel.addEventListener('click', () => {
+        cancel.addEventListener('click', event => {
+            event.preventDefault();
             this.closePanel(DOM.children(this.node.pnls, '.mm-panel--search')[0], false);
         });
     }