сделал js search

assets/css/gp-style-desktop.css

@@ -115,8 +115,106 @@
     background-position: center right;
 }
 .header-menu__search{
+    display: flex;
+    align-items: center;
+
+    position: relative;
+}
+.header-menu-search__open{
+    width: 32px;
+    aspect-ratio: 1;
+
+    background: none;
+    overflow: hidden;
+
+    border: none;
+}
+.header-menu__search.active .header-menu-search__open img:first-child{
+    display: none;
+}
+.header-menu-search__block{
+    position: absolute;
+    top: 58px;
+    right: 0;
+
+    width: 400px;
+
+    transition: all .3s;
+
+    pointer-events: none;
+
+    opacity: 0;
+}
+.header-menu__search.active .header-menu-search__block{
+    pointer-events: auto;
+
+    opacity: 1;
+}
+.header-menu-search__input{
+    padding: 14px 64px 14px 24px;
+
+    width: 100%;
+
+    font-weight: 400;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    border: 1px solid var(--text-white);
+    border-radius: 4px;
+
+    background-color: var(--background-grey-hover);
+}
+.header-menu-search__input::placeholder{
+    color: var(--link);
+}
+.header-menu-search__btn{
+    position: absolute;
+    top: 8px;
+    right: 24px;
+
     width: 32px;
     aspect-ratio: 1;
+
+    background: none;
+    border: none;
+
+    background-image: url(/assets/img/icon/search.svg);
+    /* background-image: url(/assets/img/icon/close.svg); */
+}
+.header-menu-search__found{
+    margin-top: 24px;
+
+    padding: 24px;
+
+    background-color: var(--background-grey-hover);
+    border-radius: 4px;
+}
+.header-menu-search__error{}
+.header-menu-search__item{
+    margin-top: 24px;
+
+    display: flex;
+}
+.header-menu-search__item:first-child{
+    margin-top: 0;
+}
+.header-menu-search-item__img{
+    width: 72px;
+    aspect-ratio: 1;
+
+    border-radius: 8px;
+}
+.header-menu-search-item__content{
+    margin-left: 16px;
+}
+.header-menu-search-item__art{
+    margin-top: 8px;
+
+    color: var(--link);
+}
+.phone-search{
+    display: none;
 }
 /* header */
 

assets/css/gp-style-tablet.css

@@ -130,10 +130,17 @@
     width: 100%;
     transition: all .3s;
 
+    height: 100vh;
+
     background-color: var(--background-main);
 }
 .phone-menu__sub.active{
     left: 0;
+
+    overflow-y: auto;
+}
+.phone-menu__sub .title-1{
+    margin-bottom: 32px;
 }
 .phone-menu-content__close{
     position: absolute;
@@ -217,6 +224,108 @@
 .phone-menu{
     display: block;
 }
+.phone-search{
+    position: absolute;
+    top: 112px;
+    left: 0;
+
+    width: 100%;
+    height: 0;
+
+    display: block;
+
+    transition: all .3s;
+    overflow: hidden;
+}
+.phone-search.active{
+    height: 79px;
+}
+.phone-search.hidden{
+    overflow: visible;
+}
+.phone-search__content{
+    padding: 16px;
+
+    background-color: var(--background-grey-hover);
+}
+.phone-search__input{
+    width: 100%;
+
+    padding: 14.5px 23px;
+
+    font-weight: 400;
+    font-size: 14px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    border: 1px solid var(--text-white);
+    border-radius: 4px;
+
+    background-color: rgba(0, 0, 0, 0);
+
+    outline: none;
+}
+.phone-search__input::placeholder{
+    color: var(--link);
+}
+.phone-search__found{
+    position: absolute;
+    top: 95px;
+    left: 16px;
+    right: 16px;
+
+    max-height: 256px;
+    width: calc(100% - 32px);
+
+    padding: 16px;
+
+    background-color: var(--background-grey-hover);
+    border-radius: 4px;
+
+    overflow-y: auto;
+    display: none;
+}
+.phone-search__found.active{
+    display: block;
+}
+.phone-search__item{
+
+}
+
+.phone-search__item{
+    margin-top: 24px;
+
+    display: flex;
+}
+.phone-search__item:first-child{
+    margin-top: 0;
+}
+.phone-search-item__img{
+    width: 64px;
+    aspect-ratio: 1;
+
+    border-radius: 8px;
+}
+.phone-search-item__content{
+    margin-left: 16px;
+}
+.phone-search-item__art{
+    margin-top: 8px;
+
+    color: var(--link);
+}
+.phone__open-search{
+    width: 32px;
+    aspect-ratio: 1;
+
+    overflow: hidden;
+
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+}
+.phone__open-search.active img:first-child{
+    display: none;
+}
 /* header */
 
 /* footer */

assets/js/main.js

@@ -152,9 +152,22 @@ btnOpenMenu.onclick = function () {
         newHeigh = content.offsetHeight + 'px';
 
     phoneMenu.classList.add('active');
+    // block.classList.add('active');
     block.style.height = newHeigh;
 }
 
+let closeMainMenu = document.querySelector('.phone-menu-content__close.main');
+
+closeMainMenu.onclick = function () {
+    let phoneMenu = document.querySelector('.phone-menu'),
+        block = document.querySelector('.phone-menu__block-content.main'),
+        content = document.querySelector('.phone-menu__content.main');
+
+    phoneMenu.classList.remove('active');
+    block.style.height = 0;
+}
+
+
 let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');
 
 nextPhoneMenu.forEach(next => {
@@ -165,8 +178,43 @@ nextPhoneMenu.forEach(next => {
         blockSub.classList.add('active');
     }
 })
-// phone menu
 
+let subPhone = document.querySelectorAll('.phone-menu__sub');
+
+subPhone.forEach(menu => {
+    let close = menu.querySelector('.phone-menu-content__close');
+
+    close.onclick = function () {
+        menu.classList.remove('active');
+    }
+})
+// phone menu end
+
+// search
+let openBtnSearch = document.querySelector('.header-menu-search__open'),
+    blockSearchPc = document.querySelector('.header-menu__search');
+
+openBtnSearch.onclick = function () {
+    blockSearchPc.classList.toggle('active');
+}
+
+let btnOpenSearchPhone = document.querySelector('.phone__open-search'),
+    searchPhone = document.querySelector('.phone-search');
+
+btnOpenSearchPhone.onclick = function () {
+    if (!searchPhone.classList.contains('hidden')) {
+        setTimeout(() => {
+            searchPhone.classList.add('hidden');
+        }, 300);
+    }else{
+        searchPhone.classList.remove('hidden');
+    }
+
+    btnOpenSearchPhone.classList.toggle('active');
+    searchPhone.classList.toggle('active');
+}
+
+// search end
 
 // resize
 window.addEventListener('resize', () => {

index.html

@@ -91,7 +91,10 @@
                     </div>
     
                     <div class="header-phone__item">
-                        <img src="/assets/img/icon/search.svg" alt="search">
+                        <button class="phone__open-search">
+                            <img src="/assets/img/icon/search.svg" alt="search">
+                            <img src="/assets/img/icon/close.svg" alt="search">
+                        </button>
                     </div>
     
                     <div class="header-phone__item">
@@ -128,16 +131,49 @@
                         </li>
                     </ul>
 
-                    <img src="/assets/img/icon/search.svg" alt="" class="header-menu__search">
+                    <div class="header-menu__search">
-                </div>
+                        <button class="header-menu-search__open">
-            </div>
+                            <img src="/assets/img/icon/search.svg" alt="" >
+                            <img src="/assets/img/icon/close.svg" alt="" >
+                        </button>
+
+                        <div class="header-menu-search__block">
+                            <button class="header-menu-search__btn"></button>
+                            <input type="text" class="header-menu-search__input" placeholder="Поиск">
 
+                            <div class="header-menu-search__found">
+                                <div class="header-menu-search__item">
+                                    <img src="/assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
 
+                                    <div class="header-menu-search-item__content">
+                                        <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
+                                        <p class="header-menu-search-item__art text-2">Артикул: STP1000C</p>
+                                    </div>
+                                </div>
+
+                                <div class="header-menu-search__item">
+                                    <img src="/assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
+
+                                    <div class="header-menu-search-item__content">
+                                        <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
+                                        <p class="header-menu-search-item__art text-2">Артикул: STP1000C</p>
+                                    </div>
+                                </div>
+
+                                <!-- <p class="header-menu-search__error text-2">
+                                    К сожалению, по вашему запросу ничего не найдено
+                                </p> -->
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+            </div>
 
             <div class="phone-menu">
                 <div class="phone-menu__block-content main">
                     <div class="phone-menu__content main">
-                        <button class="phone-menu-content__close"></button>
+                        <button class="phone-menu-content__close main"></button>
 
                         <ul class="phone-menu__list">
                             <li>
@@ -189,99 +225,33 @@
                     <div class="phone-menu__content">
                         <button class="phone-menu-content__close"></button>
     
+                        <p class="title-1">
+                            Каталог
+                        </p>
+
                         <ul class="phone-menu__list">
                             <li>
-                                <a href="#">спецификация</a>
+                                <a href="#" class="phone-menu--next" data-menu="cardio">Кардио</a>
                             </li>
-                            <li>О компании</li>
                             <li>
-                                <a href="#" class="phone-menu--next" data-menu="cardio">каталог</a>
+                                <a href="#" class="phone-menu--next">механическое кардио</a>
                             </li>
                             <li>
-                                <a href="#" class="phone-menu--next">бренды</a>
+                                <a href="#" class="phone-menu--next">силовые тренажеры</a>
                             </li>
-                            <li>зонирование</li>
-                            <li>проекты</li>
-                            <li>интересное</li>
-                            <li>контакты</li>
-                        </ul>
-    
-                        <div class="phone-menu__block">
-                            <p class="phone-menu__text">
-                                Работаем с гос.заказчиками по<br>
-                                <a href="">44-ФЗ/223-ФЗ</a>
-                            </p>
-    
-                            <a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
-    
-                            <a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
-    
-                            <div class="phone-social">
-                                <a href="#" class="btn-social">
-                                    <img src="/assets/img/social/telegram.svg" alt="">
-                                </a>
-    
-                                <a href="#" class="btn-social">
-                                    <img src="/assets/img/social/whatsapp.svg" alt="">
-                                </a>
-                            </div>
-                        </div>
-    
-                        <div class="phone-menu__block">
-                            <a href="#" class="btn-big btn-big--border btn-big--border--blood">
-                                Заказать звонок
-                            </a>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="phone-menu__sub brand">
-                    <div class="phone-menu__content">
-                        <button class="phone-menu-content__close"></button>
-    
-                        <ul class="phone-menu__list">
                             <li>
-                                <a href="#">спецификация</a>
+                                <a href="#" class="phone-menu--next">скамьи</a>
                             </li>
-                            <li>О компании</li>
                             <li>
-                                <a href="#" class="phone-menu--next" data-menu="cardio">каталог</a>
+                                <a href="#" class="phone-menu--next">свободные веса</a>
                             </li>
                             <li>
-                                <a href="#" class="phone-menu--next">бренды</a>
+                                <a href="#" class="phone-menu--next">Функциональный тренинг</a>
+                            </li>
+                            <li>
+                                <a href="#" class="phone-menu--next">Уникальные продукты</a>
                             </li>
-                            <li>зонирование</li>
-                            <li>проекты</li>
-                            <li>интересное</li>
-                            <li>контакты</li>
                         </ul>
-    
-                        <div class="phone-menu__block">
-                            <p class="phone-menu__text">
-                                Работаем с гос.заказчиками по<br>
-                                <a href="">44-ФЗ/223-ФЗ</a>
-                            </p>
-    
-                            <a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
-    
-                            <a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
-    
-                            <div class="phone-social">
-                                <a href="#" class="btn-social">
-                                    <img src="/assets/img/social/telegram.svg" alt="">
-                                </a>
-    
-                                <a href="#" class="btn-social">
-                                    <img src="/assets/img/social/whatsapp.svg" alt="">
-                                </a>
-                            </div>
-                        </div>
-    
-                        <div class="phone-menu__block">
-                            <a href="#" class="btn-big btn-big--border btn-big--border--blood">
-                                Заказать звонок
-                            </a>
-                        </div>
                     </div>
                 </div>
 
@@ -289,52 +259,40 @@
                     <div class="phone-menu__content">
                         <button class="phone-menu-content__close"></button>
                         
+                        <p class="title-1">
+                            Кардио
+                        </p>
+
                         <ul class="phone-menu__list">
-                            <li>
+                            <li>Беговые дорожки</li>
-                                <a href="#">спецификация</a>
+                            <li>Беговые дорожки</li>
-                            </li>
+                            <li>Беговые дорожки</li>
-                            <li>О компании</li>
+                            <li>Беговые дорожки</li>
-                            <li>
-                                <a href="#" class="phone-menu--next">каталог</a>
-                            </li>
-                            <li>
-                                <a href="#" class="phone-menu--next">бренды</a>
-                            </li>
-                            <li>зонирование</li>
-                            <li>проекты</li>
-                            <li>интересное</li>
-                            <li>контакты</li>
                         </ul>
+                    </div>
+                </div>
 
-                        <div class="phone-menu__block">
+            </div>
-                            <p class="phone-menu__text">
-                                Работаем с гос.заказчиками по<br>
-                                <a href="">44-ФЗ/223-ФЗ</a>
-                            </p>
 
-                            <a class="phone-menu__text phone-menu__text--no-line" href="tel:+74957988081">+7 (495) 798-80-81</a>
+            <div class="phone-search">
+                <div class="phone-search__content">
+                    <input type="text" class="phone-search__input" placeholder="Поиск">
 
-                            <a class="phone-menu__text phone-menu__text--no-line" href="mailto:sales@bestinfitness.ru">sales@bestinfitness.ru</a>
+                    <div class="phone-search__found">
+                        <!-- <p class="text-1">
+                            К сожалению, по вашему запросу ничего не найдено
+                        </p> -->
 
-                            <div class="phone-social">
+                        <div class="phone-search__item">
-                                <a href="#" class="btn-social">
+                            <img src="/assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
-                                    <img src="/assets/img/social/telegram.svg" alt="">
-                                </a>
                         
-                                <a href="#" class="btn-social">
+                            <div class="phone-search-item__content">
-                                    <img src="/assets/img/social/whatsapp.svg" alt="">
+                                <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
-                                </a>
+                                <p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
                             </div>
                         </div>
-    
-                        <div class="phone-menu__block">
-                            <a href="#" class="btn-big btn-big--border btn-big--border--blood">
-                                Заказать звонок
-                            </a>
-                        </div>
                     </div>
                 </div>
-
             </div>
         </header>