0

Сделал навбар для сайта, но не учел очень важный пункт (выделение активного пункта меню другим цветом, таким же как при ховере)

Подскажите как это правильно сделать в моем случае?

Пример активного пункта меню на скриншоте Пример активного пункта меню

svg{
color: #6a778e;
transition: 250ms ease all;
}
svg:hover{
color: #0b0c0f;
transform: scale(1.3);
transition: 250ms ease all;
}


#allrecords ul {
    padding-left: 0px;
}



.bar {
    position: fixed;
    top: 0rem;
    left: 0rem;
    background: #fff;
    border-radius: 0px;
    padding: 1rem 0;
    box-shadow: 0 0 40px rgb(0 0 0 / 3%);
    width: 66px;
    bottom: 0rem;
}
.navbar__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: 100%;
    color: #6a778e;
    transition: 250ms ease all;
    cursor: pointer;
}


.navbar__link span {
  position: absolute;
  left: 100%;
  transform: translate(-3rem);
  margin-left: 1rem;
  opacity: 0;
  pointer-events: none;
  color: #ffffff;
  background: #2d43477a;
  padding: 10px;
  transition: 250ms ease all;
  border-radius: 6px;
  cursor: pointer;
}
.navbar__link :hover {
  cursor: pointer;
}
.navbar:not(:hover) .navbar__link:focus span, .navbar__link:hover span {
  opacity: 1;
  transform: translate(0);
}
.navbar__menu {
  position: relative;
}
.navbar__item:last-child:before {
  content: "";
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: 0;
  left: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(90deg, rgba(0,148,112,1) 0%, rgba(0,186,198,1) 100%);
  border-radius: 30px;
  transition: 250ms cubic-bezier(1, 0.2, 0.1, 1.2) all;
}

.btn-check{
    display: none;
  }




@media (max-width: 700px) {

  .btn-check{
    display: none;
  }
  

  .main-label{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iNSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjMzAzODQ0Ii8+CjxyZWN0IHg9IjIiIHk9IjExIiB3aWR0aD0iMjAiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IiMzMDM4NDQiLz4KPHJlY3QgeD0iMiIgeT0iMTciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzMwMzg0NCIvPgo8L3N2Zz4K) ;
    background-color: rgba(0, 0, 0, 0.055);
    width: 40px;
    height: 40px;
    margin-right: 5px;
    margin-top: 5px;
    position: fixed;
    right: 0;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    transition: 250ms;

  }
 
  .btn-check:checked ~ .bar{
  left: 0px;
  transition: 250ms;
}
  


.bar {
  position: fixed;
  top: 0rem;
    left: -7rem;
    background: #fff;
    border-radius: 0;
    padding: 1rem 0;
    box-shadow: 0 0 40px rgb(0 0 0 / 12%);
    height: 100%;
    transition: 250ms;
}}
 
@media (min-width: 1572px) {
  .bar { 
    top: 1rem;
    bottom: 1rem;
    border-radius: 12px;
    left: 8rem;
  height: calc(100vh - 4rem);
  transition: 300ms;
  width: 85px;
  }
}


@media (min-width: 1800px) {
  .bar { 
    top: 1rem;
    bottom: 1rem;
    border-radius: 12px;
    left: 18rem;
    transition: 300ms;
    width: 85px;
  }
}
<!DOCTYPE html>
<html>
<body>
  <label class="main-label" id="btn-check" >
  <input type="checkbox" class="btn-check" id="btn-check" >
<nav class="bar">
  <div class="navbar__menu">
      <div class="dbltab-a_1">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
      </svg><span>Мой кабинет</span>
    </div>
  </div>
    <div class="dbltab-a_2">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
      </svg><span>Провайдеры</span>
    </div>
  </div>
      <div class="dbltab-a_3">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
      </svg><span>Добавить провайдера</span>
    </div>   
  </div>  
      <div class="dbltab-a_4">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-journal-check" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
        <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
        <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
      </svg><span>Консультация</span>
    </div> 
  </div>          
      <div class="dbltab-a_5">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-pie-chart" viewBox="0 0 16 16">
        <path d="M7.5 1.018a7 7 0 0 0-4.79 11.566L7.5 7.793V1.018zm1 0V7.5h6.482A7.001 7.001 0 0 0 8.5 1.018zM14.982 8.5H8.207l-4.79 4.79A7 7 0 0 0 14.982 8.5zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
      </svg><span>Опросы</span>
    </div> 
  </div>      
      <div class="dbltab-a_6">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-percent" viewBox="0 0 16 16">
        <path d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
      </svg><span>Скидки</span>
    </div>
    </div>
      <a href="#profile:edit">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-gear-wide" viewBox="0 0 16 16">
  <path d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434L8.932.727zM8 12.997a4.998 4.998 0 1 1 0-9.995 4.998 4.998 0 0 1 0 9.996z"/>
</svg><span>Настройки</span>
    </div>
      <a href="#logout">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
  <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
</svg><span>Выход</span>
    </div>
        </nav>

</body>
</html>

1
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 17 июн 2022 в 14:31

1 ответ 1

1

Вот так?

При клике на блок сначала проверяеться если существует элемент с классом active-svg, если сущечтвует то убирает у него класс, ксли такого нет то идёт дальше. Потом просто присваивает элементу на который вы нажали класс active-svg.

Вот и всё логика

const menuLinks = document.querySelectorAll('.navbar__link');

for (elem of menuLinks) {
  elem.addEventListener('click', function() {
    let activeSvg = document.querySelector('.active-svg');
    if (activeSvg != null) activeSvg.classList.remove('active-svg');
    this.classList.add('active-svg');
  })
}
svg {
  color: #6a778e;
  transition: 250ms ease all;
}

.active-svg svg,
svg:hover {
  color: #0b0c0f;
  transform: scale(1.3);
  transition: 250ms ease all;
}

#allrecords ul {
  padding-left: 0px;
}

.bar {
  position: fixed;
  top: 0rem;
  left: 0rem;
  background: #fff;
  border-radius: 0px;
  padding: 1rem 0;
  box-shadow: 0 0 40px rgb(0 0 0 / 3%);
  width: 66px;
  bottom: 0rem;
}

.navbar__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 100%;
  color: #6a778e;
  transition: 250ms ease all;
  cursor: pointer;
}

.navbar__link span {
  position: absolute;
  left: 100%;
  transform: translate(-3rem);
  margin-left: 1rem;
  opacity: 0;
  pointer-events: none;
  color: #ffffff;
  background: #2d43477a;
  padding: 10px;
  transition: 250ms ease all;
  border-radius: 6px;
  cursor: pointer;
}

.navbar__link :hover {
  cursor: pointer;
}

.navbar:not(:hover) .navbar__link:focus span,
.navbar__link:hover span {
  opacity: 1;
  transform: translate(0);
}

.navbar__menu {
  position: relative;
}

.navbar__item:last-child:before {
  content: "";
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: 0;
  left: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(90deg, rgba(0, 148, 112, 1) 0%, rgba(0, 186, 198, 1) 100%);
  border-radius: 30px;
  transition: 250ms cubic-bezier(1, 0.2, 0.1, 1.2) all;
}

.btn-check {
  display: none;
}

@media (max-width: 700px) {
  .btn-check {
    display: none;
  }
  .main-label {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iNSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjMzAzODQ0Ii8+CjxyZWN0IHg9IjIiIHk9IjExIiB3aWR0aD0iMjAiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IiMzMDM4NDQiLz4KPHJlY3QgeD0iMiIgeT0iMTciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzMwMzg0NCIvPgo8L3N2Zz4K);
    background-color: rgba(0, 0, 0, 0.055);
    width: 40px;
    height: 40px;
    margin-right: 5px;
    margin-top: 5px;
    position: fixed;
    right: 0;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    transition: 250ms;
  }
  .btn-check:checked~.bar {
    left: 0px;
    transition: 250ms;
  }
  .bar {
    position: fixed;
    top: 0rem;
    left: -7rem;
    background: #fff;
    border-radius: 0;
    padding: 1rem 0;
    box-shadow: 0 0 40px rgb(0 0 0 / 12%);
    height: 100%;
    transition: 250ms;
  }
}

@media (min-width: 1572px) {
  .bar {
    top: 1rem;
    bottom: 1rem;
    border-radius: 12px;
    left: 8rem;
    height: calc(100vh - 4rem);
    transition: 300ms;
    width: 85px;
  }
}

@media (min-width: 1800px) {
  .bar {
    top: 1rem;
    bottom: 1rem;
    border-radius: 12px;
    left: 18rem;
    transition: 300ms;
    width: 85px;
  }
}
<!DOCTYPE html>
<html>

<body>
  <label class="main-label" id="btn-check">
  <input type="checkbox" class="btn-check" id="btn-check" >
<nav class="bar">
  <div class="navbar__menu">
      <div class="dbltab-a_1">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
      </svg><span>Мой кабинет</span>
    </div>
  </div>
    <div class="dbltab-a_2">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
      </svg><span>Провайдеры</span>
    </div>
  </div>
      <div class="dbltab-a_3">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
      </svg><span>Добавить провайдера</span>
    </div>   
  </div>  
      <div class="dbltab-a_4">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-journal-check" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
        <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
        <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
      </svg><span>Консультация</span>
    </div> 
  </div>          
      <div class="dbltab-a_5">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-pie-chart" viewBox="0 0 16 16">
        <path d="M7.5 1.018a7 7 0 0 0-4.79 11.566L7.5 7.793V1.018zm1 0V7.5h6.482A7.001 7.001 0 0 0 8.5 1.018zM14.982 8.5H8.207l-4.79 4.79A7 7 0 0 0 14.982 8.5zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
      </svg><span>Опросы</span>
    </div> 
  </div>      
      <div class="dbltab-a_6">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-percent" viewBox="0 0 16 16">
        <path d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
      </svg><span>Скидки</span>
    </div>
    </div>
      <a href="#profile:edit">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-gear-wide" viewBox="0 0 16 16">
  <path d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434L8.932.727zM8 12.997a4.998 4.998 0 1 1 0-9.995 4.998 4.998 0 0 1 0 9.996z"/>
</svg><span>Настройки</span>
    </div>
      <a href="#logout">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
  <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
</svg><span>Выход</span>
    </div>
        </nav>

</body>
</html>

2
  • Реально ли провернуть это без JS?
    – glasswalk
    17 июн 2022 в 16:00
  • @glasswalk наверное как-то можно, но это не в моих силах
    – Miha
    21 июн 2022 в 13:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.