From 94ef72f3ce80560dfd66b4bc08e0e7d048e6ed83 Mon Sep 17 00:00:00 2001 From: Nazar Levkovych Date: Mon, 2 Oct 2023 18:33:20 +0300 Subject: [PATCH] fix v2 --- src/images/icons/menu-close.svg | 1 + src/index.html | 37 ++++++++++++++++++++ src/scripts/main.js | 43 +++++------------------ src/styles/blocks/footer.scss | 9 +++++ src/styles/blocks/menu.scss | 60 +++++++++++++++++++++++++++++++++ src/styles/blocks/page.scss | 19 +++++++++++ src/styles/main.scss | 1 + 7 files changed, 135 insertions(+), 35 deletions(-) create mode 100644 src/images/icons/menu-close.svg create mode 100644 src/styles/blocks/menu.scss diff --git a/src/images/icons/menu-close.svg b/src/images/icons/menu-close.svg new file mode 100644 index 0000000000..495149e9fb --- /dev/null +++ b/src/images/icons/menu-close.svg @@ -0,0 +1 @@ + diff --git a/src/index.html b/src/index.html index 640a95ff1f..6bc0cc704f 100644 --- a/src/index.html +++ b/src/index.html @@ -169,6 +169,43 @@

INtro

+
diff --git a/src/scripts/main.js b/src/scripts/main.js index 81c138f5d3..1cbe4f0287 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,39 +1,5 @@ 'use strict'; -// const prevBtn = document.getElementById('prevBtn'); -// const nextBtn = document.getElementById('nextBtn'); -// const slider = document.querySelector('.slider'); -// const images = slider.querySelectorAll('img'); - -// let currentImageIndex = 0; - -// function showImage(index) { -// if (index < 0) { -// currentImageIndex = images.length - 1; -// } else if (index >= images.length) { -// currentImageIndex = 0; -// } - -// images.forEach((img, idx) => { -// if (idx === currentImageIndex) { -// img.style.opacity = '1'; -// } else { -// img.style.opacity = '0'; -// } -// }); -// } - -// prevBtn.addEventListener('click', () => { -// currentImageIndex--; -// showImage(currentImageIndex); -// }); - -// nextBtn.addEventListener('click', () => { -// currentImageIndex++; -// showImage(currentImageIndex); -// }); - -// showImage(currentImageIndex); document.addEventListener('DOMContentLoaded', function() { const slider = document.querySelector('.header__slide'); let currentIndex = 0; @@ -55,7 +21,6 @@ document.addEventListener('DOMContentLoaded', function() { showSlide(currentIndex); } - // Optional: Add event listeners for navigation const nextButton = document.getElementById('nextButton'); const prevButton = document.getElementById('prevButton'); @@ -74,3 +39,11 @@ form.addEventListener('submit', (event) => { userName.value = ''; userMessage.value = ''; }); + +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page__body--with-menu'); + } else { + document.body.classList.remove('page__body--with-menu'); + } +}); diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss index 3d4e2a44da..1f08998586 100644 --- a/src/styles/blocks/footer.scss +++ b/src/styles/blocks/footer.scss @@ -79,6 +79,7 @@ padding-bottom: toRem(17); + resize: none; &:not(:placeholder-shown) { color: $whiteColor; } @@ -233,6 +234,14 @@ cursor: pointer; @include hover(transform, scale(1.1)); + + @include onTablet { + padding-bottom: toRem(24); + } + + @include onDesktop { + padding-bottom: 0; + } } &-nav { diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..ebe304eeb9 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,60 @@ +.menu { + + height: 100vh; + background-color: $pinkColor; + &__content { + @include contentPaddingInLine; + } + + &__top-bar { + display: flex; + justify-content: space-between; + } + + &__logo { + padding-top: toRem(20); + + cursor: pointer; + @include hover(transform, scale(1.1)); + } + + &__icon { + + padding-top: toRem(24); + + &--close { + width: toRem(24); + height: toRem(24); + + @include hover(transform, scale(1.2)); + } + } + + &__nav { + padding-top: toRem(100); + } + + &__list { + display: flex; + align-items: center; + flex-direction: column; + gap: toRem(25); + } + + &__item { + @include hover(transform, scale(1.1)); + } + + &__link { + font-weight: 700; + font-size: toRem(13); + line-height: 150%; /* 19.5/13 */ + letter-spacing: toRem(3); + + color: #fff; + + &:hover { + color: $blueColor; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss index e3819249e5..d84f949938 100644 --- a/src/styles/blocks/page.scss +++ b/src/styles/blocks/page.scss @@ -7,5 +7,24 @@ &__body { margin: 0; min-width: $minWidth; + + &--with-menu { + overflow: hidden; + } + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transform: translateX(-100%); + transition: transform 0.3s; + + &:target { + transform: translateX(0); + z-index: 1; + } } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 8ccb32cece..85b72983a5 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -13,3 +13,4 @@ @import "blocks/testimonials.scss"; @import "blocks/cta-block.scss"; @import "blocks/footer.scss"; +@import "blocks/menu.scss";