У меня проблемы с выравниванием текста тега heading и значком шрифта в нужных местах на панели навигации. Когда моя панель навигации раскроется, я sh для текста heading (sidenav-заголовок) и значка (sidenav-expand) будет в одной строке, а текст heading слева (как есть). ) и значок справа (как есть). Мой код:
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
//expandNav();
sidenav.style.width = "250px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
};
sidenav.onmouseout = function() {
//closeNav();
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: white;
transition: 0.8s;
}
#sidenav-brand {
padding: 25px 10px;
background-color: aqua;
}
#sidenav-heading {}
#sidenav-expand {
text-align: center;
}
.expand {
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links"></div>
</div>
</body>
</html>
И ссылка jsfiddle: https://jsfiddle.net/khean52w/