Refine mega menu admin and responsive navigation

advancedmegamenu.php

@@ -716,6 +716,10 @@ class AdvancedMegaMenu extends Module implements WidgetInterface
 
         switch ($type) {
             case 'category':
+                if ($customLink !== '') {
+                    return $customLink;
+                }
+
                 return $entityId > 0 ? $this->context->link->getCategoryLink($entityId) : '#';
             case 'cms':
                 if ($entityId <= 0) {

views/css/admin.css

@@ -1,4 +1,16 @@
+.adv-megamenu-admin__intro {
+  margin-bottom: 1.5rem;
+}
+
+.adv-megamenu-admin__intro-rule {
+  color: #8a6d3b;
+}
+
 .adv-megamenu-admin__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
   margin-bottom: 1rem;
 }
 
@@ -7,64 +19,309 @@
   gap: 1rem;
 }
 
-.adv-menu-node {
+.adv-megamenu-admin__empty {
-  border: 1px solid #d9dee3;
+  padding: 2rem;
-  border-radius: 8px;
+  border: 1px dashed #c8d2dc;
-  background: #fff;
+  border-radius: 10px;
+  background: #fafbfd;
+  color: #6c7a89;
+  text-align: center;
 }
 
-.adv-menu-node__header,
+.adv-menu-admin-root-list,
-.adv-menu-layout__header {
+.adv-menu-admin-children-list,
+.adv-menu-admin-layout-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.adv-menu-admin-root-shell {
+  display: grid;
+  gap: 1rem;
+}
+
+.adv-menu-admin-root-tabs {
+  display: flex;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+}
+
+.adv-menu-admin-root-tab {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.9rem 1rem;
+  min-width: 240px;
-  background: #f7f8f9;
+  padding: 0.85rem 1rem;
-  border-bottom: 1px solid #e7eaee;
+  border: 1px solid #d9dee3;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
+  text-align: left;
+  box-shadow: 0 4px 14px rgba(32, 43, 56, 0.04);
 }
 
-.adv-menu-node__body,
+.adv-menu-admin-root-tab.is-active {
-.adv-menu-layout__body {
+  border-color: #5c7c9c;
-  padding: 1rem;
+  background: linear-gradient(135deg, #eef4fa 0%, #dfeaf5 100%);
+  box-shadow: 0 8px 22px rgba(92, 124, 156, 0.18);
 }
 
-.adv-menu-node__grid,
+.adv-menu-admin-root-tab__main {
-.adv-menu-layout__grid {
+  min-width: 0;
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.adv-menu-node__actions,
+.adv-menu-admin-root-tab__title {
-.adv-menu-layout__actions {
+  display: block;
+  font-weight: 600;
+  color: #22303c;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.adv-menu-admin-root-tab__meta {
+  display: block;
+  margin-top: 0.25rem;
+  color: #66788a;
+  font-size: 12px;
+}
+
+.adv-menu-admin-root-tab__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.adv-menu-admin-root-tab__actions .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+}
+
+.adv-menu-admin-root-panel {
+  min-width: 0;
+}
+
+.adv-menu-admin-node {
+  border: 1px solid #d9dee3;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 4px 14px rgba(32, 43, 56, 0.04);
+}
+
+.adv-menu-admin-node--root > .adv-menu-admin-node__header {
+  background: linear-gradient(135deg, #f8fafc 0%, #eef3f8 100%);
+}
+
+.adv-menu-admin-node__header,
+.adv-menu-admin-layout__header {
   display: flex;
-  gap: 0.5rem;
+  justify-content: space-between;
-  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem 1.1rem;
+  border-bottom: 1px solid #edf1f4;
 }
 
-.adv-menu-node__children,
+.adv-menu-admin-node__header-main,
-.adv-menu-node__layouts {
+.adv-menu-admin-layout__header-main {
+  min-width: 0;
+}
+
+.adv-menu-admin-node__title,
+.adv-menu-admin-layout__title {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.adv-menu-admin-node__title-text,
+.adv-menu-admin-layout__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adv-menu-admin-node__meta,
+.adv-menu-admin-layout__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.6rem;
+}
+
+.adv-menu-admin-node__meta-item,
+.adv-menu-admin-layout__meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  background: #f1f5f8;
+  color: #52606d;
+  font-size: 12px;
+}
+
+.adv-menu-admin-node__actions,
+.adv-menu-admin-layout__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.45rem;
+}
+
+.adv-menu-admin-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.adv-menu-admin-node__body,
+.adv-menu-admin-layout__body {
+  padding: 1rem 1.1rem 1.1rem;
+}
+
+.adv-menu-admin-node__summary {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+}
+
+.adv-menu-admin-node__link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #495867;
+  font-size: 13px;
+  word-break: break-all;
+}
+
+.adv-menu-admin-node__image,
+.adv-menu-image-preview {
+  max-width: 140px;
+  border-radius: 8px;
+  border: 1px solid #edf1f4;
+}
+
+.adv-menu-admin-node__collections {
   display: grid;
   gap: 1rem;
   margin-top: 1rem;
 }
 
-.adv-menu-node__children {
+.adv-menu-admin-node__children {
-  padding-left: 1.25rem;
+  padding-left: 1rem;
-  border-left: 2px solid #e7eaee;
+  border-left: 2px solid #edf1f4;
 }
 
-.adv-menu-language {
+.adv-menu-admin-node__children--grid {
-  border: 1px dashed #d9dee3;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-  border-radius: 6px;
+  align-items: start;
-  padding: 0.8rem;
 }
 
-.adv-menu-image-preview {
+.adv-menu-admin-node--compact .adv-menu-admin-node__header {
-  max-width: 180px;
+  padding: 0.8rem 0.9rem;
-  margin-top: 0.6rem;
+}
-  border-radius: 6px;
+
+.adv-menu-admin-node--compact .adv-menu-admin-node__body {
+  padding: 0.85rem 0.9rem 0.9rem;
+}
+
+.adv-menu-admin-node--compact .adv-menu-admin-node__title {
+  font-size: 14px;
+}
+
+.adv-menu-admin-node--compact .adv-menu-admin-node__summary {
+  grid-template-columns: 1fr;
+}
+
+.adv-menu-admin-node--compact .adv-menu-admin-node__actions {
+  gap: 0.35rem;
+}
+
+.adv-menu-admin-node--compact .adv-menu-admin-action {
+  padding-left: 0.45rem;
+  padding-right: 0.45rem;
+}
+
+.adv-menu-admin-node--compact .adv-menu-admin-action span {
+  display: none;
+}
+
+.adv-menu-admin-node--compact .adv-menu-admin-node__meta {
+  gap: 0.35rem;
+}
+
+.adv-menu-admin-node--compact .adv-menu-admin-node__meta-item {
+  font-size: 11px;
+}
+
+.adv-menu-admin-node__section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin: 0 0 0.75rem;
+  color: #2f3d4a;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.adv-menu-admin-layout {
+  border: 1px solid #e3e8ed;
+  border-radius: 8px;
+  background: #fbfcfd;
+}
+
+.adv-megamenu-admin__modal-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.adv-megamenu-admin__checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding-top: 2rem;
+}
+
+.adv-megamenu-admin__checkbox input {
+  margin: 0;
+}
+
+.adv-megamenu-admin__modal-image {
+  margin-top: 1.25rem;
+}
+
+.adv-megamenu-admin__lang-panels {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1.25rem;
+}
+
+.adv-megamenu-admin__lang-panel {
+  border: 1px solid #e3e8ed;
+  border-radius: 8px;
+  padding: 1rem;
+  background: #fcfdff;
+}
+
+.adv-megamenu-admin__lang-panel h5 {
+  margin: 0 0 0.85rem;
+}
+
+.adv-megamenu-admin__lang-grid {
+  display: grid;
+  gap: 1rem;
 }
 
 .adv-menu-products {
@@ -83,6 +340,13 @@
   background: #eef3f7;
 }
 
+.adv-menu-product-chip button {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  line-height: 1;
+}
+
 .adv-menu-product-results {
   margin-top: 0.5rem;
   border: 1px solid #d9dee3;
@@ -104,9 +368,32 @@
   border-top: 1px solid #eef2f5;
 }
 
+.adv-menu-product-results button:hover {
+  background: #f6f9fc;
+}
+
 @media (max-width: 991px) {
-  .adv-menu-node__grid,
+  .adv-menu-admin-node__summary,
-  .adv-menu-layout__grid {
+  .adv-megamenu-admin__modal-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .adv-menu-admin-node__actions,
+  .adv-menu-admin-layout__actions {
+    justify-content: flex-start;
+  }
+
+  .adv-menu-admin-root-tab {
+    min-width: 200px;
+  }
+
+  .adv-menu-admin-node__children--grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767px) {
+  .adv-menu-admin-node__children--grid {
     grid-template-columns: 1fr;
   }
 }

views/css/megamenu.css

@@ -1,4 +1,26 @@
 .adv-megamenu {
+  --adv-root-gap: 0.25rem;
+  --adv-root-link-gap: 0.45rem;
+  --adv-root-link-min-height: 50px;
+  --adv-root-link-padding-x: 0.7rem;
+  --adv-root-font-size: 0.9rem;
+  --adv-panel-inner-gap: 1.25rem;
+  --adv-panel-inner-padding: 1rem;
+  --adv-panel-nav-min: 240px;
+  --adv-panel-nav-max: 280px;
+  --adv-submenu-title-size: 1rem;
+  --adv-rich-intro-gap: 0.9rem;
+  --adv-rich-intro-padding: 0.95rem;
+  --adv-rich-intro-media-width: 180px;
+  --adv-rich-intro-title-size: 1.12rem;
+  --adv-card-title-size: 0.95rem;
+  --adv-card-text-size: 0.88rem;
+  --adv-product-name-size: 0.8rem;
+  --adv-node-card-image-size: 88px;
+  --adv-node-card-body-padding: 0.5rem;
+  --adv-node-card-gap: 0.3rem;
+  --adv-node-card-title-lines: 2;
+  --adv-node-card-text-lines: 3;
   position: relative;
   z-index: 500;
   color: #2d241d;
@@ -19,18 +41,36 @@
 
 .adv-megamenu__desktop {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
   width: auto;
   max-width: 100%;
   color: #2d241d;
   overflow: visible;
 }
 
+.adv-megamenu__brand {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.adv-megamenu__brand img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 50px;
+  max-height: 50px;
+}
+
 .adv-megamenu__root-list {
   width: auto;
   display: flex;
   align-items: stretch;
-  gap: 0.25rem;
+  gap: var(--adv-root-gap);
   flex-wrap: nowrap;
   white-space: nowrap;
   padding: 0 0.25rem;
@@ -45,11 +85,12 @@
 .adv-megamenu .adv-megamenu__root-link:visited {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: var(--adv-root-link-gap);
-  min-height: 58px;
+  min-height: var(--adv-root-link-min-height);
-  padding: 0 1rem;
+  padding: 0 var(--adv-root-link-padding-x);
   color: #2d241d;
   font-weight: 600;
+  font-size: var(--adv-root-font-size);
   text-decoration: none;
   background: transparent;
 }
@@ -99,9 +140,11 @@
 
 .adv-megamenu__panel-inner {
   display: grid;
-  grid-template-columns: minmax(280px, 320px) 1fr;
+  grid-template-columns: minmax(var(--adv-panel-nav-min), var(--adv-panel-nav-max)) 1fr;
-  gap: 2rem;
+  gap: var(--adv-panel-inner-gap);
-  padding: 1.5rem;
+  padding: var(--adv-panel-inner-padding);
+  max-height: calc(100vh - 110px);
+  overflow-y: auto;
   background: #fffdfa;
   color: #2d241d;
   border: 1px solid #ddd3c3;
@@ -165,7 +208,7 @@
 
 .adv-megamenu__submenu-title {
   margin: 0 0 1rem;
-  font-size: 1.1rem;
+  font-size: var(--adv-submenu-title-size);
   font-weight: 700;
   color: #241a13;
 }
@@ -173,16 +216,16 @@
 .adv-megamenu__rich-intro {
   display: flex;
   align-items: flex-start;
-  gap: 1.25rem;
+  gap: var(--adv-rich-intro-gap);
   margin-bottom: 1.5rem;
-  padding: 1.25rem;
+  padding: var(--adv-rich-intro-padding);
   border-radius: 18px;
   background: #f7f1ea;
 }
 
 .adv-megamenu__rich-intro-media {
-  flex: 0 0 220px;
+  flex: 0 0 var(--adv-rich-intro-media-width);
-  max-width: 220px;
+  max-width: var(--adv-rich-intro-media-width);
 }
 
 .adv-megamenu__rich-intro-media img {
@@ -202,12 +245,13 @@
 
 .adv-megamenu__rich-intro-title {
   margin: 0;
-  font-size: 1.35rem;
+  font-size: var(--adv-rich-intro-title-size);
   font-weight: 700;
   color: #241a13;
 }
 
 .adv-megamenu__rich-intro-description {
+  font-size: var(--adv-card-text-size);
   color: #5a4b3f;
   line-height: 1.6;
 }
@@ -226,6 +270,80 @@
   text-decoration: none;
 }
 
+.adv-megamenu__rich-node-row {
+  display: grid;
+  gap: 0.85rem;
+  margin-bottom: 1rem;
+}
+
+.adv-megamenu__rich-node-card {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid #ece4d8;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(45, 36, 29, 0.06);
+}
+
+.adv-megamenu__rich-node-media {
+  flex: 0 0 148px;
+  max-width: 148px;
+}
+
+.adv-megamenu__rich-node-media img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.adv-megamenu__rich-node-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.adv-megamenu__rich-node-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.adv-megamenu .adv-megamenu__rich-node-title a,
+.adv-megamenu .adv-megamenu__rich-node-title a:link,
+.adv-megamenu .adv-megamenu__rich-node-title a:visited {
+  color: #241a13;
+  text-decoration: none;
+}
+
+.adv-megamenu .adv-megamenu__rich-node-title a:hover {
+  color: #8a3c1f;
+}
+
+.adv-megamenu__rich-node-description {
+  color: #5a4b3f;
+  font-size: 0.92rem;
+  line-height: 1.55;
+}
+
+.adv-megamenu .adv-megamenu__rich-node-link,
+.adv-megamenu .adv-megamenu__rich-node-link:link,
+.adv-megamenu .adv-megamenu__rich-node-link:visited {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto;
+  text-decoration: none;
+}
+
 .adv-megamenu .adv-megamenu__submenu-pane,
 .adv-megamenu .adv-megamenu__submenu-pane a,
 .adv-megamenu .adv-megamenu__submenu-pane a:link,
@@ -330,13 +448,14 @@
 
 .adv-megamenu__layout-card .card-title {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: var(--adv-card-title-size);
   font-weight: 700;
   color: #241a13;
 }
 
 .adv-megamenu__layout-card .card-text {
   margin: 0;
+  font-size: var(--adv-card-text-size);
   color: #5a4b3f;
   line-height: 1.5;
 }
@@ -381,7 +500,7 @@
 }
 
 .adv-megamenu__product-name {
-  font-size: 0.9rem;
+  font-size: var(--adv-product-name-size);
   line-height: 1.35;
 }
 
@@ -397,12 +516,11 @@
 .adv-megamenu__toggle {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: center;
-  padding: 0.8rem 1rem;
+  padding: 0;
   border: 0;
-  background: #f3efe8;
+  background: transparent;
-  color: #2d241d;
+  color: inherit;
-  font-weight: 700;
 }
 
 .adv-megamenu__overlay {
@@ -484,6 +602,27 @@
   background: #fffdfa;
 }
 
+.adv-megamenu__mobile-link-row--with-image {
+  grid-template-columns: 112px minmax(0, 1fr) auto;
+  column-gap: 0.75rem;
+}
+
+.adv-megamenu__mobile-thumb {
+  width: 112px;
+  height: 112px;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #ffffff;
+  border: 1px solid #ece4d8;
+}
+
+.adv-megamenu__mobile-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .adv-megamenu .adv-megamenu__mobile-link-row a,
 .adv-megamenu .adv-megamenu__mobile-link-row a:link,
 .adv-megamenu .adv-megamenu__mobile-link-row a:visited {
@@ -492,9 +631,28 @@
 }
 
 @media (max-width: 991px) {
-  .adv-megamenu {
+  #header.header.js-sticky-header {
-    display: block;
+    position: sticky;
+    top: 0;
+    z-index: 1600;
     width: 100%;
+    background-color: inherit;
+  }
+
+  .header-bottom {
+    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.12);
+  }
+
+  .header-bottom__container {
+    position: relative;
+    z-index: 1;
+  }
+
+  .adv-megamenu {
+    display: inline-flex;
+    width: auto;
+    max-width: none;
+    vertical-align: middle;
   }
 
   .adv-megamenu__desktop {
@@ -502,7 +660,48 @@
   }
 
   .adv-megamenu__mobile {
-    display: block;
+    display: flex;
+    flex: 0 0 auto;
+    width: auto;
+    order: 2;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .adv-megamenu__brand--mobile img {
+    max-width: 42px;
+    max-height: 42px;
+  }
+
+  .header-bottom__row > .search__mobile {
+    order: 3;
+  }
+
+  .header-bottom__row > #_mobile_user_info {
+    order: 4;
+  }
+
+  .header-bottom__row > #_mobile_cart {
+    order: 5;
+  }
+
+  .adv-megamenu__toggle.header-block__action-btn {
+    min-height: 100%;
+    padding: 0.5rem;
+  }
+
+  .header-bottom__row > .adv-megamenu,
+  .header-bottom__row > .search__mobile,
+  .header-bottom__row > #_mobile_user_info,
+  .header-bottom__row > #_mobile_cart {
+    align-self: center;
+  }
+
+  .header-bottom__row > .adv-megamenu .header-block__icon,
+  .header-bottom__row > .search__mobile .header-block__icon,
+  .header-bottom__row > #_mobile_user_info .header-block__icon,
+  .header-bottom__row > #_mobile_cart .header-block__icon {
+    line-height: 1;
   }
 
   .adv-megamenu__rich-intro {
@@ -517,20 +716,22 @@
 
 
 .adv-megamenu__node-card-row {
-  row-gap: 1rem;
+  row-gap: 0.5rem;
 }
 
 .adv-megamenu__node-card {
   height: 100%;
   border: 1px solid #ebe2d6;
-  box-shadow: 0 10px 24px rgba(45, 36, 29, 0.08);
+  box-shadow: 0 6px 16px rgba(45, 36, 29, 0.07);
   background: #fffdfa;
 }
 
 .adv-megamenu__node-card .card-img-top {
   display: block;
-  width: 250px;
+  width: var(--adv-node-card-image-size) !important;
-  height: 250px;
+  height: var(--adv-node-card-image-size) !important;
+  min-height: 0 !important;
+  max-height: var(--adv-node-card-image-size) !important;
   max-width: 100%;
   margin: 0 auto;
   object-fit: contain;
@@ -540,7 +741,8 @@
 .adv-megamenu__node-card .card-body {
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
+  gap: var(--adv-node-card-gap);
+  padding: var(--adv-node-card-body-padding) !important;
 }
 
 .adv-megamenu__node-card .card-title,
@@ -550,9 +752,14 @@
 
 .adv-megamenu__node-card .card-title {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--adv-card-title-size);
   font-weight: 700;
   text-align: center;
+  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--adv-node-card-title-lines);
+  overflow: hidden;
 }
 
 .adv-megamenu .adv-megamenu__node-card .card-title a,
@@ -568,7 +775,13 @@
 
 .adv-megamenu__node-card .card-text {
   margin: 0;
+  font-size: var(--adv-card-text-size);
   line-height: 1.45;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--adv-node-card-text-lines);
+  overflow: hidden;
+  text-align: center;
 }
 
 .adv-megamenu__submenu-pane,
@@ -581,3 +794,128 @@
 .adv-megamenu__layout-card .card-text {
   white-space: normal;
 }
+
+@media (min-width: 992px) and (max-width: 1382px) {
+  .adv-megamenu {
+    --adv-root-gap: clamp(0.12rem, 0.08rem + 0.2vw, 0.25rem);
+    --adv-root-link-gap: clamp(0.35rem, 0.22rem + 0.22vw, 0.55rem);
+    --adv-root-link-min-height: clamp(44px, 41px + 0.7vw, 50px);
+    --adv-root-link-padding-x: clamp(0.45rem, 0.15rem + 0.42vw, 0.7rem);
+    --adv-root-font-size: clamp(0.78rem, 0.6rem + 0.28vw, 0.9rem);
+    --adv-panel-inner-gap: clamp(0.85rem, 0.45rem + 0.45vw, 1.25rem);
+    --adv-panel-inner-padding: clamp(0.75rem, 0.45rem + 0.35vw, 1rem);
+    --adv-panel-nav-min: clamp(210px, 17vw, 240px);
+    --adv-panel-nav-max: clamp(225px, 20vw, 280px);
+    --adv-submenu-title-size: clamp(0.9rem, 0.72rem + 0.2vw, 1rem);
+    --adv-rich-intro-gap: clamp(0.7rem, 0.45rem + 0.25vw, 0.9rem);
+    --adv-rich-intro-padding: clamp(0.75rem, 0.45rem + 0.28vw, 0.95rem);
+    --adv-rich-intro-media-width: clamp(140px, 13vw, 180px);
+    --adv-rich-intro-title-size: clamp(0.98rem, 0.8rem + 0.24vw, 1.12rem);
+    --adv-card-title-size: clamp(0.86rem, 0.72rem + 0.2vw, 0.95rem);
+    --adv-card-text-size: clamp(0.78rem, 0.68rem + 0.16vw, 0.88rem);
+    --adv-product-name-size: clamp(0.74rem, 0.66rem + 0.12vw, 0.8rem);
+    --adv-node-card-image-size: clamp(64px, 6vw, 88px);
+    --adv-node-card-body-padding: clamp(0.2rem, 0.15rem + 0.06vw, 0.3rem);
+    --adv-node-card-gap: clamp(0.12rem, 0.1rem + 0.04vw, 0.2rem);
+  }
+
+  .adv-megamenu__panel {
+    width: var(--adv-panel-width, min(1380px, calc(100vw - 1rem)));
+    min-width: var(--adv-panel-width, min(1380px, calc(100vw - 1rem)));
+  }
+
+  .adv-megamenu__manual-tree li.has-submenu > a {
+    padding-bottom: clamp(0.45rem, 0.25rem + 0.25vw, 0.75rem);
+    padding-right: 1.25rem;
+  }
+
+  .adv-megamenu .adv-megamenu__category-tree a,
+  .adv-megamenu .adv-megamenu__category-tree a:link,
+  .adv-megamenu .adv-megamenu__category-tree a:visited,
+  .adv-megamenu .adv-megamenu__manual-tree a,
+  .adv-megamenu .adv-megamenu__manual-tree a:link,
+  .adv-megamenu .adv-megamenu__manual-tree a:visited,
+  .adv-megamenu .adv-megamenu__panel-tree a,
+  .adv-megamenu .adv-megamenu__panel-tree a:link,
+  .adv-megamenu .adv-megamenu__panel-tree a:visited {
+    font-size: clamp(0.76rem, 0.56rem + 0.22vw, 0.95rem);
+  }
+
+  .adv-megamenu__product-link {
+    padding: clamp(0.5rem, 0.3rem + 0.3vw, 0.75rem);
+  }
+
+  .adv-megamenu__products {
+    gap: clamp(0.45rem, 0.2rem + 0.25vw, 0.75rem);
+  }
+
+  .adv-megamenu__node-card .card-text {
+    display: none;
+  }
+
+  .adv-megamenu__node-card {
+    border-radius: 10px;
+  }
+
+  .adv-megamenu__rich-node-card {
+    gap: 0.8rem;
+    padding: 0.85rem;
+  }
+
+  .adv-megamenu__rich-node-media {
+    flex-basis: 120px;
+    max-width: 120px;
+  }
+
+  .adv-megamenu__rich-node-title {
+    font-size: 0.92rem;
+  }
+
+  .adv-megamenu__rich-node-description {
+    font-size: 0.82rem;
+  }
+}
+
+@media (min-width: 1600px) {
+  .adv-megamenu {
+    --adv-card-title-size: 1rem;
+    --adv-card-text-size: 0.92rem;
+    --adv-root-link-gap: 0.55rem;
+    --adv-root-link-min-height: 58px;
+    --adv-root-link-padding-x: 1rem;
+    --adv-root-font-size: 1rem;
+    --adv-panel-inner-gap: 2rem;
+    --adv-panel-inner-padding: 1.5rem;
+    --adv-panel-nav-min: 280px;
+    --adv-panel-nav-max: 320px;
+    --adv-submenu-title-size: 1.1rem;
+    --adv-rich-intro-gap: 1.25rem;
+    --adv-rich-intro-padding: 1.25rem;
+    --adv-rich-intro-media-width: 220px;
+    --adv-rich-intro-title-size: 1.35rem;
+    --adv-product-name-size: 0.9rem;
+    --adv-node-card-image-size: 150px;
+    --adv-node-card-body-padding: 0.55rem;
+    --adv-node-card-gap: 0.35rem;
+  }
+
+  .adv-megamenu__node-card .card-text {
+    display: none;
+  }
+
+  .adv-megamenu__rich-node-media {
+    flex-basis: 150px;
+    max-width: 150px;
+  }
+}
+
+@media (max-width: 991px) {
+  .adv-megamenu__rich-node-card {
+    flex-direction: column;
+  }
+
+  .adv-megamenu__rich-node-media {
+    flex-basis: auto;
+    max-width: 100%;
+  }
+}

views/js/megamenu.js

@@ -163,7 +163,7 @@
 
       window.clearTimeout(hoverTimers.get(item));
       var timer = window.setTimeout(function () {
-        closeUnlockedPanels(item);
+        closeAllPanels(item);
         positionBridgeForItem(item);
         activateFirstSubmenuPane(item);
         item.classList.add('is-open');

views/templates/admin/configure.tpl

@@ -7,6 +7,55 @@
 >
   <script type="application/json" class="js-adv-tree-data">{$advmegamenu_tree|json_encode nofilter}</script>
   <script type="application/json" class="js-adv-languages-data">{$advmegamenu_languages|json_encode nofilter}</script>
+  <script type="application/json" class="js-adv-i18n">{
+    "builderTitle": "{l s='Mega menu builder' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "builderHelp": "{l s='Manage the menu like on the storefront: quick actions on cards, editing in Bootstrap modals, and automatic sprite/front cache regeneration on save.' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "rootRule": "{l s='First level only stores title and custom link. Description and item image are disabled there by design.' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "addRoot": "{l s='Add root item' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "saveMenu": "{l s='Save mega menu' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "menuItem": "{l s='Menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "rootItem": "{l s='Root item' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "childItem": "{l s='Child item' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "inactive": "{l s='Inactive' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "newWindow": "{l s='New window' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "openLink": "{l s='Custom link' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "edit": "{l s='Edit' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "delete": "{l s='Delete' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "addChild": "{l s='Add child' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "addBlock": "{l s='Add block' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "block": "{l s='Block' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "blocks": "{l s='blocks' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "children": "{l s='children' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "emptyTree": "{l s='No menu items yet. Add the first root item to start building the mega menu.' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "nodeModalTitle": "{l s='Edit menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "layoutModalTitle": "{l s='Edit rich content block' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "deleteNodeTitle": "{l s='Delete menu item' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "deleteLayoutTitle": "{l s='Delete rich block' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "deleteNodeText": "{l s='This will remove the selected menu item together with its children and attached blocks.' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "deleteLayoutText": "{l s='This will remove the selected rich content block.' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "cancel": "{l s='Cancel' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "save": "{l s='Save' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "confirmDelete": "{l s='Delete' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "type": "{l s='Type' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "entityId": "{l s='Entity ID' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "active": "{l s='Active' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "title": "{l s='Title' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "description": "{l s='Description' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "customLinkLabel": "{l s='Custom link' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "iconUpload": "{l s='Item image/icon' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "rootOnlyHint": "{l s='For first-level items only title and custom link are edited here.' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "width": "{l s='Width' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "blockType": "{l s='Block type' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "showTitle": "{l s='Show title' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "backgroundColor": "{l s='Background color' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "imageUpload": "{l s='Block image' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "productSearch": "{l s='Product search' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "productSearchPlaceholder": "{l s='Search product by name, reference or ID' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "promo": "{l s='Promo' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "products": "{l s='Products' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "noProducts": "{l s='No products attached.' d='Modules.Advancedmegamenu.Admin' js=1}",
+    "langLabel": "{l s='Language' d='Modules.Advancedmegamenu.Admin' js=1}"
+  }</script>
   <form method="post" action="" class="defaultForm form-horizontal">
     <input type="hidden" name="advmegamenu_tree_json" id="advmegamenu_tree_json" value="" />
 
@@ -16,9 +65,14 @@
         {l s='Mega menu builder' d='Modules.Advancedmegamenu.Admin'}
       </div>
 
-      <p class="help-block">
+      <div class="adv-megamenu-admin__intro">
-        {l s='Build the navigation tree, attach promo blocks and products, then save to regenerate the sprite and front cache.' d='Modules.Advancedmegamenu.Admin'}
+        <p class="help-block">
-      </p>
+          {l s='Manage the menu like on the storefront: quick actions on cards, editing in Bootstrap modals, and automatic sprite/front cache regeneration on save.' d='Modules.Advancedmegamenu.Admin'}
+        </p>
+        <p class="help-block adv-megamenu-admin__intro-rule">
+          {l s='First level only stores title and custom link. Description and item image are disabled there by design.' d='Modules.Advancedmegamenu.Admin'}
+        </p>
+      </div>
 
       <div class="adv-megamenu-admin__toolbar">
         <button type="button" class="btn btn-default js-add-root-node">
@@ -39,4 +93,134 @@
       </div>
     </div>
   </form>
+
+  <div class="modal fade" id="advNodeModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
+            <span aria-hidden="true">&times;</span>
+          </button>
+          <h4 class="modal-title js-node-modal-title">{l s='Edit menu item' d='Modules.Advancedmegamenu.Admin'}</h4>
+        </div>
+        <div class="modal-body">
+          <div class="alert alert-info js-node-root-hint" style="display:none;"></div>
+          <div class="adv-megamenu-admin__modal-grid">
+            <label class="form-group">
+              <span>{l s='Type' d='Modules.Advancedmegamenu.Admin'}</span>
+              <select class="form-control js-node-type">
+                <option value="category">category</option>
+                <option value="cms">cms</option>
+                <option value="link">link</option>
+                <option value="rich_content">rich_content</option>
+              </select>
+            </label>
+            <label class="form-group">
+              <span>{l s='Entity ID' d='Modules.Advancedmegamenu.Admin'}</span>
+              <input type="number" class="form-control js-node-entity-id" min="0">
+            </label>
+            <label class="form-group adv-megamenu-admin__checkbox">
+              <input type="checkbox" class="js-node-active">
+              <span>{l s='Active' d='Modules.Advancedmegamenu.Admin'}</span>
+            </label>
+            <label class="form-group adv-megamenu-admin__checkbox">
+              <input type="checkbox" class="js-node-new-window">
+              <span>{l s='New window' d='Modules.Advancedmegamenu.Admin'}</span>
+            </label>
+          </div>
+
+          <div class="adv-megamenu-admin__modal-image js-node-image-group">
+            <label class="form-group">
+              <span>{l s='Item image/icon' d='Modules.Advancedmegamenu.Admin'}</span>
+              <input type="file" class="form-control js-node-icon-upload" accept="image/*">
+            </label>
+            <div class="js-node-icon-preview"></div>
+          </div>
+
+          <div class="adv-megamenu-admin__lang-panels js-node-languages"></div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
+          <button type="button" class="btn btn-primary js-save-node">{l s='Save' d='Modules.Advancedmegamenu.Admin'}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="advLayoutModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
+            <span aria-hidden="true">&times;</span>
+          </button>
+          <h4 class="modal-title">{l s='Edit rich content block' d='Modules.Advancedmegamenu.Admin'}</h4>
+        </div>
+        <div class="modal-body">
+          <div class="adv-megamenu-admin__modal-grid">
+            <label class="form-group">
+              <span>{l s='Width' d='Modules.Advancedmegamenu.Admin'}</span>
+              <input type="number" class="form-control js-layout-width" min="1" max="12">
+            </label>
+            <label class="form-group">
+              <span>{l s='Block type' d='Modules.Advancedmegamenu.Admin'}</span>
+              <select class="form-control js-layout-type">
+                <option value="promo">{l s='Promo' d='Modules.Advancedmegamenu.Admin'}</option>
+                <option value="products">{l s='Products' d='Modules.Advancedmegamenu.Admin'}</option>
+              </select>
+            </label>
+            <label class="form-group adv-megamenu-admin__checkbox">
+              <input type="checkbox" class="js-layout-title">
+              <span>{l s='Show title' d='Modules.Advancedmegamenu.Admin'}</span>
+            </label>
+            <label class="form-group">
+              <span>{l s='Background color' d='Modules.Advancedmegamenu.Admin'}</span>
+              <input type="text" class="form-control js-layout-bg" placeholder="#f3efe8">
+            </label>
+          </div>
+
+          <div class="adv-megamenu-admin__modal-image">
+            <label class="form-group">
+              <span>{l s='Block image' d='Modules.Advancedmegamenu.Admin'}</span>
+              <input type="file" class="form-control js-layout-upload" accept="image/*">
+            </label>
+            <div class="js-layout-preview"></div>
+          </div>
+
+          <div class="form-group">
+            <label>
+              <span>{l s='Product search' d='Modules.Advancedmegamenu.Admin'}</span>
+              <input type="text" class="form-control js-layout-product-search" placeholder="{l s='Search product by name, reference or ID' d='Modules.Advancedmegamenu.Admin'}">
+            </label>
+          </div>
+          <div class="adv-menu-product-results js-layout-product-results"></div>
+          <div class="adv-menu-products js-layout-products"></div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
+          <button type="button" class="btn btn-primary js-save-layout">{l s='Save' d='Modules.Advancedmegamenu.Admin'}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="advConfirmModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Admin.Actions'}">
+            <span aria-hidden="true">&times;</span>
+          </button>
+          <h4 class="modal-title js-confirm-title">{l s='Delete menu item' d='Modules.Advancedmegamenu.Admin'}</h4>
+        </div>
+        <div class="modal-body">
+          <p class="js-confirm-text"></p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">{l s='Cancel' d='Modules.Advancedmegamenu.Admin'}</button>
+          <button type="button" class="btn btn-danger js-confirm-action">{l s='Delete' d='Modules.Advancedmegamenu.Admin'}</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

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">
+    {if isset($shop.logo_details.src) && $shop.logo_details.src}
-      <span class="material-icons" aria-hidden="true">menu</span>
+      <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'}">
-      <span>{l s='Menu' d='Modules.Advancedmegamenu.Shop'}</span>
+        <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>