:root {
--color-main: rgb(33, 98, 48);
--color-sub: rgb(106, 151, 60);
--color-text: #333;
}
.side-nav {
padding-left: 30px;
width: 380px;
position: -webkit-sticky;
position: sticky;
top: 110px;
align-self: flex-start;
z-index: 10;
}
.side-nav-list {
list-style: none;
padding: 0;
margin-top: 25px;
}
.side-nav-item {
background: #fff;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid #eee;
overflow: hidden;
transition: 0.3s;
align-items: center;
} .side-nav-item a {
display: flex;
align-items: center;
padding: 20px;
text-decoration: none;
color: var(--color-text);
position: relative;
} .nav-icon {
display: flex;
align-items: center;
width: 35px;
margin-right: 15px;
}
.nav-icon img {
width: 100%;
height: auto;
} .nav-text {
font-weight: bold;
flex: 1;
} .nav-arrow::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
transform: rotate(45deg);
} .side-nav-item.is-active {
border-left: 5px solid var(--color-sub); }
.side-nav-item.is-active .nav-text {
color: var(--color-sub); }
.side-nav-item.is-active .nav-arrow::after {
border-color: var(--color-sub);
} .side-nav-item:hover {
background-color: #f9f9f9;
} .side-nav-item.side-nav-child {
padding-left: 20px; } .side-nav-item.side-nav-child .nav-text {
font-size: 16px;
} @media screen and (max-width: 1200px) {
.side-nav {
padding: 0;
width: 100%;
}
}