---
    
    const { category } = Astro.props;

    import Stores from './LazyStores.astro';
    import MainMenu from '@components/MainMenu.astro';

    const MENU_ID = 3340; // 103246 (бургер 1).  103247 (бургер 2 )
    let menuItems = [];

---

<header class="header" itemscope itemtype="https://schema.org/WPHeader">

<div class="top-bar">
    <img alt="Профиль" width="249" height="55" src="https://cdn.profile.ru/wp-content/themes/profile/assets/img/profile-logo-delovoy.svg">
    {category && (
        <div class="header__subtitle">
          <a href={`/${category.slug}`}>{category.name}</a>
        </div>
      )}    
    <Stores />
</div>

<MainMenu menuId={MENU_ID} />

</header>


<style>

    .top-bar{
        display: flex;
        justify-content: space-between;
        align-items: center; 
    }

    .header__subtitle{
        font-size: 22px;
        font-weight: bold;
        margin-left: 42px;
        position: relative;
    }

    .header__subtitle::before{
        content: '';
        position: absolute;
        top: 50%;
        left: -15px;
        width: 3px;
        height: 80%;
        border-left: 3px solid;
        transform: translate(0, -40%);
    }    

</style>