VNT-BTB Menu

Boční menu s možností submenu

<nav class="menu --w-12">
	<details class="menu__top" open>
		<summary class="menu__top-title">
			<div class="menu__top-logo-wrap">
				<img src="/img/dogtrace.svg" class="menu__top-logo" alt="logo">
			</div>
			<span class="menu__top-arrow arrow arrow--down"></span>
		</summary>
		<ul class="menu__top-list">
			<li class="menu__item menu__item--top">
				<a href="#" class="menu__item-wrap">
					<div class="menu__item-figure">
						<img src="/userfiles/images/vycvikove_obojky.jpg" class="menu-item-img" alt="foto sekce">
					</div>
					Výcvikové obojky
				</a>

				<ul class="menu__submenu submenu">
					<li class="submenu__item">
						<a href="#" class="submenu__item-link">
							<div class="submenu__item-figure">
								<img src="/userfiles/images/vibracni.jpg" class="submenu__item-img" alt="foto produktu">
							</div>
							Elektronické d-control
						</a>
					</li>
					<li class="submenu__item subitem--active">
						<a href="#" class="submenu__item-link">
							<div class="submenu__item-figure">
								<img src="/userfiles/images/vibracni.jpg" class="submenu__item-img" alt="foto produktu">
							</div>
							Sprejové
						</a>
					</li>
					<li class="submenu__item">
						<a href="#" class="submenu__item-link">
							<div class="submenu__item-figure">
								<img src="/userfiles/images/vibracni.jpg" class="submenu__item-img" alt="foto produktu">
							</div>
							Vibrační
						</a>
					</li>
				</ul>
			</li>
			<li class="menu__item">
				<a href="#" class="menu__item-link">
					<div class="menu__item-figure">
						<img src="/userfiles/images/gps.jpg" class="menu__item-img" alt="foto produktu">
					</div>
					GPS
				</a>
			</li>
			<li class="menu__item">
				<a href="#" class="menu__item-link">
					<div class="menu__item-figure">
						<img src="/userfiles/images/accessories.jpg" class="menu__item-img" alt="foto produktu">
					</div>
					Příslušenství
				</a>
			</li>
			<li class="menu__item">
				<a href="#" class="menu__item-link">
					Odměna za věrnost
				</a>
			</li>
		</ul>
	</details>
	<details class="menu__top" open>
		<summary class="menu__top-title">
			<div class="menu__top-logo-wrap">
				<img src="/img/fencee.svg" class="menu__top-logo" alt="logo">
			</div>
			<span class="menu__top-arrow arrow arrow--down"></span>
		</summary>
		<ul class="menu__top-list">
			<li class="menu__item menu__item--top">
				<a href="#" class="menu__item-wrap">
					<div class="menu__item-figure menu__item-figure--box">
						<img src="/userfiles/images/gen_mini.jpg" class="menu-item-img" alt="foto sekce">
					</div>
					Generátory elektrického ohradníku
				</a>

				<ul class="menu__submenu submenu">
					<li class="submenu__item">
						<a href="#" class="submenu__item-link">
							<div class="submenu__item-figure">
								<img src="/userfiles/images/gen_mini.jpg" class="submenu__item-img" alt="foto produktu">
							</div>
							mini-m
						</a>
					</li>
					<li class="submenu__item">
						<a href="#" class="submenu__item-link">
							<div class="submenu__item-figure">
								<img src="/userfiles/images/gen_mini.jpg" class="submenu__item-img" alt="foto produktu">
							</div>
							power-p
						</a>
					</li>
					<li class="submenu__item">
						<a href="#" class="submenu__item-link">
							<div class="submenu__item-figure">
								<img src="/userfiles/images/gen_mini.jpg" class="submenu__item-img" alt="foto produktu">
							</div>
							energy ed
						</a>
					</li>
				</ul>
			</li>
			<li class="menu__item item--active">
				<a href="#" class="menu__item-link">
					<div class="menu__item-figure">
						<img src="/userfiles/images/accessories.jpg" class="menu__item-img" alt="foto produktu">
					</div>
					Příslušenství
				</a>
			</li>
			<li class="menu__item">
				<a href="#" class="menu__item-link">
					Odměna za věrnost
				</a>
			</li>
		</ul>
	</details>
</nav>

.menu{
  border: 1px solid $color__border;
  border-radius: 0.8rem;
  margin-bottom: 15px;
  overflow: hidden;
}

.menu__top-title{
  position: relative;
  display: flex;
  align-items: center;
  background: $color__bg-purple;
  padding: 0.9rem 2rem 0.9rem 2.5rem;

  &:before{
    display: none;
  }
}

.menu__top-arrow{
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 2rem auto 0;
}

.menu__item, .submenu__item{
  padding: 0.7rem 1rem 0.7rem 2.5rem;

}

.menu__item--top{
  padding-left: 0.9rem;
}

.submenu__item{
  padding-left: 3rem;

  @include media($large){
    padding-left: 5.5rem;
  }

}

.menu__item-wrap{
  display: flex;
  align-items: center;
}

.submenu__item-link, .menu__item-link{
  display: flex;
  align-items: center;
  color: $color__text-dark;
}

.submenu__item-link{
  font-size: 1.4rem;
}

.menu__item-link, .menu__item-wrap{
  font-size: 1.5rem;
  color: $color__text-dark;
}

.submenu__item-figure, .menu__item-figure{
  max-width: 2.5rem;
  max-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submenu__item-figure{
  margin-right: 1rem;
}

.menu__item-figure{
  margin-right: 1.1rem;
  .menu__item--top &{
    max-width: 5rem;
    margin-right: 0.6rem;
  }
}

.submenu__item-img, .menu__item-img{
  width: 100%;
  height: 100%;
}

.subitem--active{
  background: $color__bg-purple;
  margin-right: -1rem;
  margin-left: -0.9rem;
  padding-left: 3.9rem;

  @include media($large){
    padding-left: 6.4rem;
  }
}

.item--active{
  background: $color__bg-purple;
}

.menu__item-figure--box{
  max-width: 5rem;
  max-height: 5rem;
}