diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index a080943..d487e15 100644
--- a/assets/css/gp-style-desktop.css
+++ b/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 */
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index 64dd3b3..78db8a1 100644
--- a/assets/css/gp-style-tablet.css
+++ b/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 */
diff --git a/assets/img/photo/header-menu-search.png b/assets/img/photo/header-menu-search.png
new file mode 100644
index 0000000..1c85cd7
Binary files /dev/null and b/assets/img/photo/header-menu-search.png differ
diff --git a/assets/js/main.js b/assets/js/main.js
index 461b57b..b219cdb 100644
--- a/assets/js/main.js
+++ b/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', () => {
diff --git a/index.html b/index.html
index f860bc5..61bea6b 100644
--- a/index.html
+++ b/index.html
@@ -91,7 +91,10 @@
-
+
+
+
+
+
+
+
+ 
- 
-