Refine mega menu admin and responsive navigation

views/templates/hook/megamenu.tpl

@@ -32,7 +32,7 @@
   {if $nodes|count}
     <div class="row adv-megamenu__node-card-row">
       {foreach from=$nodes item=treeNode}
-        <div class="col-xl-3 col-lg-4 col-sm-6">
+        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
           <article class="card adv-megamenu__node-card">
             {if $treeNode.icon_url}
               <img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" class="card-img-top" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
@@ -64,6 +64,35 @@
   {/if}
 {/function}
 
+{function name=advRichContentCards nodes=[]}
+  {if $nodes|count}
+    <div class="adv-megamenu__rich-node-row">
+      {foreach from=$nodes item=treeNode}
+        <article class="card adv-megamenu__rich-node-card">
+          {if $treeNode.icon_url}
+            <div class="adv-megamenu__rich-node-media">
+              <img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
+            </div>
+          {/if}
+          <div class="adv-megamenu__rich-node-body">
+            <h3 class="adv-megamenu__rich-node-title">
+              <a href="{$treeNode.url|escape:'htmlall':'UTF-8'}" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>{$treeNode.title|escape:'htmlall':'UTF-8'}</a>
+            </h3>
+            {if $treeNode.description}
+              <div class="adv-megamenu__rich-node-description">{$treeNode.description|escape:'htmlall':'UTF-8'}</div>
+            {/if}
+            {if $treeNode.custom_link}
+              <a href="{$treeNode.custom_link|escape:'htmlall':'UTF-8'}" class="adv-megamenu__rich-node-link btn btn-primary" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>
+                {l s='Zobacz wszystko' d='Modules.Advancedmegamenu.Shop'}
+              </a>
+            {/if}
+          </div>
+        </article>
+      {/foreach}
+    </div>
+  {/if}
+{/function}
+
 {function name=advRichContentIntro node=[]}
   {if $node.type == 'rich_content'}
     <article class="adv-megamenu__rich-intro">
@@ -132,7 +161,7 @@
   {/if}
 {/function}
 
-{function name=advMobilePanels nodes=[]}
+{function name=advMobilePanels nodes=[] depth=0}
   {foreach from=$nodes item=node}
     {assign var=panelId value="adv-panel-"|cat:$node.id}
     {if $node.children|count || $node.category_branch|count || $node.layouts|count || $node.type == 'rich_content'}
@@ -151,7 +180,12 @@
           {/foreach}
           {foreach from=$node.children item=child}
             <li>
-              <div class="adv-megamenu__mobile-link-row">
+              <div class="adv-megamenu__mobile-link-row{if $depth == 1 && $child.icon_url} adv-megamenu__mobile-link-row--with-image{/if}">
+                {if $depth == 1 && $child.icon_url}
+                  <div class="adv-megamenu__mobile-thumb">
+                    <img src="{$child.icon_url|escape:'htmlall':'UTF-8'}" alt="{$child.title|escape:'htmlall':'UTF-8'}" loading="lazy">
+                  </div>
+                {/if}
                 <a href="{$child.url|escape:'htmlall':'UTF-8'}" {if $child.new_window}target="_blank" rel="noopener"{/if}>{$child.title|escape:'htmlall':'UTF-8'}</a>
                 {if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
                   <button type="button" class="js-adv-open-panel" data-target="adv-panel-{$child.id}">›</button>
@@ -161,13 +195,24 @@
           {/foreach}
         </ul>
       </section>
-      {advMobilePanels nodes=$node.children}
+      {advMobilePanels nodes=$node.children depth=$depth+1}
     {/if}
   {/foreach}
 {/function}
 
 <nav class="adv-megamenu" aria-label="{l s='Main navigation' d='Modules.Advancedmegamenu.Shop'}">
   <div class="adv-megamenu__desktop hidden-sm-down">
+    {if isset($shop.logo_details.src) && $shop.logo_details.src}
+      <a class="adv-megamenu__brand" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
+        <img
+          src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
+          alt="{$shop.name|escape:'htmlall':'UTF-8'}"
+          width="{$shop.logo_details.width|intval}"
+          height="{$shop.logo_details.height|intval}"
+          loading="eager"
+        >
+      </a>
+    {/if}
     <ul class="adv-megamenu__root-list">
       {foreach from=$menu.children item=node}
         {if $node.active}
@@ -220,7 +265,13 @@
                                   {advPanelTree nodes=$child.category_branch}
                                 {/if}
                                 {if $child.children|count}
-                                  {advNodeCardsByType nodes=$child.children type='rich_content'}
+                                  {assign var=richContentNodes value=[]}
+                                  {foreach from=$child.children item=grandChild}
+                                    {if $grandChild.type == 'rich_content'}
+                                      {append var='richContentNodes' value=$grandChild}
+                                    {/if}
+                                  {/foreach}
+                                  {advRichContentCards nodes=$richContentNodes}
                                   {advNodeCardsByType nodes=$child.children type='category'}
                                   {advNodeCardsByType nodes=$child.children type='cms'}
                                   {advNodeCardsByType nodes=$child.children type='link'}
@@ -249,9 +300,19 @@
   </div>
 
   <div class="adv-megamenu__mobile hidden-md-up">
-    <button type="button" class="adv-megamenu__toggle js-adv-menu-toggle" aria-expanded="false">
-      <span class="material-icons" aria-hidden="true">menu</span>
-      <span>{l s='Menu' d='Modules.Advancedmegamenu.Shop'}</span>
+    {if isset($shop.logo_details.src) && $shop.logo_details.src}
+      <a class="adv-megamenu__brand adv-megamenu__brand--mobile" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
+        <img
+          src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
+          alt="{$shop.name|escape:'htmlall':'UTF-8'}"
+          width="{$shop.logo_details.width|intval}"
+          height="{$shop.logo_details.height|intval}"
+          loading="eager"
+        >
+      </a>
+    {/if}
+    <button type="button" class="adv-megamenu__toggle js-adv-menu-toggle header-block__action-btn" aria-expanded="false" aria-label="{l s='Open menu' d='Modules.Advancedmegamenu.Shop'}">
+      <span class="material-icons header-block__icon" aria-hidden="true">menu</span>
     </button>
 
     <div class="adv-megamenu__overlay js-adv-overlay">
@@ -278,7 +339,7 @@
               {/foreach}
             </ul>
           </section>
-          {advMobilePanels nodes=$menu.children}
+          {advMobilePanels nodes=$menu.children depth=0}
         </div>
       </div>
     </div>