Navbar and UI changes

Just some general nav updates

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>

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>

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;

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;
   }
@@ -27,19 +27,24 @@
   }
 
   .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 {
+  .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: white;
+    background-color: rgba(255, 0, 0, 0.552);
     padding: 10px;
-    color: black;
-    transition: 0.3s ease-in;
+    color: rgb(255, 255, 255);
   }
 
   .navbar .rightSide button {