add submenus

layout/_partial/header.swig

@@ -5,18 +5,50 @@
 <nav class="site-navbar">
   {%- if theme.menu -%}
     <ul id="menu" class="menu">
-      {%- for name, path in theme.menu -%}
-        <li class="menu-item">
-          <a class="menu-item-link" href="{{ url_for(path) }}">
-            {%- set itemName = __('menu.' + name.toLowerCase()) -%}
-            {%- if itemName.startsWith('menu') -%}
-              {{ name }}
-            {%- else -%}
-              {{ itemName }}
-            {%- endif -%}
-          </a>
-        </li>
-      {%- endfor -%}
+    {%- for name, obj in theme.menu -%}
+      <li class="menu-item">
+        <a id="menu-{{ name }}" class="menu-item-link" href="{{ url_for(theme.menu[name].path) }}">
+          {%- set itemName = __('menu.' + name.toLowerCase()) -%}
+          {%- if itemName.startsWith('menu') -%}
+            {{ name }}
+          {%- else -%}
+            {{ itemName }}
+          {%- endif -%}
+        </a>
+
+      {%- if theme.menu[name].submenus -%}
+        <script>
+          $("#menu-{{ name }}").click(function(){
+            iziToast.question({
+			    timeout: 20000,
+			    close: false,
+			    overlay: true,
+			    displayMode: 'once',
+			    //id: 'question',
+			    zindex: 999,
+			    title: '{{ name }}',
+			    message: '',
+			    position: 'center',
+			    buttons: [
+			    {%- for subname, subobj in theme.menu[name].submenus -%}
+                	['<button><b>{{ subname }}</b></button>', function (instance, toast) {
+			 
+			            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
+			 			pjax.loadUrl("{{ url_for(theme.menu[name].submenus[subname].path) }}");
+			        }, true],
+			    {%- endfor -%}
+			    ['<button><b>close</b></button>', function (instance, toast) {
+			
+			            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
+			        }, true],
+			    ]
+			});
+          });
+        </script>
+      {%- endif -%}
+      </li>
+    {%- endfor -%}
+ 
     </ul>
   {%- endif -%}
 </nav>

layout/_partial/slideout.swig

@@ -14,8 +14,9 @@
 
 <nav id="mobile-menu" class="mobile-menu slideout-menu">
   <ul class="mobile-menu-list">
-    {%- for name, path in theme.menu -%}
-      <a href="{{ url_for(path) }}">
+    {%- for name, obj in theme.menu -%}
+     <div id="mobile-menu-{{ name }}">
+      <a href="{{ url_for(theme.menu[name].path) }}">
         <li class="mobile-menu-item">
           {%- set itemName = __('menu.' + name.toLowerCase()) -%}
           {%- if itemName.startsWith('menu') -%}
@@ -25,6 +26,21 @@
           {%- endif -%}
         </li>
       </a>
+      {%- if theme.menu[name].submenus -%}
+        <ul class="sub-menu" style="display: none;"> 
+          {%- for subname, subobj in theme.menu[name].submenus -%}
+            <li>
+              <a href="{{ url_for(theme.menu[name].submenus[subname].path) }}">
+                {{ subname }} 
+              </a>
+            </li>
+          {%- endfor -%}
+        </ul>
+      <script>$('#mobile-menu-{{ name }}').click(function(){
+          $("#mobile-menu-{{ name }} ul").toggle();
+      })</script>
+      {%- endif -%}
+     </div>
     {%- endfor -%}
   </ul>
 </nav>

layout/_script/pjax.swig

@@ -1,7 +1,7 @@
 {%- if theme.pjax.enable -%}
 <script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
 <script>
-  new Pjax({
+  window.pjax = new Pjax({
     elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"])',
     selectors: ["head title, #main", "#footer"],
   });