• Share:
logo
logo

Header Style 6

Copy
    <header className={`site-header mo-left header`}>		
        <div className="top-bar">
            <div className="container-fluid">
                <div className="dz-topbar-inner d-flex justify-content-between align-items-center">
                    <div className="dz-topbar-left">
                        <ul>
                            <li><Link to="/about-us">About Us</Link></li>
                            <li><Link to="/contact-us-1">Contact Us</Link></li>
                            <li><Link to="/faqs-2">Help Desk</Link></li>
                        </ul>
                    </div>
                    <div className="dz-topbar-right">
                        <ul>
                            <li><span>Share:</span></li>
                            <li><Link to="https://www.facebook.com/dexignzone" target="_blank"><i className="fa-brands fa-facebook-f"/></Link></li>
                            <li><Link to="https://www.linkedin.com/showcase/3686700/admin/" target="_blank"><i className="fa-brands fa-linkedin-in"/></Link></li>
                            <li><Link to="https://www.instagram.com/dexignzone/" target="_blank"><i className="fa-brands fa-instagram"/></Link></li>
                            <li><Link to="https://twitter.com/dexignzones" target="_blank"><i className="fa-brands fa-twitter"/></Link></li>
                        </ul>					
                    </div>
                </div>
            </div>
        </div>        
        <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">                            
                     <div className="logo-header logo-dark me-md-5">
                        <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" : ""}`} 
                    id="navbarNavDropdown"                            
                >
                    <div className="logo-header logo-dark">
                        <Link to="index"><Image src={IMAGES.logo} alt="logo" /></Link>
                    </div>
                    
                    <Menus />
                    
                    <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 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>        
    </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>