Add adaptive catalog

src/catalog.html

@@ -4,8 +4,6 @@
 
 //= template/breadcrumb/index.html
 
-//= template/catalog-filter/index.html
-
 //= template/catalog-products-list/index.html
 
 //= template/catalog-description/index.html

src/img/nosprite/rastr/down-arrow.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px">
+  <g>
+    <path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z" fill="#FFFFFF"/>
+  </g>
+</svg>

src/js/catalog-menu.js

+'use strict';
+
+(function () {
+    var menuItemAc = document.querySelector('.menu-list__catalog .menu-list__link.active');
+    if(menuItemAc){
+        var getOtherItem = document.querySelectorAll('.menu-list__catalog .menu-list__link:not(.active)');
+        menuItemAc.addEventListener('click', function (evt) {
+            //TODO: desctop
+            evt.preventDefault();
+            menuItemAc.classList.toggle('open');
+            if(menuItemAc.classList.contains('open')){
+                getOtherItem.forEach(function (item) {
+                    item.classList.add('visible');
+                })
+            }else {
+                getOtherItem.forEach(function (item) {
+                    item.classList.remove('visible');
+                })
+            }
+
+        })
+    }
+})();

src/scss/catalog-products-list/catalog-products-list.scss

@@ -70,11 +70,24 @@
     transform: translateY(-10px);
   }
 }
-
-@media screen and (max-width: 425px){
+@media screen and (max-width: 1024px){
   .products-list__list{
     flex-wrap: wrap;
   }
+  .product-item{
+    width: 33%;
+  }
+}
+@media screen and (max-width: 768px){
+  .products-list__list{
+    flex-wrap: wrap;
+  }
+  .product-item{
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 425px){
   .product-item{
     width: 100%;
   }

src/scss/menu-list/menu-list-main.scss

@@ -78,9 +78,58 @@
       display: none;
     }
   }
-  .menu-list__list{
-
+  .menu-list__catalog .menu-list__list{
+    flex-wrap: wrap;
+  }
+  .menu-list__catalog .menu-list__item{
+    width: 100%;
+  }
+  .menu-list__catalog .menu-list__wrapper{
+    padding: 0;
+  }
+  .menu-list__catalog .menu-list__link{
+    flex-direction: row;
+    visibility: hidden;
+    height: 0;
+    padding: 0;
+    transition: none;
+  }
+  .menu-list__catalog .menu-list__link.active{
+    position: relative;
+    visibility: visible;
+    height: auto;
+    padding: 10px 20px 20px;
+    .menu-list__tit{
+      margin-right: 15px;
+    }
+    &:after{
+      content: "";
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      background: url("../img/down-arrow.svg");
+      background-size: contain;
+      right: 0;
+      top: 50%;
+      transform: translate(-100%,-50%);
+      transition: .2s;
+    }
+  }
+  .menu-list__catalog .menu-list__link.active.open{
+    &:after {
+      transform: translate(-100%, -50%) rotate(180deg);
+    }
+  }
+  .menu-list__catalog .menu-list__link.visible{
+    visibility: visible;
+    height: auto;
+    padding: 10px 20px 20px;
+  }
+  .menu-list__catalog .menu-list__tit{
+    flex-grow: 1;
   }
+
 }
 @media screen and (max-width: 425px){
   .menu-list__item {

src/template/menu-list-catalog/index.html

@@ -2,38 +2,38 @@
     <div class="wrapper menu-list__wrapper">
         <ul class="menu-list__list">
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link active">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link active">
+                    <img src="img/kolesnie-cat.png" alt="Колесные мини-погрузчики" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/gusen-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/mini-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/tele-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/ecscat-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/naves-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>