feat: improve sidebar design - rounded nav items, gradient header accent, better collapsible, refined sublist

public/assets/css/style.css

@@ -145,10 +145,26 @@ code, pre {
     overflow: hidden;
 }
 
+.sidebar::-webkit-scrollbar {
+    width: 4px;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background: transparent;
+}
+
+.sidebar:hover::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+}
+
 .sidebar.collapsed {
     width: var(--sidebar-collapsed);
 }
 
+.sidebar.collapsed .sidebar-header::after {
+    display: none;
+}
+
 .sidebar-header {
     display: flex;
     align-items: center;
@@ -157,6 +173,18 @@ code, pre {
     border-bottom: 1px solid var(--border-color);
     height: var(--topbar-height);
     min-height: var(--topbar-height);
+    position: relative;
+}
+
+.sidebar-header::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 1.25rem;
+    right: 1.25rem;
+    height: 2px;
+    background: linear-gradient(90deg, var(--accent), transparent);
+    border-radius: 1px;
 }
 
 .sidebar-brand {
@@ -167,6 +195,7 @@ code, pre {
     font-weight: 700;
     font-size: 1.2rem;
     white-space: nowrap;
+    text-decoration: none;
 }
 
 .sidebar-brand i {
@@ -175,7 +204,8 @@ code, pre {
 }
 
 .nav-item i,
-.nav-sub-item i {
+.nav-sub-item i,
+.nav-item-toggle i {
     pointer-events: none;
 }
 
@@ -251,19 +281,22 @@ code, pre {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    padding: 0.65rem 1.25rem;
+    padding: 0.6rem 1.25rem;
+    margin: 0 0.5rem;
     color: var(--text-secondary);
-    border-radius: 0;
+    border-radius: var(--radius-sm);
     transition: all var(--transition);
-    font-size: 0.92rem;
+    font-size: 0.9rem;
     white-space: nowrap;
-    border-left: 3px solid transparent;
+    text-decoration: none;
+    position: relative;
 }
 
 .nav-item i {
     width: 20px;
     text-align: center;
     flex-shrink: 0;
+    font-size: 1rem;
 }
 
 .nav-item:hover {
@@ -274,23 +307,35 @@ code, pre {
 .nav-item.active {
     color: var(--accent);
     background: var(--accent-light);
-    border-left-color: var(--accent);
-    font-weight: 500;
+    font-weight: 600;
+}
+
+.nav-item.active::before {
+    content: '';
+    position: absolute;
+    left: -0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 20px;
+    background: var(--accent);
+    border-radius: 0 2px 2px 0;
 }
 
 .nav-divider {
     height: 1px;
     background: var(--border-color);
     margin: 0.5rem 1rem;
+    opacity: 0.5;
 }
 
 .nav-section {
-    padding: 0.5rem 1.25rem;
-    font-size: 0.75rem;
+    padding: 0.6rem 1.25rem 0.35rem;
+    font-size: 0.7rem;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
     color: var(--text-muted);
-    font-weight: 600;
+    font-weight: 700;
     white-space: nowrap;
 }
 
@@ -312,6 +357,7 @@ code, pre {
 .sidebar.collapsed .nav-item {
     justify-content: center;
     padding: 0.65rem;
+    margin: 0 0.35rem;
 }
 
 /* ==========================================================================
@@ -2340,6 +2386,7 @@ textarea.form-input {
     .sidebar.mobile-open.collapsed .nav-item {
         justify-content: flex-start;
         padding: 0.65rem 1.25rem;
+        margin: 0 0.5rem;
     }
 
     .main-area {
@@ -2379,7 +2426,8 @@ textarea.form-input {
     }
 
     .nav-sublist {
-        background: rgba(0,0,0,0.1);
+        background: rgba(0,0,0,0.06);
+        margin: 0;
     }
 }
 
@@ -2750,10 +2798,14 @@ textarea.form-input {
     gap: 0.5rem;
 }
 
+.nav-item-accordion.expanded > .nav-item-toggle {
+    color: var(--text-primary);
+}
+
 .nav-chevron {
     margin-left: auto;
-    font-size: 0.7rem;
-    transition: transform 0.2s;
+    font-size: 0.65rem;
+    transition: transform 0.25s ease;
     color: var(--text-muted);
 }
 
@@ -2765,18 +2817,22 @@ textarea.form-input {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.25s ease;
-    background: rgba(0,0,0,0.15);
+    background: rgba(0,0,0,0.08);
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+    margin: 0 0.5rem;
 }
 
 .nav-sub-item {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.4rem 1rem 0.4rem 2.8rem;
+    padding: 0.35rem 1rem 0.35rem 2.5rem;
+    margin: 0 0.25rem;
     font-size: 0.82rem;
     color: var(--text-secondary);
     text-decoration: none;
-    transition: background 0.1s;
+    transition: all 0.15s;
+    border-radius: var(--radius-sm);
 }
 
 .nav-sub-item:hover {
@@ -2784,6 +2840,13 @@ textarea.form-input {
     color: var(--text-primary);
 }
 
+.nav-sub-item i {
+    width: 16px;
+    text-align: center;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
 .status-dot-sm {
     width: 6px;
     height: 6px;