Merge pull request #91 from VasylievYurii/fix/auth-button-css-for-media

fixes
VasylievYurii · Jul 4, 2023 · 5f53db4 · 5f53db4
2 parents 67dd3cc + 0b3541a
commit 5f53db4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/js/auth/modal-auth/eventsProcessor.js b/src/js/auth/modal-auth/eventsProcessor.js
@@ -13,9 +13,12 @@ const { login, logout, register, auth } = useUserAuth();
 const { putCartToFirebase } = useFireStore();
 
 const modalAuthRootRef = document.querySelector('.auth-modal-root');
-const menuAuthRootRef = document.querySelector('.auth-menu-root');
+const menuAuthRootListRef = document.querySelectorAll('.auth-menu-root');
+// const menuAuthRootListRef = document.querySelector('.auth-menu-root');
 const themeSelectorRef = document.querySelector('#toggle-theme');
 
+console.log(menuAuthRootListRef);
+
 let _theme = 'light';
 let _mode = 'signin';
 
@@ -27,7 +30,7 @@ onAuthStateChanged(auth, user => {
     return;
   }
   localStorage.setItem('signeduser', user.uid);
-  menuAuthRootRef.innerHTML = composeAuthButton(user);
+  menuAuthRootListRef.forEach(elem => elem.innerHTML = composeAuthButton(user));
   bindButtonEvents(onLogOut);
   fireLoggedIn()
 });
@@ -38,7 +41,7 @@ const bindButtonEvents = cb => {
 };
 
 export const initAuth = () => {
-  menuAuthRootRef.innerHTML = composeAuthButton(null);
+menuAuthRootListRef.forEach(elem => (elem.innerHTML = composeAuthButton(null)));
   bindButtonEvents(onModalOpen);
 };
 
@@ -98,7 +101,9 @@ const onSignUpSubmit = e => {
   register({ username, password, displayName })
     .then(user => {
       putCartToFirebase([]);
-      menuAuthRootRef.innerHTML = composeAuthButton(user);
+      menuAuthRootListRef.forEach(
+        elem => (elem.innerHTML = composeAuthButton(user))
+      );
       bindButtonEvents(onLogOut);
       onModalClose();
     })

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -38,7 +38,7 @@
                   <use href="./images/sprite.svg#logo"></use>
                 </svg>
               </a>
-              <div class="auth-menu-root"></div>
+              <!-- <div class="auth-menu-root"></div> -->
               <ul class="header-nav">
                 <li>
                   <a href="./index.html" class="header-link-home">HOME</a>
@@ -57,7 +57,7 @@
               <input type="checkbox" id="toggle-theme" />
               <label for="toggle-theme" class="toggle"></label>
             </div>
-            <div class="auth-menu-root"></div>
+            <!-- <div class="auth-menu-root"></div> -->
             <button type="button" class="mobile-menu-close-btn">
               <svg class="mobile-menu-close-btn-icon">
                 <use href="./images/sprite.svg#close"></use>

diff --git a/src/sass/_header.scss b/src/sass/_header.scss
@@ -128,7 +128,7 @@ a:link {
   transform: translateX(20px);
 }
 @media screen and (max-width: 767px) {
-  .auth-menu-root,
+  .header>.auth-menu-root,
   .header-nav {
     display: none;
   }