Merge pull request #102 from Valik3201/refactor/mobile-menu-auth

Refactor/mobile menu auth
Valik3201 · Jan 6, 2024 · f7970b0 · f7970b0
2 parents fdfe1c1 + db98b05
commit f7970b0
Show file tree

Hide file tree

Showing 11 changed files with 257 additions and 147 deletions.
diff --git a/src/index.html b/src/index.html
@@ -36,6 +36,8 @@
     <!-- Plik HTML zawierający kod dla modalnego okna z informacjami o książce -->
     <include src="./partials/modals/book-popup.html"></include>
 
+    <include src="./partials/home/home-mobile-menu.html"></include>
+
     <button id="scrollUp">
       <svg width="20px" height="20px">
         <use href="/src/images/icons.svg#icon-scroll-up"></use>

diff --git a/src/js/auth.js b/src/js/auth.js
@@ -8,9 +8,12 @@ import { onAuthStateChangedListener } from './auth/authStateListener.js';
 const signUpModal = document.querySelector('.sign-up-modal');
 const signInModal = document.querySelector('.sign-in-modal');
 
-export const signUpButton = document.querySelector('.sign-up-button');
+export const signUpButtons = document.querySelectorAll('.sign-up-button');
 export const logOutButton = document.querySelector('#log-out');
 
+export const userProfileMobile = document.querySelector('#mobile-user-profile');
+export const userNameDisplayMobile = document.querySelector('#user-name-display-mobile');
+
 const logOutMobileButton = document.querySelector('#mobile-log-out-button');
 
 const switchToSignInButtons = document.querySelectorAll('[data-switch="sign-in"]');
@@ -34,9 +37,11 @@ let currentForm = 'sign-up';
 
 onAuthStateChangedListener(userNameDisplay);
 
-signUpButton.addEventListener('click', function () {
-  currentForm = 'sign-up';
-  showForm(currentForm);
+signUpButtons.forEach(button => {
+  button.addEventListener('click', function () {
+    currentForm = 'sign-up';
+    showForm(currentForm);
+  });
 });
 
 switchToSignInButtons.forEach(button => {

diff --git a/src/js/auth/authStateListener.js b/src/js/auth/authStateListener.js
@@ -5,10 +5,12 @@ import { auth } from './firebase.js';
 import {
   logOutButton,
   handleLogout,
-  signUpButton,
+  signUpButtons,
   userProfile,
   userButton,
   userNavList,
+  userProfileMobile,
+  userNameDisplayMobile,
 } from '../auth.js';
 
 export const onAuthStateChangedListener = userNameDisplay => {
@@ -17,17 +19,25 @@ export const onAuthStateChangedListener = userNameDisplay => {
       const displayName = user.displayName;
 
       userNameDisplay.textContent = displayName;
+      userNameDisplayMobile.textContent = displayName;
+
       userProfile.classList.remove('hidden');
       userButton.classList.remove('hidden');
-      signUpButton.classList.add('hidden');
+      userProfileMobile.classList.remove('hidden');
+      signUpButtons.forEach(function (button) {
+        button.classList.add('hidden');
+      });
       userNavList.classList.remove('hidden');
 
       logOutButton.addEventListener('click', handleLogout);
     } else {
       userNameDisplay.textContent = '';
       userProfile.classList.add('hidden');
       userButton.classList.add('hidden');
-      signUpButton.classList.remove('hidden');
+      userProfileMobile.classList.add('hidden');
+      signUpButtons.forEach(function (button) {
+        button.classList.remove('hidden');
+      });
       userNavList.classList.add('hidden');
     }
   });

diff --git a/src/js/mobileMenu.js b/src/js/mobileMenu.js
@@ -2,32 +2,35 @@ import { onAuthStateChanged } from 'firebase/auth';
 
 import { auth } from './auth/firebase';
 
-const openMenuButton = document.querySelector('.open-mobile-menu');
-const closeMenuButton = document.querySelector('#close-sing-up-mobile-menu');
-const windowSize = window.matchMedia('(min-width: 768px)');
+const openMenuButton = document.querySelector('.hamburger-button');
+const closeMenuButton = document.querySelector('.close-button');
+
 const mobileMenuSingUp = document.querySelector('#sing-up-mobile-menu');
 
+closeMenuButton.classList.add('mobile-menu-close');
+
 const openMenu = () => {
-  mobileMenuSingUp.style.display = 'block';
   setTimeout(() => {
     mobileMenuSingUp.style.transform = 'translateX(0)';
+
+    closeMenuButton.classList.remove('mobile-menu-close');
+    closeMenuButton.classList.add('mobile-menu-open');
+    openMenuButton.classList.remove('mobile-menu-open');
+    openMenuButton.classList.add('mobile-menu-close');
   }, 1);
 };
 
 const closeMenu = () => {
   mobileMenuSingUp.style.transform = 'translateX(-100%)';
   setTimeout(() => {
     mobileMenuSingUp.style.transform = 'translateX(-100%)';
+
+    closeMenuButton.classList.remove('mobile-menu-open');
+    closeMenuButton.classList.add('mobile-menu-close');
+    openMenuButton.classList.remove('mobile-menu-close');
+    openMenuButton.classList.add('mobile-menu-open');
   }, 500);
 };
 
-//closing mobile menu function if window size is bigger than 768px
-function mobileMenuClose(event) {
-  if (event.matches) {
-    mobileMenuSingUp.style.display = 'none';
-  }
-}
-
 openMenuButton.addEventListener('click', openMenu);
 closeMenuButton.addEventListener('click', closeMenu);
-windowSize.addEventListener('change', mobileMenuClose);
diff --git a/src/partials/authorization/auth.html b/src/partials/authorization/auth.html
@@ -1,72 +1,82 @@
-<!-- Authorization  -->
-<button type="button" class="sign-up-button sign-up-modal-open">
-  <span class="sign-up-text">Sign up</span>
-  <svg class="arrow-right-icon" width="20" height="20">
-    <use href="/src/images/icons.svg#icon-arrow-right"></use>
-  </svg>
-</button>
+<!-- Authorization Section -->
 
+<!-- User Profile Section -->
 <div id="user-profile">
-  <div id="user-info" class="sign-up-button">
+  <!-- User information display with profile image, name, and dropdown arrow -->
+  <div id="user-info" class="sign-up-button-auth">
     <div id="user-profile-image">
+      <!-- User profile image icon -->
       <svg width="12" height="16" fill="#4F2EE8">
         <use href="/src/images/icons.svg#icon-user"></use>
       </svg>
     </div>
-
+    <!-- User name display -->
     <div id="user-name-display"></div>
-
+    <!-- Dropdown arrow icon -->
     <svg id="user-dropdown-arrow" width="20" height="20" fill="#fff">
       <use href="/src/images/icons.svg#icon-arrow-user"></use>
     </svg>
   </div>
+  <!-- User dropdown menu with log-out button -->
   <div id="user-dropdown-menu" class="hidden">
     <button id="log-out" class="log-out-button">
       <span>Log Out</span>
+      <!-- Arrow icon next to the log-out button -->
       <svg class="arrow-right-icon" width="13" height="10">
         <use href="/src/images/icons.svg#icon-arrow-right"></use>
       </svg>
     </button>
   </div>
 </div>
 
-<!-- Sign Up modal -->
+<!-- Sign Up Modal Section -->
 <div class="sign-up-modal is-hidden">
   <div class="form-field">
+    <!-- Close button for the sign-up modal -->
     <button type="button" class="sign-up-modal-close">
+      <!-- Close icon for the button -->
       <svg class="signup-close-icon" width="14px" height="14px">
         <use href="/src/images/icons.svg#icon-close"></use>
       </svg>
     </button>
     <div class="form-div">
+      <!-- Sign-up form with input fields and buttons -->
       <form name="signup-form" autocomplete="on" novalidate class="sign-up-form">
+        <!-- Input fields for name, email, and password -->
         <div class="form-inputs">
+          <!-- Name input field -->
           <div class="input-position hf-style">
             <label>
               <span class="input-text hf-style">Name</span>
               <input type="text" name="name" class="inputs hf-style" />
             </label>
           </div>
+          <!-- Email input field with icon -->
           <div class="input-position hf-style">
             <label>
               <span class="input-text hf-style">Email</span>
               <input type="email" name="email" class="inputs hf-style" />
+              <!-- Email icon next to the input field -->
               <svg class="icon-mobile-position hf-style" width="21px" height="21px">
                 <use href="/src/images/icons.svg#icon-email"></use>
               </svg>
             </label>
           </div>
+          <!-- Password input field with icon -->
           <div class="input-position hf-style">
             <label>
               <span class="input-text hf-style">Password</span>
               <input type="password" name="password" class="inputs hf-style" />
+              <!-- Lock icon next to the password input field -->
               <svg class="icon-mobile-position hf-style" width="21px" height="21px">
                 <use href="/src/images/icons.svg#icon-lock"></use>
               </svg>
             </label>
           </div>
+          <!-- Sign-up button -->
           <button type="submit" id="sign-up" class="sign-button-form">SIGN UP</button>
         </div>
+        <!-- Modal buttons for switching between sign-up and sign-in -->
         <div class="modal-buttons">
           <button type="button" data-switch="sign-up" class="buttons-style button-sign-up">
             SIGN UP
@@ -78,37 +88,47 @@
   </div>
 </div>
 
-<!-- Sign In modal -->
+<!-- Sign In Modal Section -->
 <div class="sign-in-modal is-hidden">
   <div class="form-field">
+    <!-- Close button for the sign-in modal -->
     <button type="button" class="sign-in-modal-close">
+      <!-- Close icon for the button -->
       <svg class="signup-close-icon" width="14px" height="14px">
         <use href="/src/images/icons.svg#icon-close"></use>
       </svg>
     </button>
     <div class="form-div">
+      <!-- Sign-in form with input fields and buttons -->
       <form name="signin-form" autocomplete="on" novalidate class="sign-in-form">
+        <!-- Input fields for email and password -->
         <div class="form-inputs">
+          <!-- Email input field with icon -->
           <div class="input-position hf-style">
             <label>
               <span class="input-text hf-style">Email</span>
               <input type="email" name="email" class="inputs hf-style" />
+              <!-- Email icon next to the input field -->
               <svg class="icon-mobile-position hf-style" width="21px" height="21px">
                 <use href="/src/images/icons.svg#icon-email"></use>
               </svg>
             </label>
           </div>
+          <!-- Password input field with icon -->
           <div class="input-position hf-style">
             <label>
               <span class="input-text hf-style">Password</span>
               <input type="password" name="password" class="inputs hf-style" />
+              <!-- Lock icon next to the password input field -->
               <svg class="icon-mobile-position hf-style" width="21px" height="21px">
                 <use href="/src/images/icons.svg#icon-lock"></use>
               </svg>
             </label>
           </div>
+          <!-- Sign-in button -->
           <button type="submit" id="sign-in" class="sign-button-form">SIGN IN</button>
         </div>
+        <!-- Modal buttons for switching between sign-up and sign-in -->
         <div class="modal-buttons">
           <button type="button" data-switch="sign-up" class="buttons-style button-sign-up">
             SIGN UP
@@ -119,3 +139,4 @@
     </div>
   </div>
 </div>
+<!-- End of Authorization Section -->