Copy
<header className="site-header mo-left header style-2">
<div className="header-info-bar">
<div className="container clearfix">
<div className="logo-header logo-dark">
<Link to="/"><Image src={IMAGES.logo} alt="logo" /></Link>
</div>
<div className="extra-nav d-md-flex d-none m-l15">
<div className="extra-cell">
<ul className="navbar-nav header-right m-0">
<li className="nav-item info-box">
<div className="nav-link">
<div className="dz-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path style={{ fill: "#3cc" }} d="..." />
<path d="..." />
<path d="..." />
</svg>
</div>
<div className="info-content">
<span>24/7 SUPPORT</span>
<h6 className="title mb-0">+123 456 789</h6>
</div>
</div>
</li>
</ul>
</div>
</div>
<div className="header-search-nav">
<form className="header-item-search">
<div className="input-group search-input">
<Categorydropdown />
<input type="text" className="form-control" aria-label="Text input with dropdown button" placeholder="Search for products" />
<button className="btn" type="button">
<i className="iconly-Light-Search text-secondary"></i>
</button>
</div>
</form>
</div>
</div>
</div>
<div className={`sticky-header main-bar-wraper navbar-expand-lg ${headerFix ? 'is-fixed' : ''}`}>
<div className="main-bar clearfix">
<div className="container clearfix d-lg-flex d-block">
<div className="logo-header logo-dark">
<Link to="/"><Image src={IMAGES.logo} alt="logo" /></Link>
</div>
<button className={`navbar-toggler collapsed navicon justify-content-end ${openSidebar ? "open" : ""}`}
onClick={() => setOpenSidebar(!openSidebar)}>
<span></span>
<span></span>
<span></span>
</button>
<div className={`header-nav w3menu navbar-collapse collapse justify-content-start ${openSidebar ? "show" : ""}`}>
<div className="logo-header">
<Link to="/"><Image src={IMAGES.logo} alt="logo" /></Link>
</div>
<div className="browse-category-menu">
<Link to="#" className={`category-btn ${categoryActive ? "active" : ""}`} onClick={handleToggleClick}>
<div className="category-menu me-3">
<span></span>
<span></span>
<span></span>
</div>
<span className="category-btn-title">Browse Categories</span>
<span className="toggle-arrow ms-auto">
<i className="icon feather icon-chevron-down"></i>
</span>
</Link>
<div className="category-menu-items" style={{
display: categoryActive ? "block" : "none",
transition: "all 0.5s ease",
}}>
<CategoryMenuItem />
</div>
</div>
<ul className="nav navbar-nav">
<Header2Menus />
</ul>
<div className="dz-social-icon">
<ul>
<li><Link className="fab fa-facebook-f" target="_blank" to="https://www.facebook.com/Raven Rock Technology"></Link></li>
<li><Link className="fab fa-twitter" target="_blank" to="https://twitter.com/Raven Rock Technologys"></Link></li>
<li><Link className="fab fa-linkedin-in" target="_blank" to="https://www.linkedin.com/showcase/3686700/admin/"></Link></li>
<li><Link className="fab fa-instagram" target="_blank" to="https://www.instagram.com/Raven Rock Technology/"></Link></li>
</ul>
</div>
</div>
<div className="extra-nav">
<div className="extra-cell">
<ul className="header-right">
<li className="nav-item login-link">
<Link className="nav-link" to="/login">Login / Register</Link>
</li>
<li className="nav-item search-link">
<Link to="#" className="nav-link" onClick={() => setOpenSearchBar(true)}>
<i className="iconly-Light-Search"></i>
</Link>
</li>
<li className="nav-item wishlist-link">
<Link className="nav-link" to="#" onClick={() => setHeadShoppingSidebar(true)}>
<i className="iconly-Light-Heart2"></i>
</Link>
</li>
<li className="nav-item cart-link">
<Link to="#" className="nav-link cart-btn" onClick={() => setBasketShoppingCard(true)}>
<i className="iconly-Broken-Buy"></i>
<span className="badge badge-circle">5</span>
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<Offcanvas className="dz-search-area dz-offcanvas offcanvas-top" show={openSearchBar} onHide={setOpenSearchBar} placement={'top'}>
<button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" onClick={() => setOpenSearchBar(false)}>
×
</button>
<HeadSearchBar />
</Offcanvas>
<Offcanvas className="dz-offcanvas offcanvas-end" placement="end" tabIndex={-1} show={headShoppingSidebar} onHide={setHeadShoppingSidebar}>
<button type="button" className="btn-close" onClick={() => setHeadShoppingSidebar(false)}>
×
</button>
<div className="offcanvas-body">
<div className="product-description">
<HeaderSideShoppingCard tabactive="Wishlist" />
</div>
</div>
</Offcanvas>
<Offcanvas className="dz-offcanvas offcanvas-end" placement="end" tabIndex={-1} show={basketShoppingCard} onHide={setBasketShoppingCard}>
<button type="button" className="btn-close" onClick={() => setBasketShoppingCard(false)}>
×
</button>
<div className="offcanvas-body">
<div className="product-description">
<HeaderSideShoppingCard tabactive="ShoppingCart" />
</div>
</div>
</Offcanvas>