menu-open-fix

src/assets/css/homepage.css

@@ -96,14 +96,11 @@ section > .container {
 
 .header-menu-toggle {
   display: none;
-
   width: 48px;
   height: 48px;
-
   border: none;
   background: transparent;
   cursor: pointer;
-
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -121,21 +118,26 @@ section > .container {
 
 .header-mobile-menu {
   position: fixed;
-   top: 0;
+  inset: 0;
-  right: 0;
   width: 100%;
   height: 100dvh;
   background: #ffffff !important;
   display: none;
   flex-direction: column;
-  z-index: 1002;
+  z-index: 99999;
+  overflow: hidden;
 }
 
 .header-mobile-menu.active {
   display: flex;
-
+ position: fixed;
+  inset: 0;
+  background: #fff;
+}
+body.menu-open {
+  overflow: hidden;
+  height: 100vh;
 }
-
 .header-mobile-top {
   display: flex;
   align-items: center;
@@ -209,7 +211,9 @@ section > .container {
 }
 .header-mobile-back{
   background-color: #ffffff;
-  
+   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .header-mobile-socials {
   display: flex;

src/assets/js/homepage.js

@@ -1,17 +1,17 @@
 // ====================================هدر===========================
 const headerMenuBtn = document.querySelector('.header-menu-toggle');
 const headerMobileMenu = document.querySelector('.header-mobile-menu');
+const headerCloseBtn = document.querySelector('.header-mobile-close');
 
 headerMenuBtn.addEventListener('click', () => {
-  headerMobileMenu.classList.toggle('active');
+  headerMobileMenu.classList.add('active');
+  document.body.classList.add('menu-open');
 });
 
-const headerCloseBtn = document.querySelector('.header-mobile-close');
-
 headerCloseBtn.addEventListener('click', () => {
   headerMobileMenu.classList.remove('active');
+  document.body.classList.remove('menu-open');
 });
-
 // ==========================هیروسکشن===================================
 
 window.addEventListener('load', () => {