Merge pull request #152 from aadi-joshi/add-register-to-navbar

Added a 'Register' button to the navbar and drop-down menu that directly navigates to the sign-up page.
Mujtabaa07 · Jan 2, 2025 · 4119652 · 4119652
2 parents bb4c248 + 8a27129
commit 4119652
Show file tree

Hide file tree

Showing 3 changed files with 220 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -59,13 +59,13 @@ Once the server is running, you can view the app at (http://localhost:3000).
 
 ## ScreenShots:
 ## **Home Page:** 
-![homepage](https://github.com/user-attachments/assets/36a7852c-dd6d-40b2-9652-4c4a3f9d46fc)
+![homepage](https://github.com/user-attachments/assets/2dc9b51d-ce06-4eb6-89fb-774867ede12c)
 ## **Coffee Menu:**
-![coffeemenu](https://github.com/user-attachments/assets/0f9583d8-e2a8-4797-8e13-9d8325f58764)
+![coffeemenu](https://github.com/user-attachments/assets/014c6a7a-03ab-4bdf-88e1-bb3c11d66447)
 ## **Login Page**
-![coffeelogin](https://github.com/user-attachments/assets/e29ee634-69c4-45a3-978c-a797cf62487f)
+![coffeelogin](https://github.com/user-attachments/assets/c6c7c645-475d-4658-a47c-f0ada0b177d1)
 ## **Testimonials**
-![testimonials](https://github.com/user-attachments/assets/af0b4e1f-5363-4b71-8c5c-fe1ba244edb3)
+![testimonials](https://github.com/user-attachments/assets/38d811e3-4acc-4901-9a3d-8e4185c96a2c)
 ## Contributing
 We welcome contributions! Follow the steps below to contribute to this project:
 ```bash

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useLocation} from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { logout } from '../Store/authSlice';
 import styled from 'styled-components';
@@ -206,56 +206,61 @@ function Navbar() {
 
           {/* <!-- ------NavLink:::::Home-------------------> */}
           <NavLink className={location.pathname === '/' ? 'active' : ''}
-          whileHover={{ scale: 1.05 }}>
+            whileHover={{ scale: 1.05 }}>
             <Link to="/">Home</Link>
           </NavLink>
           {/* <!-- ------NavLink:::::Shop-------------------> */}
           <NavLink className={location.pathname === '/shop' ? 'active' : ''}
-          whileHover={{ scale: 1.05 }}>
+            whileHover={{ scale: 1.05 }}>
             <Link to="/shop">Shop</Link>
           </NavLink>
 
           {/* <!-- ------NavLink:::::About-------------------> */}
-          <NavLink className={location.pathname === '/about' ? 'active' : ''} 
-          whileHover={{ scale: 1.05 }}>
+          <NavLink className={location.pathname === '/about' ? 'active' : ''}
+            whileHover={{ scale: 1.05 }}>
             <Link to="/about">About</Link>
           </NavLink>
 
           {/* <!-- ------NavLink::::Testinomial-------------------> */}
           <NavLink className={location.pathname === '/testimonial' ? 'active' : ''}
-          whileHover={{ scale: 1.05 }}>
+            whileHover={{ scale: 1.05 }}>
             <Link to="/testimonial">Testimonial</Link>
           </NavLink>
-          
+
           {/* <!-- ------NavLink:::::Contacts-------------------> */}
           <NavLink className={location.pathname === '/contact' ? 'active' : ''}
-          whileHover={{ scale: 1.05 }}>
+            whileHover={{ scale: 1.05 }}>
             <Link to="/contact">Contact</Link>
           </NavLink>
-          
+
           {isLoggedIn ? (
             <>
               <NavLink className={location.pathname === '/profile' ? 'active' : ''}
-              whileHover={{ scale: 1.05 }}>
+                whileHover={{ scale: 1.05 }}>
                 <Link to="/profile">Profile</Link>
               </NavLink>
-              <NavLink 
-              whileHover={{ scale: 1.05 }}>
+              <NavLink
+                whileHover={{ scale: 1.05 }}>
                 <Link to="/cart">Cart</Link>
               </NavLink>
               <NavLink className={location.pathname === '/cart' ? 'active' : ''}
-                whileHover={{ scale: 1.05 }} 
+                whileHover={{ scale: 1.05 }}
                 onClick={handleLogout}
                 style={{ cursor: 'pointer' }}
               >
                 Logout
               </NavLink>
             </>
           ) : (
-            <NavLink className={location.pathname === '/login' ? 'active' : ''}
-            whileHover={{ scale: 1.05 }}>
+            // navbar login and register buttons
+            <><NavLink className={location.pathname === '/login' ? 'active' : ''}
+              whileHover={{ scale: 1.05 }}>
               <Link to="/login">Login</Link>
             </NavLink>
+              <NavLink className={location.pathname === '/register' ? 'active' : ''}
+                whileHover={{ scale: 1.05 }}>
+                <Link to="/register">Register</Link>
+              </NavLink></>
           )}
         </NavLinks>
         <MobileMenuButton
@@ -300,18 +305,21 @@ function Navbar() {
                 <MobileNavLink whileHover={{ scale: 1.02 }}>
                   <Link to="/cart" onClick={toggleMenu}>Cart</Link>
                 </MobileNavLink>
-                <MobileNavLink 
-                  whileHover={{ scale: 1.02 }} 
+                <MobileNavLink
+                  whileHover={{ scale: 1.02 }}
                   onClick={() => { handleLogout(); toggleMenu(); }}
                   style={{ cursor: 'pointer' }}
                 >
                   Logout
                 </MobileNavLink>
               </>
             ) : (
-              <MobileNavLink whileHover={{ scale: 1.02 }}>
+              <><MobileNavLink whileHover={{ scale: 1.02 }}>
                 <Link to="/login" onClick={toggleMenu}>Login</Link>
               </MobileNavLink>
+                <MobileNavLink whileHover={{ scale: 1.02 }}>
+                  <Link to="/register" onClick={toggleMenu}>Register</Link>
+                </MobileNavLink></>
             )}
           </MobileMenu>
         )}