me/script.js at master · ahadkhan9/me · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// Get the button element
const scrollToTopButton = document.getElementById("scrollToTopBtn");

// Function to show or hide the button based on scroll position
function toggleScrollToTopButton() {
  if (window.scrollY > 300) {
    scrollToTopButton.classList.add("show");
  } else {
    scrollToTopButton.classList.remove("show");
  }
}

// Function to scroll to the top of the page when button is clicked
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

// Event listener to check scroll position and show/hide the button accordingly
window.addEventListener("scroll", toggleScrollToTopButton);


// =======================================================

const deviceWidth = screen.width;
console.log(deviceWidth)
// if (deviceWidth<=840){

// }
const viewportWidth = window.innerWidth;
console.log(viewportWidth);


if (viewportWidth<=840){

  const toggleButton = document.getElementById('toggleButton');
  const navList = document.getElementById('navList');
  const linkedin=document.getElementsByClassName('linkedin-button')[0];

  toggleButton.addEventListener('click', () => {
    if (navList.style.display === 'block') {

      navList.style.display = 'none';
      linkedin.style.display='none';
      toggleButton.classList.remove('cross-button');
      toggleButton.classList.add('hamburger-button');
    } else {

      linkedin.style.display='block';
      navList.style.display = 'block';
      toggleButton.classList.remove('hamburger-button');
      toggleButton.classList.add('cross-button');
    }
  });


  // li click respond to anchor click
  const navItems = document.querySelectorAll('.nav-item');

  function activateAnchor(event) {
    const anchor = event.currentTarget.querySelector('a');
    if (anchor) {
      anchor.click();

      linkedin.style.display='none';
      navList.style.display = 'none'; // Close the navigation list when a link is clicked
      toggleButton.classList.remove('cross-button');
      toggleButton.classList.add('hamburger-button');

    }
  }

  navItems.forEach(item => {
    item.addEventListener('click', activateAnchor);
  });


}