chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-03 03:10:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: refactor MainLayout component to implement sidebar collapse functionality, enhance navigation item display, and improve layout responsiveness

Browse Source
This commit is contained in:
Supra4E8C
2025-12-09 00:59:40 +08:00
parent b6765b074e
commit e417d3c771
2 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/styles/layout.scss
View File

@@ -15,7 +15,25 @@
display: flex;
flex-direction: column;
gap: $spacing-lg;
transition: transform $transition-normal;
transition: width $transition-normal, transform $transition-normal;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
&.collapsed {
width: 60px;
padding: $spacing-lg $spacing-sm;
.brand {
text-align: center;
}
.nav-item {
justify-content: center;
padding: 10px;
}
}
.brand {
font-weight: 800;
@@ -27,6 +45,7 @@
display: flex;
flex-direction: column;
gap: $spacing-sm;
flex: 1;
}
.nav-item {
@@ -51,6 +70,24 @@
}
}
.sidebar-toggle {
margin-top: auto;
padding: $spacing-sm;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: $radius-md;
color: var(--text-secondary);
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background $transition-fast, color $transition-fast;
&:hover {
background: var(--bg-tertiary, var(--border-color));
color: var(--text-primary);
}
}
@media (max-width: $breakpoint-mobile) {
position: fixed;
z-index: $z-dropdown;