From 5816404a300aeaf37f7e2d2efe60c3bab2ad5f1e Mon Sep 17 00:00:00 2001
From: edmishchenko <87074420+edmishchenko@users.noreply.github.com>
Date: Mon, 5 Feb 2024 20:56:23 +0100
Subject: [PATCH] Fixed menu bug
Fixed a menu bug in the desktop version. When a user clicks on a section link in the desktop version menu on the Getting Started page, it is hidden, just like in the phone version.
---
docs/getStarted.html | 21 ++++++++++++---------
1 file changed, 12 insertions(+), 9 deletions(-)
diff --git a/docs/getStarted.html b/docs/getStarted.html
index dd29a68..5975a64 100644
--- a/docs/getStarted.html
+++ b/docs/getStarted.html
@@ -458,6 +458,12 @@ <h2>Go Further</h2>
</div>
</footer>
<script>
+ let screenWidth = window.innerWidth;
+ window.addEventListener("resize", () => {
+ screenWidth = window.innerWidth;
+ })
+
+
<!-- Hamburger animation -->
const btn = document.getElementById("btn");
const hamburger = document.getElementById("hamburger");
@@ -466,11 +472,13 @@ <h2>Go Further</h2>
function onClickHamburgerMenu(){
const isActive = hamburger.classList.contains("is-active");
- hamburger.classList.toggle("is-active", !isActive);
- thirdColumn.classList.toggle("show", !isActive);
- thirdColumn.classList.toggle("hide", isActive);
+ if (screenWidth < 992) {
+ hamburger.classList.toggle("is-active", !isActive);
+ thirdColumn.classList.toggle("show", !isActive);
+ thirdColumn.classList.toggle("hide", isActive);
- checkThirdColumn();
+ checkThirdColumn();
+ }
}
btn.onclick = onClickHamburgerMenu;
@@ -481,17 +489,12 @@ <h2>Go Further</h2>
: thirdColumn.style.display = 'block';
}
function toggleThirdColumnVisibility() {
- const screenWidth = getScreenWidth();
-
// Check if the screen width is more than 992px
(screenWidth >= 992)
? (btn.style.display = 'none', thirdColumn.style.display = 'block')
: (btn.style.display = 'block', thirdColumn.style.display = 'none',
hamburger.classList.remove("is-active"));
}
- function getScreenWidth() {
- return window.innerWidth;
- }
window.addEventListener('resize', toggleThirdColumnVisibility);
toggleThirdColumnVisibility();