From 4cec4cac32f57de81c3aada50b94746727495334 Mon Sep 17 00:00:00 2001
From: MathewFrancis <mathewfvv@gmail.com>
Date: Thu, 29 May 2025 18:06:43 +0530
Subject: [PATCH] drop down for nav bar

---
 .../test1/mariadb_data/aria_log.00000001      | Bin 4898816 -> 4898816 bytes
 .../test1/mariadb_data/aria_log_control       | Bin 52 -> 52 bytes
 .../landing-page/drop_down/navBarDropDown.css |  38 ++++++++++++++++++
 .../landing-page/drop_down/navBarDropDown.jsx |  11 +++++
 .../src/components/landing-page/navBar.jsx    |  32 ++++++++++++++-
 .../components/landing-page/navStyleImpl.css  |  23 ++++++++++-
 6 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.css
 create mode 100644 MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.jsx

diff --git a/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001 b/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001
index 572970d7b9514e9351d290474534cfa4b6cf8db5..7ad1ad9b87d2dd181a235d1981777b9ec367e988 100644
GIT binary patch
delta 194
zcmXBDH&Oxt006)f1D+_NB7zCb2@IHXLd5I*iBGs<e_%mtb&ahvmKK!uzQBLzIPT2G
z@oOsnt4m6^9=-ac^$QKi7&IhnSk8!1WAeroOeiXuG-cY1S!ES-<}FyXWZ8;UYu0V3
zs@b$<+m5<jd-feTbmZ8HQ)kXyxOC;(jav<On(nncyhWX){qYio*-jD#LGbhMyZ!i;
O$v;0;!uQW43QNDga7Xt5

delta 168
zcmWl|TQWic007W&DUYHeQ68x%l_-%^xSqwT?#J0fpZ@&#GSd#)kR=#r=0wqV5dF6x
zuxLq4+_Dv`)+8jY+mMo$v1v=zwwxWi@(T9sJ8-DzNJ&}6u@hA_r|KG-&a|An(AIIO
o>&msB8-2G1hDPq(dk}i`<k^c?Z^kCxXCL#g>F;MQ{S&tGe*~yG_5c6?

diff --git a/MySQL_conf_pbx/test1/mariadb_data/aria_log_control b/MySQL_conf_pbx/test1/mariadb_data/aria_log_control
index 364c3d62a392554507663ee2d6ad4e7d6dd441bd..f676f1fbafa41376a456ff123aa2ee93e401765f 100644
GIT binary patch
delta 27
gcmXppnII>YTL0LKk%8gxGA{-o#qfj`NH8z}0A|Jo+yDRo

delta 27
gcmXppnII>|DB5+Ek%3|QGA{-o#c+oeNH8z}09FkJ3;+NC

diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.css b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.css
new file mode 100644
index 0000000..920f800
--- /dev/null
+++ b/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;
+}
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.jsx b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.jsx
new file mode 100644
index 0000000..cf13d17
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navBar.jsx b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navBar.jsx
index ebd5ec9..f13bccb 100755
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navBar.jsx
+++ b/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>
   );
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css
index bb570fa..302d7c9 100755
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css
+++ b/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%);
+}