responsive breadcrumbs

src/js/_components.js

@@ -8,6 +8,7 @@ import brandSwiper from './components/brandswiper';
 import scrolling from './components/scrolling';
 import showMoreBtn from './components/show-more';
 import mobileMenu from './components/mobmenu';
+import breadCrumbs from './components/breadcrumbs';
 import './components/validation';
 import './components/modals';
 
@@ -24,6 +25,7 @@ window.addEventListener('DOMContentLoaded', () => {
   scrolling('.pageup');
   showMoreBtn();
   mobileMenu();
+  breadCrumbs();
 
   /** Current year */
   document.querySelector('#year').innerHTML = new Date().getFullYear();

src/js/components/breadcrumbs.js

@@ -0,0 +1,17 @@
+const breadCrumbs = () => {
+  if (window.matchMedia('(max-width: 575.98px)').matches) {
+    const breadcrumbs = document.querySelector('#breadcrumbs'),
+      breadCrumbsBtn = document.querySelector('.bread-home__btn'),
+      breadCrumbsLi = document.querySelectorAll('.breadcrumbs li:not(:first-child)');
+
+    breadCrumbsBtn.addEventListener('click', () => {
+      breadcrumbs.classList.toggle('is-show');
+
+      breadCrumbsLi.forEach(li => {
+        li.classList.toggle('fadeIn');
+      });
+    });
+  }
+};
+
+export default breadCrumbs;

src/partials/breadcrumbs.html

@@ -1,8 +1,14 @@
 <div class="container breadcrumbs__container animated faster fadeIn">
   <ul class="list-reset breadcrumbs" id="breadcrumbs">
-    <li><a href="/"><img loading="lazy" src="/img/icon-home.svg" class="image" width="24" height="25" alt="Home"></a></li>
-    <li><a href="/catalog-1.html">Brands</a></li>
-    <li><a href="/catalog-2.html">Catalog</a></li>
-    <li><a href="/product-card.html">Product</a></li>
+    <li class="bread-home">
+      <a href="/"><img loading="lazy" src="/img/icon-home.svg" class="image" width="24" height="25" alt="Home"><span>Main</span></a>
+      <span class="bread-home__btn">
+        <img loading="lazy" src="/img/angle-down.svg" class="b-icon bread-home__btn--open" width="12" height="8" alt="X">
+        <img loading="lazy" src="/img/icon-close.svg" class="b-icon bread-home__btn--close" width="12" height="12" alt="X">
+      </span>
+    </li>
+    <li class="animated faster"><a href="/catalog-1.html">Brands</a></li>
+    <li class="animated faster"><a href="/catalog-2.html">Catalog</a></li>
+    <li class="animated faster"><a href="/product-card.html">Product</a></li>
   </ul>
 </div>

src/scss/components/_brands-catalog.scss

@@ -29,6 +29,7 @@
     @media (max-width: 575.98px) {
       grid-column: 12 span;
       max-width: 294px;
+      min-width: 294px;
       margin: auto;
     }
 
@@ -44,6 +45,7 @@
       .image {
         min-height: 214px;
         width: 100%;
+        margin: auto;
       }
     }
 

src/scss/components/_breadcrumbs.scss

@@ -1,15 +1,42 @@
+@media (max-width: 575.98px) {
+  .breadcrumbs__container {
+    display: flex;
+    justify-content: center;
+  }
+}
+
 .breadcrumbs {
   display: inline-flex;
   align-items: center;
   background-color: #fff;
   padding: 15px;
   border-radius: 13px;
+  @media (max-width: 575.98px) {
+    flex-direction: column;
+    width: 100%;
+    max-width: 294px;
+    min-width: 294px;
+    align-items: flex-start;
+    gap: 15px;
+    box-shadow: 0px 13px 33px -5px rgb(0 0 0 / 13%);
+  }
   li {
     font-size: 16px;
     line-height: 1;
+    @media (max-width: 575.98px) {
+      &:not(:first-child) {
+        display: none;
+        width: 100%;
+        position: relative;
+        > a {
+          padding: 5px 0;
+          width: 100%;
+          display: inline-flex;
+          padding-left: 33px;
+        }
+      }
+    }
     .image {
-      position: relative;
-      top: 2px;
       min-width: 24px;
       min-height: 25px;
     }
@@ -21,6 +48,11 @@
         position: relative;
         left: 2px;
         font-weight: 700;
+        @media (max-width: 575.98px) {
+          padding-left: 5px;
+          position: absolute;
+          top: 5px;
+        }
       }
     }
     a {
@@ -33,4 +65,66 @@
   &__container {
     margin-bottom: 50px;
   }
+
+  .bread-home {
+    position: relative;
+    width: 100%;
+    a {
+      display: flex;
+      align-items: center;
+      padding-right: 25px;
+      > span {
+        padding-left: 10px;
+        display: none;
+        @media (max-width: 575.98px) {
+          display: block;
+        }
+      }
+    }
+
+    &__btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 25px;
+      height: 25px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      z-index: 5;
+      display: none;
+      @media (max-width: 575.98px) {
+        display: flex;
+      }
+      .b-icon {
+        transition: all 0.25s ease-in-out;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &--open {
+        min-width: 12px;
+        min-height: 8px;
+        opacity: 1;
+      }
+      &--close {
+        min-width: 12px;
+        min-height: 12px;
+        opacity: 0;
+      }
+    }
+  }
+
+  &.is-show {
+    .bread-home__btn--open {
+      opacity: 0;
+    }
+    .bread-home__btn--close {
+      opacity: 1;
+    }
+    li:not(:first-child) {
+      display: block;
+    }
+  }
 }

src/scss/components/_products-catalog.scss

@@ -35,6 +35,7 @@
     @media (max-width: 575.98px) {
       grid-column: 12 span;
       max-width: 294px;
+      min-width: 294px;
       margin: auto;
     }