259 lines
13 KiB
JavaScript
Executable File
259 lines
13 KiB
JavaScript
Executable File
import React from 'react';
|
|
import Link from '../../utils/ActiveLink';
|
|
|
|
const Navbar = () => {
|
|
const [menu, setMenu] = React.useState(true)
|
|
|
|
const toggleNavbar = () => {
|
|
setMenu(!menu)
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
let elementId = document.getElementById("navbar");
|
|
document.addEventListener("scroll", () => {
|
|
if (window.scrollY > 170) {
|
|
elementId.classList.add("is-sticky");
|
|
} else {
|
|
elementId.classList.remove("is-sticky");
|
|
}
|
|
});
|
|
})
|
|
|
|
const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
|
|
const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
|
|
|
|
return (
|
|
<div id="navbar" className="navbar-area sticky-top">
|
|
<div className="main-nav">
|
|
<div className="container">
|
|
<nav className="navbar navbar-expand-md navbar-light">
|
|
<Link href="/">
|
|
<a onClick={toggleNavbar} className="navbar-brand">
|
|
<img src="/images/logo.png" alt="logo" />
|
|
</a>
|
|
</Link>
|
|
|
|
<button
|
|
onClick={toggleNavbar}
|
|
className={classTwo}
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span className="icon-bar top-bar"></span>
|
|
<span className="icon-bar middle-bar"></span>
|
|
<span className="icon-bar bottom-bar"></span>
|
|
</button>
|
|
|
|
<div className={classOne} id="navbarSupportedContent">
|
|
<ul className="navbar-nav">
|
|
<li className="nav-item">
|
|
<Link href="#" activeClassName="active">
|
|
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
|
Home
|
|
</a>
|
|
</Link>
|
|
|
|
<ul className="dropdown-menu">
|
|
<li className="nav-item">
|
|
<Link href="/" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Home Demo - 1</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/index-2" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Home Demo - 2</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/index-3" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Home Demo - 3</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/index-4" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Home Demo - 4</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/index-5" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Home Demo - 5</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/about" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">About</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="#">
|
|
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
|
Pages
|
|
</a>
|
|
</Link>
|
|
|
|
<ul className="dropdown-menu">
|
|
<li className="nav-item">
|
|
<Link href="/appointment" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Appointment</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/departments" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Departments</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/testimonials" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Testimonials</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/sign-up" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Sign Up</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/sign-in" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Sign In</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/faq" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">FAQ's</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/404" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/coming-soon" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/privacy-policy" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Privacy Policy</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/terms-condition" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Terms & Conditions</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="#">
|
|
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
|
Services
|
|
</a>
|
|
</Link>
|
|
|
|
<ul className="dropdown-menu">
|
|
<li className="nav-item">
|
|
<Link href="/services" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Services</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/service-details" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Service Details</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="#">
|
|
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
|
Doctors
|
|
</a>
|
|
</Link>
|
|
|
|
<ul className="dropdown-menu">
|
|
<li className="nav-item">
|
|
<Link href="/doctors" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Doctors</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/doctor-details" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Doctor Details</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="#">
|
|
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
|
Blog
|
|
</a>
|
|
</Link>
|
|
|
|
<ul className="dropdown-menu">
|
|
<li className="nav-item">
|
|
<Link href="/blog" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Blog</a>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/blog-details" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Blog Details</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/contact" activeClassName="active">
|
|
<a onClick={toggleNavbar} className="nav-link">Contact</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="nav-srh">
|
|
<form>
|
|
<input type="text" className="form-control" id="search" placeholder="Search..." />
|
|
|
|
<button className="search-icon icon-search">
|
|
<i className="icofont-search-1"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|