59 lines
2.3 KiB
JavaScript
59 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
|
|
const TopNav = () => {
|
|
const handleMouseMove = (event) => {
|
|
const dropDownToggler = event.target.classList.contains('dropdown-toggle') ? event.target : event.target.querySelector('.dropdown-toggle');
|
|
const dropDownMenu = dropDownToggler?.nextElementSibling;
|
|
|
|
dropDownToggler?.classList?.add('show');
|
|
dropDownMenu?.classList?.add('show');
|
|
}
|
|
|
|
const handleMouseLeave = (event) => {
|
|
const dropdown = event.target.classList.contains('dropdown') ? event.target : event.target.closest('.dropdown');
|
|
const dropDownToggler = dropdown.querySelector('.dropdown-toggle');
|
|
const dropDownMenu = dropdown.querySelector('.dropdown-menu');
|
|
|
|
dropDownToggler?.classList?.remove('show');
|
|
dropDownMenu?.classList?.remove('show');
|
|
}
|
|
|
|
return (
|
|
<div className="top-navbar style-9">
|
|
<div className="container">
|
|
<div className="row justify-content-between align-items-center gx-0">
|
|
<div className="col-7">
|
|
<div className="top_info">
|
|
<a href="#" className="me-4">
|
|
<i className="fas fa-envelope-open me-1"></i>
|
|
<span>info@iteck-tech</span>
|
|
</a>
|
|
<a href="#">
|
|
<i className="fas fa-phone me-1"></i>
|
|
<span>+89 (000) 786 999</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="col-5">
|
|
<div className="side_links d-flex justify-content-lg-end">
|
|
<a href="#" className="me-4"> Careers </a>
|
|
<a href="#" className="me-4"> Faq </a>
|
|
<div className="dropdown border-1 border-start ps-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
|
|
<a className="dropdown-toggle fw-bold" href="#" id="navbarDropdown1" role="button"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
English
|
|
</a>
|
|
<ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
|
|
<li><a className="dropdown-item" href="#0"> Arabic </a></li>
|
|
<li><a className="dropdown-item" href="#0"> french </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TopNav |