html,
body {
height: 100%
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
}
.avatar{
border-radius: 100%;
width:40px;
height:40px;
}
.navbar-brand img {
width: 40px;
margin-right: 10px;
}
.navbar-toggler {
border: none;
box-shadow: none !important;
}
main {
display: flex;
flex-grow: 1;
align-items: stretch;
}
sidebar {
width: 300px;
padding: 15px;
background-color: rgba(var(--bs-dark-rgb));
display: flex;
flex-direction: column;
}
sidebar div {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--bs-body-color);
padding-bottom: 10px;
}
sidebar a {
text-decoration: none;
color: var(--bs-body-color);
;
opacity: 0.6;
margin: 5px 0px;
}
sidebar a:hover {
text-decoration: none;
opacity: 1;
}
content {
flex-grow: 1;
align-items: stretch;
padding: 15px;
}
@media (max-width: 991px) {
sidebar {
width: 70px;
}
sidebar i {
font-size: 200%;
}
sidebar span {
display: none;
}
}