сделал 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', () => {