From e8c220eb916fe2c713c81d6ab79a6173950e7bc4 Mon Sep 17 00:00:00 2001
From: Harjas Singh <83627055+harjasae2001@users.noreply.github.com>
Date: Sat, 26 Oct 2024 20:01:25 +0530
Subject: [PATCH] Refactor Navbar component and CSS

- Update the className in the Navbar component to include the "menu2" class for styling.
- Modify the CSS in Navbar.css to add a new menu style with hover effects.
---
 client/src/component/Navbar.jsx |  2 +-
 client/src/css/Navbar.css       | 53 ++++++++++++++++++++++++++++++++-
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/client/src/component/Navbar.jsx b/client/src/component/Navbar.jsx
index dfc307b..fdd6c39 100644
--- a/client/src/component/Navbar.jsx
+++ b/client/src/component/Navbar.jsx
@@ -133,7 +133,7 @@ function Navbar(props) {
             id="navbarSupportedContent"
           >
             <ul
-              className="navbar-nav mb-2 mb-lg-0 gap-3 fw-medium"
+              className="navbar-nav mb-2 mb-lg-0 gap-3 fw-medium menu2"
               style={{ position: "absolute", left: "36%" }}
             >
               <li className="nav-item fs-4 fw-medium">
diff --git a/client/src/css/Navbar.css b/client/src/css/Navbar.css
index 573483b..2b08687 100644
--- a/client/src/css/Navbar.css
+++ b/client/src/css/Navbar.css
@@ -118,7 +118,7 @@
 }
 
 #navbar ul li:hover {
-  box-shadow: 0 5px 15px rgb(137, 137, 255);
+  /* box-shadow: 0 5px 15px rgb(137, 137, 255); */
   border-radius: 1rem;
   transform: scale(1.025);
 }
@@ -140,6 +140,57 @@
   text-align: center;
 }
 
+.menu2 li{
+  display: block;
+  height: 100%;
+  font-size: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  text-transform: uppercase;
+  transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+  text-align: center;
+  padding: 0 10px;
+}
+
+.menu2 li:after,
+.menu2 li:before {
+  content: "";
+  position: absolute;
+  display: block;
+  border: 0px solid transparent;
+  width: 0%;
+  height: 0%;
+  transition: all 0.5s ease;
+}
+
+.menu2 li:after {
+  width: 0%;
+  height: 0%;
+  top: 0;
+  left: 0;
+  border-top: 3px solid transparent;
+  border-left: 3px solid transparent;
+}
+
+.menu2 li:before {
+  width: 0%;
+  height: 0%;
+  right: 0;
+  bottom: 0;
+  border-bottom: 3px solid transparent;
+  border-right: 3px solid transparent;
+}
+
+.menu2 li:hover::before,
+.menu2 li:hover::after {
+  width: 100%;
+  height: 100%;
+  border-color: #777;
+}
+
 .profile-img img {
   width: 45px;
   border-radius: 50%;