<header className={`header ${className ? className : ''}`}>
  <Navbar expand="lg" className="w-100 p-0">
    <Container>
      <div className="navbar-header">
        <Navbar.Toggle aria-controls="basic-navbar-nav" onClick={() => setIsActive(!isActive)}>
          <span></span>
          <span></span>
          <span></span>
        </Navbar.Toggle>
        <Navbar.Brand as="a" href="/">
          <AppImage src="logo.png" alt="Ecom Store" width="140" height="49" />
        </Navbar.Brand>
      </div>
      {currentWindowSize <= 991 && <MobileOffCanvas isActive={isActive} setIsActive={setIsActive} activeKey={activeKey} setActiveKey={setActiveKey} />}
      {currentWindowSize > 991 && <DesktopHeader />}
      <RightNavs currentWindowSize={currentWindowSize} InitialAuthModalState={InitialAuthModalState} isSearchActive={isSearchActive} setIsSearchActive={setIsSearchActive} openAuthModal={openAuthModal} openSidebar={openSidebar} />
    </Container>
  </Navbar>
</header>