diff --git a/package.json b/package.json index ff7d5f0..a2af289 100644 --- a/package.json +++ b/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", diff --git a/src/img/logo-mobile.svg b/src/img/logo-mobile.svg new file mode 100644 index 0000000..c4dab96 --- /dev/null +++ b/src/img/logo-mobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/img/logo-white-mob.svg b/src/img/logo-white-mob.svg new file mode 100644 index 0000000..1308487 --- /dev/null +++ b/src/img/logo-white-mob.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/js/_components.js b/src/js/_components.js index 83f6937..d46c2ea 100644 --- a/src/js/_components.js +++ b/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(); diff --git a/src/js/components/mobmenu.js b/src/js/components/mobmenu.js new file mode 100644 index 0000000..fa40023 --- /dev/null +++ b/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: [ + '', + ], + }, + ], + }); + + let spanLogo = document.createElement('span'); + spanLogo.classList.add('span-logo'); + spanLogo.innerHTML = `Cametet`; + + document.querySelector('.mm-navbar__title').append(spanLogo); + + // button.addEventListener('click', () => { + // button.classList.toggle('active'); + // }); + +}; + +export default mobileMenu; diff --git a/src/js/components/supermenu.js b/src/js/components/supermenu.js index d305b2e..236bccf 100644 --- a/src/js/components/supermenu.js +++ b/src/js/components/supermenu.js @@ -19,16 +19,21 @@ import '../vendor/jquery.hoverIntent.min.js'; const superMenu = () => { - $(".main-nav .sf-menu").superfish({ - cssArrows: false, - hoverClass: 'sfHover', - popUpSelector: 'ul.sub-menu', - animation: {opacity:'show', height:'show'}, - speed: 'fast', - delay: 300, - }); - - $('.sf-with-ul').append(''); + // >= 992px + if (window.matchMedia('(min-width: 992px)').matches) { + + $(".main-nav .sf-menu").superfish({ + cssArrows: false, + hoverClass: 'sfHover', + popUpSelector: 'ul.sub-menu', + animation: {opacity:'show', height:'show'}, + speed: 'fast', + delay: 300, + }); + + $('.sf-with-ul').append(''); + + } }; diff --git a/src/js/components/validation.js b/src/js/components/validation.js index ffe4c86..cef16f2 100644 --- a/src/js/components/validation.js +++ b/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); diff --git a/src/partials/card.html b/src/partials/card.html index 0eb25fb..6c312ad 100644 --- a/src/partials/card.html +++ b/src/partials/card.html @@ -152,53 +152,3 @@

(2HC - 4060) - Multi-wedge belt 0227353

- - - -
- -
diff --git a/src/partials/header.html b/src/partials/header.html index 52156cf..95ebb92 100644 --- a/src/partials/header.html +++ b/src/partials/header.html @@ -1,12 +1,27 @@