drop down for nav bar

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.css

@@ -0,0 +1,38 @@
+.drop-down-pills {
+  background-color: #caf0f8;
+  border-radius: 0rem 2rem 2rem 2rem;
+  padding: 1rem 0rem;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.8);
+  transition: all 0.6s;
+}
+.drop-down-pills:hover {
+  box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8);
+}
+
+.drop-down-pills li {
+  list-style: none;
+  margin: 1rem;
+  padding: 1rem 1rem;
+  font-size: 1.8rem;
+  /* background-color: #1f3890 #befffd;
+  color: #1f3890; */
+  border-bottom: 0.2rem solid #caf0f8;
+  text-transform: capitalize;
+  transition: all 0.3s;
+}
+
+.drop-down-pills li:hover {
+  cursor: pointer;
+  font-size: 1.82rem;
+  border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8);
+  /* background-color: #1f3890;
+  color: #befffd; */
+}
+
+.log-out {
+  background-color: #8c1c13;
+  color: #ffe1df;
+  text-align: center;
+  font-weight: 900;
+  border-radius: 1rem;
+}

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.jsx

@@ -0,0 +1,11 @@
+import "./navBarDropDown.css";
+
+export default function NavBarDropDown({ children }) {
+  return (
+    <>
+      <div className="drop-down-pills">
+        <ul>{children}</ul>
+      </div>
+    </>
+  );
+}

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

@@ -2,22 +2,50 @@ import "./navStyleImpl.css";
 import CezenBanner from "../login-logout/cezenBanar";
 import operationsLogo from "../../assets/hammer-spanner-svgrepo-com.svg";
 import profileLogo from "../../assets/profile-circle-svgrepo-com.svg";
+import NavBarDropDown from "./drop_down/navBarDropDown";
+
+import { useNavigate } from "react-router-dom";
 
 export default function NavBar() {
+  const navTo = useNavigate();
+
   return (
     <nav className="navigation">
       <div>
         <CezenBanner className="cezen_banner_top" />
       </div>
       <div className="RHS_nav">
-        <div>
+        <div className="RHS_nav_pill">
           <img src={operationsLogo} />
           operations
         </div>
-        <div>
+        <div className="drop-down pos_operations">
+          <NavBarDropDown>
+            {/* css is defined in the NavBarDropDown.css folder*/}
+            <li>End-Points</li>
+            <li>Features</li>
+            <li>Groups</li>
+          </NavBarDropDown>
+        </div>
+        <div className="RHS_nav_pill">
           <img src={profileLogo} />
           profile
         </div>
+        <div className="drop-down pos_profile">
+          <NavBarDropDown>
+            {/* css is defined in the NavBarDropDown.css folder*/}
+            <li>Edit Profile</li>
+            <li
+              className="log-out"
+              onClick={() => {
+                console.log("logout");
+                navTo("/log-in");
+              }}
+            >
+              Log-Out
+            </li>
+          </NavBarDropDown>
+        </div>
       </div>
     </nav>
   );

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

@@ -53,16 +53,17 @@
   align-items: center;
   text-transform: uppercase;
   margin-right: 1rem;
+  position: relative;
 }
 
-.RHS_nav div {
+.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;
 }
 
-.RHS_nav div:hover {
+.RHS_nav .RHS_nav_pill:hover {
   padding-left: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8);
@@ -75,3 +76,21 @@
   margin-right: 0.6rem;
   margin-bottom: -0.4rem;
 }
+
+.drop-down {
+  position: absolute;
+  /* the width of the drop down */
+  min-width: 14rem;
+}
+
+.pos_operations {
+  top: 100%;
+  left: 2.5%;
+  transform: translate(-5%, 1%);
+}
+
+.pos_profile {
+  top: 100%;
+  left: 60.5%;
+  transform: translate(-5%, 1%);
+}