hover nav bar

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navBar.jsx

@@ -10,32 +10,17 @@ import { useState } from "react";
 export default function NavBar() {
   const navTo = useNavigate();
 
-  // useState for boolean trigger... when inverted
-  // it should display the associated drop down message
-  const [operations, operationsInverter] = useState(false);
-  const [profile, profileInverter] = useState(false);
-
-  const truthInverter = () => {
-    profileInverter((prev) => (prev = false));
-    operationsInverter((prev) => (prev = !prev));
-  };
-
-  const profInverter = () => {
-    operationsInverter((prev) => (prev = false));
-    profileInverter((prev) => (prev = !prev));
-  };
-
   return (
     <nav className="navigation">
       <div>
         <CezenBanner className="cezen_banner_top" />
       </div>
-      <div className="RHS_nav">
-        <div className="RHS_nav_pill" onClick={truthInverter}>
-          <img src={operationsLogo} />
-          operations
-        </div>
-        {operations && (
+      <div className="nav-item">
+        <div className="RHS_nav ops">
+          <div className="RHS_nav_pill">
+            <img src={operationsLogo} />
+            <span> operations</span>
+          </div>
           <div className="drop-down pos_operations">
             <NavBarDropDown>
               {/* css is defined in the NavBarDropDown.css folder*/}
@@ -56,12 +41,12 @@ export default function NavBar() {
               <li>Groups</li>
             </NavBarDropDown>
           </div>
-        )}
-        <div className="RHS_nav_pill" onClick={profInverter}>
-          <img src={profileLogo} />
-          profile
         </div>
-        {profile && (
+        <div className="RHS_nav prof">
+          <div className="RHS_nav_pill">
+            <img src={profileLogo} />
+            <span className="profile_text"> profile</span>
+          </div>
           <div className="drop-down pos_profile">
             <NavBarDropDown>
               {/* css is defined in the NavBarDropDown.css folder*/}
@@ -83,7 +68,7 @@ export default function NavBar() {
               </li>
             </NavBarDropDown>
           </div>
-        )}
+        </div>
       </div>
     </nav>
   );

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css

@@ -17,15 +17,24 @@
   margin-left: 0rem;
 }
 
-.navigation span:hover {
-  cursor: pointer;
-  margin-right: 0.4rem;
-  margin-left: 0.4rem;
+.nav-item {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 2.4rem;
+  /* align-items: center; */
 }
 
 .cezen_banner_top {
   display: flex;
   flex-direction: row;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
+.cezen_banner_top:hover {
+  cursor: pointer;
 }
 
 .cezen_banner_top h1 {
@@ -47,50 +56,68 @@
 
 .RHS_nav {
   color: #1f3890;
-  display: flex;
-  flex-direction: row;
-  gap: 2.4rem;
-  align-items: center;
   text-transform: uppercase;
   margin-right: 1rem;
-  position: relative;
+  padding: 1.5rem 0rem;
+  border-bottom: 0.4rem solid rgba(202, 240, 248, 0.3);
+  transition: all 0.3s;
+  align-self: center;
+}
+
+.RHS_nav:hover {
+  border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8);
+  margin-bottom: 0rem;
 }
 
 .RHS_nav .RHS_nav_pill {
-  padding-left: 1rem;
-  padding-bottom: 0rem;
-  border-bottom: 0.4rem solid rgba(202, 240, 248, 0.3);
-  transition: all 0.3s;
+  display: flex;
 }
 
 .RHS_nav .RHS_nav_pill:hover {
-  padding-left: 1rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8);
-  cursor: pointer;
-  margin-bottom: 0rem;
 }
 
 .RHS_nav div img {
   max-width: 2.2rem;
   margin-right: 0.6rem;
-  margin-bottom: -0.4rem;
+  margin-bottom: -0.8rem;
+}
+.RHS_nav div span {
+  margin-right: 7rem;
+  margin-top: 1rem;
+}
+.RHS_nav div .profile_text {
+  margin-right: 3.2rem;
 }
 
 .drop-down {
   position: absolute;
   /* the width of the drop down */
-  min-width: 14rem;
+  min-width: 16rem;
+  padding: 1.4rem;
+  padding-top: 2.4rem;
+  background: rgba(0, 137, 133, 0);
+  display: none;
+}
+
+/* .nav-item:hover .drop-down.pos_operations {
+  display: block;
+} */
+
+.RHS_nav.ops:hover .drop-down.pos_operations {
+  display: block;
+}
+.RHS_nav.prof:hover .drop-down.pos_profile {
+  display: block;
 }
 
 .pos_operations {
-  top: 100%;
-  left: 2.5%;
+  top: 65%;
+  left: -1.5%;
   transform: translate(-5%, 1%);
 }
 
 .pos_profile {
-  top: 100%;
-  left: 60.5%;
+  top: 65%;
+  left: 58%;
   transform: translate(-5%, 1%);
 }