how import JavaScript in React? - reactjs

Question

I Have a navbar that in Mobile is hamburger Menu, for this nav i have some js code that have some event on html element( add class on tag ) and i dont know how can i import js code into React for my menu .if is there a way to import js code , i will be so happy to learn that .
Header Component code :
import React from "react";
import logo from "../images/logo.png";
function Header(props) {
return (
<header
id="header"
className="fixed-top d-flex align-items-center header-transparent"
dir="rtl"
>
<div className="container d-flex align-items-center justify-content-between">
<div className="logo d-flex">
<img src={logo} alt="عکس" className="imglogo px-2 " />
{/* <!-- <h1><span>ایپاکو</span></h1> --> */}
</div>
<a className=" btn btn-danger text-center text-white fs-5" href="#">
ورود | ثبت نام
</a>
<nav id="navbar" className="navbar d-flex justify-content-between">
<ul>
<li>
<a
className="nav-link scrollto active border-success fs-4"
href="#hero"
>
خانه
</a>
</li>
<li>
<a className="nav-link scrollto fs-5" href="#about">
درباره ما{" "}
</a>
</li>
<li>
<a className="nav-link scrollto fs-5" href="#">
ازمون سنجش{" "}
</a>
</li>
<li>
<a className="nav-link scrollto fs-5" href="#">
فرم ارز یابی
</a>
</li>
<li>
<a className="nav-link scrollto fs-5" href="#">
محصولات
</a>
</li>
<li>
<a className="nav-link scrollto fs-5" href="#">
فروشگاه
</a>
</li>
<li>
<a className="nav-link scrollto fs-5" href="#">
مقالات
</a>
</li>
</ul>
<i className="bi bi-list mobile-nav-toggle"></i>
</nav>
{/* <!-- .navbar --> */}
</div>
</header>
// End Header
);
}
export default Header;
App js code :
import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "./App.css";
import Header from "./component/Header";
import "./maincode"; // My JS CODE
export default class App extends Component {
render() {
return (
<>
<Header />
</>
)
}
}
App css code :
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
height: 80px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
/* background: -webkit-gradient(linear, left top, right top, from(rgba(0, 170, 80, 0.75)), to(rgba(0, 120, 73, 0.75)));*/
background: linear-gradient(to right, rgba(0, 170, 80, 0.75), rgba(0, 120, 73, 0.75));
}
#header.header-scrolled {
/* background: -webkit-gradient(linear, left top, right top, from(rgba(2, 113, 54, 0.75)), to(rgba(1, 59, 37, 0.75)));*/
background: linear-gradient(to right, rgba(2, 113, 54, 0.75), rgba(1, 59, 37, 0.75));
height: 60px;
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
}
#header .logo h1 a, #header .logo h1 a:hover {
color: #fff;
text-decoration: none;
}
#header .logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a, .navbar a:focus {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 0 10px 15px;
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar > ul > li > a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 3px;
left: 30px;
background-color: #1acc8d;
visibility: hidden;
width: 0px;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
visibility: visible;
width: 25px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #fff;
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
/* background: -webkit-gradient(linear, left top, right top, from(rgba(0, 170, 80, 0.75)), to(rgba(0, 120, 73, 0.75)));*/
background: linear-gradient(to right, rgba(0, 170, 80, 0.75), rgba(0, 120, 73, 0.75));
-webkit-transition: 0.3s;
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 8px;
background-color: #fff;
overflow-y: auto;
-webkit-transition: 0.3s;
transition: 0.3s;
width: 10em;
}
.navbar-mobile > ul > li > a:before {
right: 20px;
}
.navbar-mobile a, .navbar-mobile a:focus {
padding: 10px 20px;
font-size: 15px;
color: #04723d;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #64ffc1;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
margin: 15px;
}
.navbar-mobile .dropdown ul, .navbar-mobile .dropdown .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
/* -webkit-box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); */
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li, .navbar-mobile .dropdown .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a, .navbar-mobile .dropdown .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i, .navbar-mobile .dropdown .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a, .navbar-mobile .dropdown .dropdown ul a:hover, .navbar-mobile .dropdown .dropdown ul .active:hover, .navbar-mobile .dropdown .dropdown ul li:hover > a {
color: #1acc8d;
}
.navbar-mobile .dropdown > .dropdown-active, .navbar-mobile .dropdown .dropdown > .dropdown-active {
display: block;
}
Maincode js (My js code for NAV):
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
/**
* Navbar links active state on scroll
*/
let navbarlinks = select('#navbar .scrollto', true)
const navbarlinksActive = () => {
let position = window.scrollY + 200
navbarlinks.forEach(navbarlink => {
if (!navbarlink.hash) return
let section = select(navbarlink.hash)
if (!section) return
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
navbarlink.classList.add('active')
} else {
navbarlink.classList.remove('active')
}
})
}
window.addEventListener('load', navbarlinksActive)
onscroll(document, navbarlinksActive)
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
let header = select('#header')
let offset = header.offsetHeight
if (!header.classList.contains('header-scrolled')) {
offset -= 20
}
let elementPos = select(el).offsetTop
window.scrollTo({
top: elementPos - offset,
behavior: 'smooth'
})
}
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select('#header')
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled')
} else {
selectHeader.classList.remove('header-scrolled')
}
}
window.addEventListener('load', headerScrolled)
onscroll(document, headerScrolled)
}
/**
* Back to top button
*/
let backtotop = select('.back-to-top')
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add('active')
} else {
backtotop.classList.remove('active')
}
}
window.addEventListener('load', toggleBacktotop)
onscroll(document, toggleBacktotop)
}
/**
* Mobile nav toggle
*/
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
/**
* Mobile nav dropdowns activate
*/
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
/**
* Scrool with ofset on links with a class name .scrollto
*/
on('click', '.scrollto', function(e) {
if (select(this.hash)) {
e.preventDefault()
let navbar = select('#navbar')
if (navbar.classList.contains('navbar-mobile')) {
navbar.classList.remove('navbar-mobile')
let navbarToggle = select('.mobile-nav-toggle')
navbarToggle.classList.toggle('bi-list')
navbarToggle.classList.toggle('bi-x')
}
scrollto(this.hash)
}
}, true)
/**
* Scroll with ofset on page load with hash links in the url
*/
window.addEventListener('load', () => {
if (window.location.hash) {
if (select(window.location.hash)) {
scrollto(window.location.hash)
}
}
});