Выделение активного пункта меню другим цветом, таким же как при Hover
Сделал навбар для сайта, но не учел очень важный пункт (выделение активного пункта меню другим цветом, таким же как при ховере)
Подскажите как это правильно сделать в моем случае?
Пример активного пункта меню на скриншоте 
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 шт):
Автор решения: Проста Miha
→ Ссылка
Вот так?
При клике на блок сначала проверяеться если существует элемент с классом 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>