MathewFrancis/cezenGIT
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drop down for nav bar

Browse Source
This commit is contained in:
MathewFrancis 2025-05-29 18:06:43 +05:30
parent adad73c48f
commit 4cec4cac32
6 changed files with 100 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001
View File

Binary file not shown.

BIN
MySQL_conf_pbx/test1/mariadb_data/aria_log_control
View File

Binary file not shown.

38
MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.css Normal file
View File

@ -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;
}

11
MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/drop_down/navBarDropDown.jsx Normal file
View File

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

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

@ -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>
);

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

@ -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%);
}