Header Style 4

// here design="header-text-white header-transparent";
<header className={`site-header mo-left header ${design}`}>		
    {/*  Main Header  */}
    <div className={`sticky-header main-bar-wraper navbar-expand-lg ${headerFix ? 'is-fixed' : ''}`}>
        <div className="main-bar clearfix">
            <div className="container-fluid clearfix d-lg-flex d-block">                            
                {design === "header-text-white header-transparent" ? 
                    ''
                    :
                    <div className="logo-header logo-dark me-md-5">
                        <Link to="/"><Image src={IMAGES.logo} alt="logo" /></Link>
                    </div>
                }
                {design === "header-text-white header-transparent" ? 
                    <div className="logo-header me-md-5">
                        <Link to="/" className=" logo-light"><Image src={IMAGES.LogoWhite} alt="logo-white" /></Link>
                        <Link to="/" className="logo-dark"><Image src={IMAGES.logopng} 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>
                
            {/*  Main Nav  */}
            <div className={`header-nav w3menu navbar-collapse collapse justify-content-start ${openSidebar ? "show" : ""}`} 
                id="navbarNavDropdown"                            
            >
                <div className="logo-header logo-dark">
                    <Link to="index"><Image src={IMAGES.logo} alt="logo" /></Link>
                </div>
                {/* All menus item */}
                    <Menus />
                {/* All menus item end*/}
                <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>
            {/* EXTRA NAV  */}
            <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 className="nav-link" to="#" 
                                onClick={()=>setOpenSearchBar(true)}
                            >
                                <i className="iconly-Light-Search"/>
                            </Link>
                        </li>
                        <li className="nav-item wishlist-link">
                            <Link className="nav-link" to="#" 
                                onClick={()=>setHeadShoppingSidebar(true)}
                            >
                                <i className="iconly-Light-Heart2"/>
                            </Link>
                        </li>
                        <li className="nav-item cart-link">
                            <Link to="#" className="nav-link cart-btn"  onClick={()=>setBasketShoppingCard(true)}>
                                <i className="iconly-Broken-Buy"/>
                                <span className="badge badge-circle">5</span>
                            </Link>
                        </li>
                        <li className="nav-item filte-link">
                            <Link to="#" className="nav-link filte-btn"
                                onClick={() => setHeadSideBar(true)}
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 13" fill="none">
                                    <rect y="11" width="30" height="2" fill="black"/>
                                    <rect width="30" height="2" fill="black"/>
                                </svg>
                            </Link>
                        </li>
                    </ul>
                </div>
            </div>
            </div>
        </div>
    </div>
    {/*  Main Header End  */}
</header>   
{/*  SearchBar  */}
<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>
{/*  SearchBar  */}

 {/* - Sidebar finter */}
 <Offcanvas className="dz-offcanvas offcanvas-end" placement="end" show={headSideBar} onHide={setHeadSideBar}>
    <button type="button" className="btn-close" 
        onClick={()=>setHeadSideBar(false)}
    >
        &times;
    </button>
    <div className="offcanvas-body">
        <HeaderSidbar />
    </div>
</Offcanvas>  
{/*  Sidebar cart  */}
<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>

 {/*  Shopping Sidebar Basket   */}
<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>