|
.sidebar { |
|
display: flex; |
|
flex-direction: column; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
height: 100dvh; |
|
background-color: var(--bg-secondary); |
|
color: white; |
|
font-family: 'Inter', sans-serif; |
|
transition: width .5s ,height .5s; |
|
z-index: 1000; |
|
} |
|
|
|
.sidebar-content { |
|
display: flex; |
|
flex-direction: column; |
|
flex: 1; |
|
overflow-y: scroll; |
|
-ms-overflow-style: none; |
|
scrollbar-width: none; |
|
scroll-behavior: smooth; |
|
} |
|
|
|
.sidebar-conten::-webkit-scrollbar { |
|
display: none; |
|
} |
|
|
|
.sidebar.open { |
|
width: 220px; |
|
} |
|
|
|
.sidebar.closed { |
|
width: 0; |
|
} |
|
|
|
.sidebar-header { |
|
display: flex; |
|
align-items: center; |
|
padding-top: 18px; |
|
padding-left: 20px; |
|
} |
|
|
|
.sidebar-logo{ |
|
border-radius: 10px; |
|
display: inline; |
|
} |
|
|
|
.sidebar-toggle { |
|
background: none; |
|
border: none; |
|
color: white; |
|
font-size: 1.5rem; |
|
cursor: pointer; |
|
} |
|
|
|
.sidebar-title { |
|
font-size: 1.25rem; |
|
margin-left: 16px; |
|
margin-bottom: 0; |
|
white-space: nowrap; |
|
} |
|
|
|
.sidebar-menu { |
|
margin-top: 16px; |
|
flex: 1; |
|
} |
|
|
|
.sidebar-link { |
|
text-decoration: none; |
|
text-align: center; |
|
justify-content: space-between; |
|
color: #b0b0b0; |
|
display: flex; |
|
align-items: center; |
|
padding: 8px 16px; |
|
border-radius: 8px; |
|
margin-bottom: 8px; |
|
margin-left: 10px; |
|
margin-right: 10px; |
|
background-color: #12121f; |
|
cursor: pointer; |
|
white-space: nowrap; |
|
position: relative; |
|
transition: color 0.3s ease, border .3s ease-in-out, background-color .5s ease-in-out; |
|
} |
|
|
|
.sidebar-link.active { |
|
color: #ffffff; |
|
background-color: #1c2354; |
|
border: 1px solid #4339ff; |
|
} |
|
|
|
.sidebar-link:hover { |
|
color: #ffffff; |
|
border: 1px solid #4339ff; |
|
} |
|
|
|
.sidebar-footer { |
|
padding: 16px; |
|
} |
|
|
|
.sidebar-item { |
|
display: flex; |
|
align-items: center; |
|
padding: 8px 16px; |
|
border-radius: 8px; |
|
cursor: pointer; |
|
white-space: nowrap; |
|
} |
|
|
|
.sidebar-item svg { |
|
margin-right: 15px; |
|
} |
|
|
|
.sidebar-item-text { |
|
font-size: 0.875rem; |
|
font-weight: 500; |
|
margin-left: 10px; |
|
} |
|
|
|
|
|
.sidebar-svg{ |
|
color: white !important; |
|
} |
