mmenu

package.json

@@ -62,7 +62,7 @@
     "inputmask": "^5.0.7",
     "jquery": "^3.6.1",
     "just-validate": "^3.8.1",
-    "mmenu-js": "^9.2.0",
+    "mmenu-js": "^9.2.2",
     "rellax": "^1.12.1",
     "simplebar": "^5.3.9",
     "smooth-scroll": "^16.1.3",

src/js/_components.js

@@ -7,9 +7,13 @@ import productSwiper from './components/productswiper';
 import brandSwiper from './components/brandswiper';
 import scrolling from './components/scrolling';
 import showMoreBtn from './components/show-more';
+import mobileMenu from './components/mobmenu';
 import './components/validation';
 import './components/modals';
 
+
+
+
 window.addEventListener('DOMContentLoaded', () => {
   'use strict';
 
@@ -22,6 +26,7 @@ window.addEventListener('DOMContentLoaded', () => {
   brandSwiper();
   scrolling('.pageup');
   showMoreBtn();
+  mobileMenu();
 
   /** Current year */
   document.querySelector('#year').innerHTML = new Date().getFullYear();

src/js/components/mobmenu.js

@@ -0,0 +1,35 @@
+import Mmenu from '../../../node_modules/mmenu-js/src/mmenu';
+
+const mobileMenu = () => {
+  const button = document.querySelector('.burger-btn');
+  const mMenu = new Mmenu('#mobmenu', {
+    offCanvas: {
+      position: 'top',
+    },
+    theme: 'white',
+    navbar: {
+      title: 'Menu',
+    },
+    navbars: [
+      {
+        position: 'top',
+        content: [
+          '<a class="mm-btn--close" aria-label="Close menu" href="#mm-8"><svg class="burger-btn burger-btn--inMmenu active" width="16" height="16" viewBox="0 0 40 26" xmlns="https://www.w3.org/2000/svg"><rect class="burger-btn--1" width="40" height="6" rx="3" ry="3" /><rect class="burger-btn--2" width="40" height="6" y="10" rx="3" ry="3" /><rect class="burger-btn--3" width="40" height="6" y="20" rx="3" ry="3" /></svg></a>',
+        ],
+      },
+    ],
+  });
+
+  let spanLogo = document.createElement('span');
+  spanLogo.classList.add('span-logo');
+  spanLogo.innerHTML = `<img loading="lazy" src="/img/logo-white-mob.svg" class="image" width="40" height="40" alt="Cametet">`;
+
+  document.querySelector('.mm-navbar__title').append(spanLogo);
+
+  // button.addEventListener('click', () => {
+  //   button.classList.toggle('active');
+  // });
+
+};
+
+export default mobileMenu;

src/js/components/validation.js

@@ -57,6 +57,65 @@ const rules = [
       }
     ]
   },
+];
+
+const rulesModal = [
+  {
+    ruleSelector: '.input-name',
+    rules: [
+      {
+        rule: 'minLength',
+        value: 3
+      },
+      {
+        rule: 'maxLength',
+        value: 30,
+      },
+      {
+        rule: 'required',
+        errorMessage: 'Field is required'
+      },
+    ]
+  },
+  {
+    ruleSelector: '.input-email',
+    rules: [
+      {
+        rule: 'required',
+        errorMessage: 'Email is required',
+      },
+      {
+        rule: 'email',
+        errorMessage: 'Email is invalid!',
+      }
+    ]
+  },
+  {
+    ruleSelector: '.input-company',
+    rules: [
+      {
+        rule: 'minLength',
+        value: 3
+      },
+      {
+        rule: 'maxLength',
+        value: 30,
+      },
+      {
+        rule: 'required',
+        errorMessage: 'Field is required'
+      }
+    ]
+  },
+  {
+    ruleSelector: '.input-message',
+    rules: [
+      {
+        rule: 'required',
+        errorMessage: 'Field is required'
+      }
+    ]
+  },
   {
     ruleSelector: '.input-tel',
     tel: true,
@@ -70,21 +129,6 @@ const rules = [
   },
 ];
 
-// const rules2 = [
-//   {
-//     ruleSelector: '.input-tel',
-//     tel: true,
-//     telError: 'Введіть правильний телефон',
-//     rules: [
-//       {
-//         rule: 'required',
-//         value: true,
-//         errorMessage: 'Заповніть телефон'
-//       }
-//     ]
-//   },
-// ];
-
 
 const afterForm = () => {
   // console.log('Произошла отправка, тут можно писать любые действия');
@@ -94,5 +138,8 @@ const afterForm = () => {
 if (document.querySelector('#contact__form')) {
   validateForms('#contact__form', rules, afterForm);
 }
+if (document.querySelector('#contact__form--modal')) {
+  validateForms('#contact__form--modal', rulesModal, afterForm);
+}
 
 // validateForms('#modal-callback form', rules2, afterForm);

src/partials/card.html

@@ -152,53 +152,3 @@ <h2 class="h2">(2HC - 4060) - Multi-wedge belt 0227353</h2>
       </div>
 
 </section>
-
-
-<!-- modal -->
-<div id="contact-modal" class="graph-modal contact-modal">
-  <div class="graph-modal__container" role="dialog" aria-modal="true" data-graph-target="contactModal">
-    <button class="btn-reset js-modal-close graph-modal__close" aria-label="Закрыть модальное окно"></button>
-    <div class="graph-modal__content">
-      <div class="contact__head">
-        <h2 class="h2">
-          <img loading="lazy" src="/img/logo-solo.svg" class="image" width="56" height="56" alt="Cemetet">
-          <span>ЗАДАЙТЕ ПИТАННЯ</span>
-        </h2>
-        <div class="h-sub">Ми&nbsp;постараємося відповісти максимально швидко</div>
-      </div>
-      <div class="contact__content">
-        <form action="" method="POST" class="contact__form" id="contact__form">
-
-          <label class="form-label">
-            <span>ім’я+прізвище</span>
-            <input class="input-reset input input-name" type="text" name="name" placeholder="...">
-          </label>
-          <label class="form-label">
-            <span>Введите phone</span>
-            <input class="input-reset input input-tel" type="tel" name="phone" placeholder="...">
-          </label>
-          <label class="form-label">
-            <span>Введите email</span>
-            <input class="input-reset input input-email" type="email" name="email" placeholder="...">
-          </label>
-          <label class="form-label">
-            <span>компанія</span>
-            <input class="input-reset input input-company" type="text" name="company" placeholder="...">
-          </label>
-          <label class="form-label">
-            <span>ваше питання</span>
-            <textarea class="input-reset input input-message" type="text" name="message" placeholder="..."></textarea>
-          </label>
-
-          <div class="form-btn">
-            <button class="btn-reset btn white-bg wiggle-anime" type="submit">
-              <span>Надіслати</span>
-              <img loading="lazy" src="/img/ico-send.svg" class="image ml-8" width="24" height="24" alt="Cametet">
-            </button>
-          </div>
-
-        </form>
-      </div>
-    </div>
-  </div>
-</div>

src/partials/header.html

@@ -1,12 +1,27 @@
 <header class="header animated faster fadeIn" id="header">
   <div class="header__inner">
     <div class="container">
+
       <div class="header__top">
 
         <div class="header__box">
-          <a href="/" class="header__logo">
+          <a href="/" class="header__logo header__logo--desk">
             <img loading="lazy" src="/img/logo.svg" class="image" width="213" height="56" alt="Cametet">
           </a>
+          <a href="/" class="header__logo header__logo--mobile">
+            <img loading="lazy" src="/img/logo-mobile.svg" class="image" width="40" height="40" alt="Cametet">
+          </a>
+
+          <a href="#mobmenu" id="openMobMenu">
+            <svg class="burger-btn" width="30" height="30" viewBox="0 0 40 26"
+              xmlns="http://www.w3.org/2000/svg">
+              <rect class="burger-btn--1" width="40" height="6" rx="3" ry="3" />
+              <rect class="burger-btn--2" width="40" height="6" y="10" rx="3" ry="3" />
+              <rect class="burger-btn--3" width="40" height="6" y="20" rx="3" ry="3" />
+            </svg>
+          </a>
+
+          @include('mobile-menu.html')
 
           <nav class="nav main-nav">
             <ul class="nav__list list-reset sf-menu sf-arrows">

src/partials/mobile-menu.html

@@ -0,0 +1,31 @@
+<nav id="mobmenu">
+  <ul class="nav__list list-reset">
+    <li class="nav__item">
+      <a href="/catalog-1.html" class="nav__link">Brands</a>
+      <ul class="sub-menu">
+        <li><a href="#">Case</a></li>
+        <li><a href="#">Claas</a>
+          <ul class="sub-menu">
+            <li><a href="#">Combine</a></li>
+            <li><a href="#">Tractor</a>
+              <ul class="sub-menu">
+                <li><a href="#">Case Magnum 300 Series</a></li>
+                <li><a href="#">Case Magnum 200 Series</a></li>
+                <li><a href="#">Case Magnum 400 Series</a></li>
+                <li><a href="#">Case Magnum 500 Series</a></li>
+                <li><a href="#">Case Magnum 600 Series</a></li>
+                <li><a href="#">Case Magnum 700 Series</a></li>
+                <li><a href="#">Case Magnum 800 Series</a></li>
+                <li><a href="#">Case Magnum 900 Series</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li><a href="#">John Deere</a></li>
+      </ul>
+    </li>
+    <li class="nav__item">
+      <a href="#" class="nav__link">Machine type</a>
+    </li>
+  </ul>
+</nav>

src/partials/modal.html

@@ -0,0 +1,47 @@
+<div id="contact-modal" class="graph-modal contact-modal">
+  <div class="graph-modal__container" role="dialog" aria-modal="true" data-graph-target="contactModal">
+    <button class="btn-reset js-modal-close graph-modal__close" aria-label="Закрыть модальное окно"></button>
+    <div class="graph-modal__content">
+      <div class="contact__head">
+        <h2 class="h2">
+          <img loading="lazy" src="/img/logo-solo.svg" class="image" width="56" height="56" alt="Cemetet">
+          <span>ЗАДАЙТЕ ПИТАННЯ</span>
+        </h2>
+        <div class="h-sub">Ми&nbsp;постараємося відповісти максимально швидко</div>
+      </div>
+      <div class="contact__content">
+        <form action="" method="POST" class="contact__form" id="contact__form--modal">
+
+          <label class="form-label">
+            <span>ім’я+прізвище</span>
+            <input class="input-reset input input-name" type="text" name="name" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>Введите phone</span>
+            <input class="input-reset input input-tel" type="tel" name="phone" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>Введите email</span>
+            <input class="input-reset input input-email" type="email" name="email" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>компанія</span>
+            <input class="input-reset input input-company" type="text" name="company" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>ваше питання</span>
+            <textarea class="input-reset input input-message" type="text" name="message" placeholder="..."></textarea>
+          </label>
+
+          <div class="form-btn">
+            <button class="btn-reset btn white-bg wiggle-anime" type="submit">
+              <span>Надіслати</span>
+              <img loading="lazy" src="/img/ico-send.svg" class="image ml-8" width="24" height="24" alt="Cametet">
+            </button>
+          </div>
+
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/product-card.html

@@ -11,6 +11,7 @@
       @include('partials/card.html')
     </main>
     @include('partials/footer.html')
+    @include('partials/modal.html')
   </div>
 </body>
 

src/scss/components/_header.scss

@@ -20,6 +20,18 @@
 
   &__logo {
     margin-right: 100px;
+    &--desk {
+      display: none;
+      @media (min-width: 768px) {
+        display: block;
+      }
+    }
+    &--mobile {
+      display: none;
+      @media (max-width: 766.99px) {
+        display: block;
+      }
+    }
   }
 }