fix v2

mate-academy · Oct 2, 2023 · 94ef72f · 94ef72f
1 parent bd54a36
commit 94ef72f
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 35 deletions.
diff --git a/src/images/icons/menu-close.svg b/src/images/icons/menu-close.svg
diff --git a/src/index.html b/src/index.html
@@ -169,6 +169,43 @@ <h3>INtro</h3>
         </div>
       </div>
     </header>
+    <aside class="page__menu menu" id="menu">
+      <div class="menu__content">
+        <div class="menu__top-bar">
+          <div class="menu__logo">
+            <img src="./images/icons/header-logo.svg" alt="menu-logo">
+          </div>
+          <div class="menu__icon">
+            <a href="#">
+              <img
+                class="menu__icon--close"
+                src="./images/icons/menu-close.svg"
+                alt="menu-close"
+              >
+            </a>
+          </div>
+        </div>
+        <nav class="menu__nav">
+          <ul class="menu__list">
+            <li class="menu__item">
+              <a href="#" class="menu__link">Home</a>
+            </li>
+            <li class="menu__item">
+              <a href="#about-us" class="menu__link">About us</a>
+            </li>
+            <li class="menu__item">
+              <a href="#services" class="menu__link">Services</a>
+            </li>
+            <li class="menu__item">
+              <a href="#testimonials" class="menu__link">Testimonials</a>
+            </li>
+            <li class="menu__item">
+              <a href="#contact-us" class="menu__link">Contact Us</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </aside>
     <main class="main">
       <section class="page__section welcome" id="about-us">
         <div class="welcome__content">

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -13,3 +13,4 @@
 @import "blocks/testimonials.scss";
 @import "blocks/cta-block.scss";
 @import "blocks/footer.scss";
+@import "blocks/menu.scss";