Header Style 2

<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/dexignzone"></Link></li>
                            <li><Link className="fab fa-twitter" target="_blank" to="https://twitter.com/dexignzones"></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/dexignzone/"></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)}>
        &times;
    </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)}>
        &times;
    </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)}>
        &times;
    </button>
    <div className="offcanvas-body">
        <div className="product-description">
            <HeaderSideShoppingCard tabactive="ShoppingCart" />
        </div>
    </div>
</Offcanvas>