Add menu tu wagabunda

wagabunda.net.pl/custom.js

@@ -92,3 +92,97 @@ const firstRow = mainHeader.querySelector('.row.sortable-row')
 if (firstRow) {
 	firstRow.outerHTML = header_html
 }
+
+// MARK: hamburger menu
+(function () {
+  const menuList = document.querySelector('nav.main-nav ul.mega-menu-content');
+
+  if (!menuList) return;
+
+  menuList.insertAdjacentHTML('beforebegin', `
+    <div class="mega-menu-hamburger">
+      <button class="mega-menu-hamburger-btn" aria-expanded="true" aria-controls="mega-menu-list">
+        <span></span>
+      </button>
+    </div>
+  `);
+
+  menuList.id = menuList.id || 'mega-menu-list';
+
+  const hamburgerBtn = document.querySelector('.mega-menu-hamburger-btn');
+
+  function slideUp(element, duration = 300) {
+    element.style.height = element.offsetHeight + 'px';
+    element.offsetHeight;
+    element.style.transitionProperty = 'height, margin, padding';
+    element.style.transitionDuration = duration + 'ms';
+    element.style.overflow = 'hidden';
+    element.style.height = '0';
+    element.style.paddingTop = '0';
+    element.style.paddingBottom = '0';
+    element.style.marginTop = '0';
+    element.style.marginBottom = '0';
+
+    window.setTimeout(function () {
+      element.style.display = 'none';
+      element.style.removeProperty('height');
+      element.style.removeProperty('padding-top');
+      element.style.removeProperty('padding-bottom');
+      element.style.removeProperty('margin-top');
+      element.style.removeProperty('margin-bottom');
+      element.style.removeProperty('overflow');
+      element.style.removeProperty('transition-duration');
+      element.style.removeProperty('transition-property');
+    }, duration);
+  }
+
+  function slideDown(element, duration = 300) {
+    element.style.removeProperty('display');
+    let display = window.getComputedStyle(element).display;
+    if (display === 'none') display = 'flex';
+    element.style.display = display;
+
+    const height = element.scrollHeight;
+    element.style.overflow = 'hidden';
+    element.style.height = '0';
+    element.style.paddingTop = '0';
+    element.style.paddingBottom = '0';
+    element.style.marginTop = '0';
+    element.style.marginBottom = '0';
+    element.offsetHeight;
+
+    element.style.transitionProperty = 'height, margin, padding';
+    element.style.transitionDuration = duration + 'ms';
+    element.style.height = height + 'px';
+
+    window.setTimeout(function () {
+      element.style.removeProperty('height');
+      element.style.removeProperty('overflow');
+      element.style.removeProperty('transition-duration');
+      element.style.removeProperty('transition-property');
+      element.style.removeProperty('padding-top');
+      element.style.removeProperty('padding-bottom');
+      element.style.removeProperty('margin-top');
+      element.style.removeProperty('margin-bottom');
+    }, duration);
+  }
+
+  function slideToggle(element, duration = 300) {
+    if (window.getComputedStyle(element).display === 'none') {
+      slideDown(element, duration);
+    } else {
+      slideUp(element, duration);
+    }
+  }
+
+  if (hamburgerBtn) {
+    hamburgerBtn.addEventListener('click', function () {
+      hamburgerBtn.classList.toggle('active');
+
+      const isExpanded = hamburgerBtn.classList.contains('active');
+      hamburgerBtn.setAttribute('aria-expanded', String(isExpanded));
+
+      slideToggle(menuList, 250);
+    });
+  }
+})();

wagabunda.net.pl/styles.scss

@@ -349,10 +349,23 @@ body nav.main-nav {
 		display: block !important;
 	}
 
+	@media (max-width: 500px) {
+		.additional-separator {
+			display: none !important;
+		}
+		.header-container {
+			min-height: 36px;
+		}
+	}
 	ul.mega-menu-content {
 		padding-left: 15px;
 		padding-right: 15px;
 
+		@media (max-width: 500px) {
+			display: none;
+			flex-direction: column;
+		}
+
 		> li {
 			.btn-cart,
 			.quick-search {
@@ -361,11 +374,20 @@ body nav.main-nav {
 
 			> a {
 				padding: 13px 14px 14px;
+
+				@media (max-width: 500px) {
+					padding: 5px;
+					min-height: auto !important;
+					text-align: center;
+				}
 			}
 
 			.elem-in-nav {
 				span {
 					font-size: 16px;
+					@media (max-width: 500px) {
+						font-size: 14px;
+					}
 				}
 			}
 
@@ -439,6 +461,28 @@ body nav.main-nav {
 				}
 			}
 
+			&.mm-basket-li {
+				> .btn-cart {
+					@media (max-width: 500px) {
+						margin: 0 auto;
+					}
+				}
+			}
+			&.pull-left {
+				> .quick-search {
+					@media (max-width: 500px) {
+						margin: 0 auto;
+					}
+				}
+				@media (max-width: 500px) {
+					&.visible-panel {
+						.quick-search {
+							bottom: 0;
+						}
+					}
+				}
+			}
+
 			@media (max-width: 820px) {
 				.mobile-menu-item.sub-menu.full-width-sub-menu {
 					width: calc(100% - 30px) !important;
@@ -474,6 +518,9 @@ body nav.main-nav {
 					}
 				}
 			}
+			@media (max-width: 500px) {
+				width: 100%;
+			}
 		}
 	}
 
@@ -486,6 +533,74 @@ body nav.main-nav {
 			}
 		}
 	}
+
+	.mega-menu-hamburger {
+		position: relative;
+		padding: 10px 15px;
+		line-height: 0;
+		text-align: center;
+
+		@media (min-width: 501px) {
+			display: none;
+		}
+
+		.mega-menu-hamburger-btn {
+			position: relative;
+			border: none;
+			width: 36px;
+			height: 36px;
+			background: #fff;
+			padding: 0;
+			margin: 0;
+			border-radius: 3px;
+			overflow: hidden;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 8px;
+				left: 5px;
+				width: 25px;
+				height: 2px;
+				background: $cBlue;
+				transition: all 250ms ease-in-out;
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				top: 26px;
+				left: 5px;
+				width: 25px;
+				height: 2px;
+				background: $cBlue;
+				transition: all 250ms ease-in-out;
+			}
+
+			&.active {
+				&::before {
+					top: 18px;
+					transform: rotate(-45deg);
+				}
+				&::after {
+					top: 18px;
+					transform: rotate(45deg);
+				}
+				span {
+					transform: translateX(calc(100% + 10px));
+				}
+			}
+
+			span {
+				position: absolute;
+				top: 17px;
+				left: 5px;
+				width: 25px;
+				height: 2px;
+				background: $cBlue;
+				transition: all 250ms ease-in-out;
+			}
+		}
+	}
 }
 #widget197464156 {
 	.promo-box {