first commit

src/components/Navbars/CloudNav/TopNav.jsx

@@ -0,0 +1,59 @@
+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