Merge pull request #35 from LesiaUKR/navigation

Navigation
LesiaUKR · Aug 28, 2024 · b68a660 · b68a660
2 parents afdb57e + e59c4db
commit b68a660
Show file tree

Hide file tree

Showing 167 changed files with 51 additions and 29 deletions.
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/desktop/[email protected] b/src/img/about/desktop/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/about/mobile/[email protected] b/src/img/about/mobile/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/desktop/[email protected] b/src/img/gallery/desktop/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/gallery/mobile/[email protected] b/src/img/gallery/mobile/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/desktop/[email protected] b/src/img/hero/desktop/[email protected]
diff --git a/src/img/hero/[email protected] b/src/img/hero/[email protected]
diff --git a/src/img/hero/[email protected] b/src/img/hero/[email protected]
diff --git a/src/img/hero/[email protected] b/src/img/hero/[email protected]
diff --git a/src/img/hero/[email protected] b/src/img/hero/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/hero/mobile/[email protected] b/src/img/hero/mobile/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/desktop/[email protected] b/src/img/howToPlay/desktop/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/howToPlay/mobile/[email protected] b/src/img/howToPlay/mobile/[email protected]
diff --git a/src/img/logo/desktop/[email protected] b/src/img/logo/desktop/[email protected]
diff --git a/src/img/logo/desktop/[email protected] b/src/img/logo/desktop/[email protected]
diff --git a/src/js/burger.js b/src/js/burger.js
@@ -24,8 +24,14 @@ export const burgerMenu = () => {
 
   closeMenuBtns.forEach(closeMenuBtn => {
     closeMenuBtn.addEventListener('click', e => {
+      // e.preventDefault();
+
+      if (e.currentTarget.nodeName === 'A') {
+        toggleMenu();
+        navigateTo(e.target.hash);
+        return;
+      }
       toggleMenu();
-      // navigateTo(e.target.hash);
     });
   });
 
@@ -49,3 +55,5 @@ export const burgerMenu = () => {
     }, 100)
   );
 };
+
+burgerMenu();
diff --git a/src/js/helpers/navigateTo.js b/src/js/helpers/navigateTo.js
@@ -1,23 +1,17 @@
-import * as bodyScrollLock from 'body-scroll-lock';
 export const navigateTo = hash => {
   const headerRef = document.querySelector('header');
   if (!headerRef) return;
 
   const id = hash.replace('#', '');
   const elementRef = document.getElementById(id);
 
-  const position =
-    elementRef.getBoundingClientRect().top +
-    window.scrollY -
-    headerRef.offsetHeight;
+  const positionToScroll =
+    elementRef.getBoundingClientRect().top - headerRef.offsetHeight;
 
-  bodyScrollLock.enableBodyScroll(document.body);
-  // elementRef.scrollIntoView({});
-  setTimeout(() => {
-    window.scroll({
-      // top: elementRef.offsetTop - headerRef.offsetHeight,
-      top: position,
+  setTimeout(
+    window.scrollBy({
+      top: positionToScroll,
       behavior: 'smooth',
-    });
-  });
+    })
+  );
 };
diff --git a/src/js/load.js b/src/js/load.js
@@ -1,8 +1,11 @@
-// import { navigateTo } from './helpers/navigateTo.js';
+import { navigateTo } from './helpers/navigateTo.js';
 
-// (() => {
-//   const locationHash = document.location.hash;
-//   if (!locationHash) return;
+(() => {
+  const locationHash = document.location.hash;
+  if (!locationHash) return;
 
-//   window.addEventListener('load', e => navigateTo(locationHash));
-// })();
+  window.addEventListener('load', e => {
+    e.preventDefault();
+    navigateTo(locationHash);
+  });
+})();
diff --git a/src/js/navigation.js b/src/js/navigation.js
@@ -0,0 +1,12 @@
+import { navigateTo } from './helpers/navigateTo.js';
+
+(() => {
+  const linksRef = document.querySelectorAll('.js-nav-link');
+
+  const handleClick = e => {
+    e.preventDefault();
+    navigateTo(e.target.hash);
+  };
+
+  linksRef.forEach(link => link.addEventListener('click', handleClick));
+})();
diff --git a/src/main.js b/src/main.js
@@ -1,7 +1,5 @@
-// import './js/redirect.js';
-import { burgerMenu } from './js/burger.js';
-// import './js/load.js';
+import './js/navigation.js';
+import './js/burger.js';
+import './js/load.js';
 // import './js/swiper.js';
 import './js/miniSlide.js';
-
-burgerMenu();
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -54,7 +54,7 @@
     <!-- NAV LIST -->
     <ul class="nav-list">
       <li class="nav-list-item">
-        <a class="nav-list-link" href="./index.html">Home</a>
+        <a class="nav-list-link js-nav-link" href="./index.html#home">Home</a>
       </li>
       <li class="nav-list-item">
         <a class="nav-list-link js-nav-link" href="./index.html#about"
@@ -122,7 +122,9 @@
     <!-- MOBILE NAVIGATION -->
     <ul class="menu-list">
       <li class="menu-list-item">
-        <a class="menu-list-link js-close-menu" href="./index.html">Home</a>
+        <a class="menu-list-link js-link js-close-menu" href="./index.html#home"
+          >Home</a
+        >
       </li>
       <li class="menu-list-item">
         <a

diff --git a/src/partials/home.html b/src/partials/home.html
@@ -1,5 +1,5 @@
 <!-- HOME SECTION -->
-<section class="home-section section">
+<section class="home-section section" id="home">
   <div class="container home-section-container">
     <!-- HOME TITLE -->
     <div class="home-title-wrapper">

diff --git a/src/scss/common/_reset.scss b/src/scss/common/_reset.scss
@@ -2,13 +2,17 @@
 
 html {
   box-sizing: border-box;
+  scroll-behavior: smooth;
+  scroll-padding-top: 76px;
+  @include media(desktop) {
+    scroll-padding-top: 126px;
+  }
 }
 
 *,
 *::before,
 *::after {
   box-sizing: inherit;
-  // outline: 1px solid red;
 }
 
 body {

diff --git a/src/scss/how-to-play.scss b/src/scss/how-to-play.scss
@@ -115,6 +115,7 @@
   background-color: $_pic_bg_color;
   border: 1px solid $_yellow_color;
   border-radius: 50%;
+  overflow: hidden;
   @include media(desktop) {
     margin-bottom: 36px;
     height: 196px;