From 2d2ea2d0dd759ac418f3e92acaaea24cd766b5c1 Mon Sep 17 00:00:00 2001
From: Dev EhChad <devehchad@gmail.com>
Date: Thu, 25 Jan 2024 03:42:32 -0500
Subject: [PATCH] Navbar and UI changes

Just some general nav updates
---
 src/App.js               |  5 +++++
 src/components/Navbar.js | 18 +++++++++---------
 src/styles/Footer.css    |  2 +-
 src/styles/Navbar.css    | 31 ++++++++++++++++++-------------
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/App.js b/src/App.js
index 23863e7..32051c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,10 +13,15 @@ function App() {
       <Router>
         <Navbar />
         <Routes>
+         
           <Route path="/" exact element={<Home />} />
+          
           <Route path="/shop" exact element={<Shop />} />
+          
           <Route path="/about" exact element={<About />} />
+         
           <Route path="/contact" exact element={<Contact />} />
+  
         </Routes>
         <Footer />
       </Router>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index efdd4dd..3a88a1d 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Logo from '../assets/images.png';
-import { Link, NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import ReorderIcon from '@mui/icons-material/Reorder';
 import '../styles/Navbar.css'
 
@@ -16,17 +16,17 @@ function Navbar() {
         <div className='leftSide' id={openLinks ? "open" : "close"}>
             <img src={Logo} />
             <div className='hiddenLinks'>        
-            <Link to="/"> Home </Link>
-            <Link to="/shop"> Shop </Link>
-            <Link to="/about"> About </Link>
-            <Link to="/contact"> Contact </Link>
+            <NavLink to="/"> Home </NavLink>
+            <NavLink to="/shop"> Shop </NavLink>
+            <NavLink to="/about"> About </NavLink>
+            <NavLink to="/contact"> Contact </NavLink>
             </div>
         </div>
         <div className='rightSide'>
-          <Link to="/"> Home </Link>
-          <Link to="/shop"> Shop </Link>
-          <Link to="/about"> About </Link>
-          <Link to="/contact"> Contact </Link>
+            <NavLink to="/"> Home </NavLink>
+            <NavLink to="/shop"> Shop </NavLink>
+            <NavLink to="/about"> About </NavLink>
+            <NavLink to="/contact"> Contact </NavLink>
           <button onClick={toggleNavbar}>
             <ReorderIcon />
           </button>
diff --git a/src/styles/Footer.css b/src/styles/Footer.css
index b51e757..09fd11b 100644
--- a/src/styles/Footer.css
+++ b/src/styles/Footer.css
@@ -4,7 +4,7 @@
   min-height: 100%;
   margin-top: 10px;
   margin-top: auto;
-  background-color: #121619;
+  background-color: #000000;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
index 9af89f4..3a0f852 100644
--- a/src/styles/Navbar.css
+++ b/src/styles/Navbar.css
@@ -1,7 +1,7 @@
 .navbar {
     width: 100svw;
-    height: 100px;
-    background-color: #121619;
+    height: 80px;
+    background-color: #000000;
     display: flex;
     flex-direction: row;
   }
@@ -25,23 +25,28 @@
     align-items: center;
     justify-content: center;
   }
- 
+
   .navbar a {
-    color: white;
+    color: rgb(255, 255, 255);
     text-decoration: none;
-    margin: 20px;
-    font-size: 20px;
+    margin: 10px;
+    font-size: 18px;
   }
 
-  .navbar a:active, .navbar a:hover {
-    font-size: 22px;
-    border-radius: 15%;
-    background-color: white;
-    padding: 10px;
-    color: black;
+  .navbar a:hover {
+    font-size: 20px;
+    color: rgb(255, 0, 0);
     transition: 0.3s ease-in;
   }
-  
+
+  .navbar a.active {
+    font-size: 22px;
+    border-radius: 15%;
+    background-color: rgba(255, 0, 0, 0.552);
+    padding: 10px;
+    color: rgb(255, 255, 255);
+  }
+
   .navbar .rightSide button {
     background-color: transparent;
     border: none;