72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
import React from "react";
|
|
|
|
const EmployeeNav = ({ onPillClick, activePill }) => {
|
|
return (
|
|
<div className="col-md-12">
|
|
<div className="nav-align-top ">
|
|
<ul className="nav nav-tabs">
|
|
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
|
<a
|
|
className={`nav-link py-1 px-2 small ${
|
|
activePill === "profile" ? "active" : ""
|
|
}`}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault(); // Prevent page reload
|
|
onPillClick("profile");
|
|
}}
|
|
>
|
|
<i className="icon-base bx bx-user icon-sm me-1_5"></i> Profile
|
|
</a>
|
|
</li>
|
|
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
|
<a
|
|
className={`nav-link py-1 px-2 small ${
|
|
activePill === "attendance" ? "active" : ""
|
|
}`}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault(); // Prevent page reload
|
|
onPillClick("attendance");
|
|
}}
|
|
>
|
|
<i className="bx bx-group bx-sm me-1_5"></i> Attendances
|
|
</a>
|
|
</li>
|
|
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
|
<a
|
|
className={`nav-link py-1 px-2 small ${
|
|
activePill === "documents" ? "active" : ""
|
|
}`}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault(); // Prevent page reload
|
|
onPillClick("documents");
|
|
}}
|
|
>
|
|
<i className="bx bx-user bx-sm me-1_5"></i> Documents
|
|
</a>
|
|
</li>
|
|
|
|
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
|
<a
|
|
className={`nav-link py-1 px-2 small ${
|
|
activePill === "activities" ? "active" : ""
|
|
}`}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault(); // Prevent page reload
|
|
onPillClick("activities");
|
|
}}
|
|
>
|
|
<i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmployeeNav;
|