197 lines
3.5 KiB
CSS
197 lines
3.5 KiB
CSS
.sidebar {
|
|
width: 16rem;
|
|
background-color: white;
|
|
border-right: 1px solid rgb(229, 231, 235);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.mobileToggle{
|
|
display:none;
|
|
position:fixed;
|
|
top:12px;
|
|
left:12px;
|
|
z-index:11000;
|
|
background:transparent;
|
|
border:none;
|
|
font-size:20px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/* hide desktop close icon */
|
|
.mobileClose{ display:none }
|
|
|
|
.header {
|
|
padding: 1.5rem 1.25rem;
|
|
border-bottom: 1px solid rgb(229, 231, 235);
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: rgb(17, 24, 39);
|
|
line-height: 1.2;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
color: rgb(75, 85, 99);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.nav {
|
|
flex: 1;
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
|
|
.navButton {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.625rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s;
|
|
margin-bottom: 0.25rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
background: white;
|
|
}
|
|
|
|
.navButtonActive {
|
|
background-color: rgb(243, 244, 246);
|
|
color: rgb(17, 24, 39);
|
|
}
|
|
|
|
.navButtonInactive {
|
|
color: rgb(55, 65, 81);
|
|
}
|
|
|
|
.navButtonInactive:hover {
|
|
background-color: rgb(249, 250, 251);
|
|
}
|
|
|
|
.navIconActive {
|
|
color: rgb(75, 85, 99);
|
|
}
|
|
|
|
.navIconInactive {
|
|
color: rgb(156, 163, 175);
|
|
}
|
|
|
|
/* ===== USER ===== */
|
|
|
|
.userSection {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0.75rem 0;
|
|
}
|
|
|
|
.userAvatar {
|
|
width: 34px;
|
|
height: 34px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
border-radius: 50%;
|
|
|
|
background: rgb(249, 250, 251);
|
|
border: 1px solid rgb(229, 231, 235);
|
|
|
|
color: rgb(107, 114, 128);
|
|
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.userAvatar:hover {
|
|
background: rgb(243, 244, 246);
|
|
border-color: rgb(209, 213, 219);
|
|
}
|
|
|
|
.adminBadge{
|
|
background:#7c3aed;
|
|
color:#fff;
|
|
padding:4px 8px;
|
|
border-radius:999px;
|
|
font-weight:700;
|
|
margin-left:8px;
|
|
align-self:center;
|
|
}
|
|
|
|
/* ===== LOGOUT ===== */
|
|
|
|
.logoutBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
|
|
width: calc(100% - 1.5rem);
|
|
margin: 0 0.75rem 1rem 0.75rem;
|
|
|
|
padding: 0.625rem 0.75rem;
|
|
|
|
border-radius: 0.5rem;
|
|
border: 1px solid rgb(229, 231, 235);
|
|
|
|
background: white;
|
|
color: rgb(107, 114, 128);
|
|
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.logoutBtn:hover {
|
|
background: rgb(249, 250, 251);
|
|
border-color: rgb(209, 213, 219);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mobileToggle{display:block}
|
|
|
|
.mobileToggle{ color: rgb(17,24,39); background: white; padding:6px 8px; border-radius:8px; border:1px solid rgb(229,231,235) }
|
|
|
|
.sidebar {
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
height:100%;
|
|
width:80%;
|
|
max-width:360px;
|
|
transform:translateX(-110%);
|
|
transition:transform 240ms ease;
|
|
box-shadow: 8px 0 24px rgba(2,6,23,0.15);
|
|
z-index:11001;
|
|
background:white;
|
|
}
|
|
|
|
.sidebar.open{
|
|
transform:translateX(0);
|
|
}
|
|
|
|
.overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(2,6,23,0.45);z-index:11000}
|
|
|
|
.mobileClose{position:absolute;top:10px;right:10px;border:none;background:transparent;font-size:20px;cursor:pointer;display:block}
|
|
|
|
.open{transform:translateX(0)}
|
|
|
|
} |