completely redesigned notes update

custom.css

@@ -18,6 +18,87 @@
     margin: 0.5em 0;
 }
 
+/* Sidebar Table of Contents styling */
+.sidebar-right {
+    font-size: 0.85em;
+    width: 290px !important;
+}
+
+.sidebar-right .table-of-contents {
+    background-color: rgba(240, 242, 245, 0.8);
+    border-radius: 5px;
+    font-size: 0.9em;
+    padding: 0.8em;
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+}
+
+.sidebar-right h2 {
+    font-size: 1.2em;
+    margin: 0 0 0.6em 0;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid #e1e4e8;
+}
+
+.sidebar-right ul {
+    margin: 0;
+    padding: 0 0 0 1em;
+    line-height: 1.4;
+}
+
+.sidebar-right li {
+    margin: 0.3em 0;
+}
+
+.sidebar-right a {
+    display: block;
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    transition: background-color 0.15s ease;
+    text-decoration: none;
+    color: #4183c4;
+}
+
+.sidebar-right a:hover {
+    background-color: rgba(65, 131, 196, 0.1);
+    text-decoration: none;
+}
+
+/* Collapsed view indicator */
+.sidebar-right .category-indicator {
+    display: none;
+}
+
+/* Make sidebar more compact on smaller screens */
+@media screen and (max-width: 1300px) {
+    .sidebar-right {
+        width: 240px !important;
+    }
+    
+    .sidebar-right h2 {
+        font-size: 1.1em;
+    }
+    
+    .sidebar-right ul {
+        padding-left: 0.5em;
+    }
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 1100px) {
+    .sidebar-right {
+        width: 200px !important;
+    }
+    
+    .sidebar-right .table-of-contents {
+        padding: 0.6em;
+    }
+    
+    .sidebar-right h2 {
+        font-size: 1em;
+    }
+}
+
 /* Back to top link styling */
 a[href^="#"] {
     text-decoration: none;