Clean up CSS to show left navigation sidebar and hide right TOC

custom.css

@@ -1,29 +1,70 @@
 /* Custom styling for IT Learning Notes */
 
-/* IMPORTANT: Hide the sidebar/TOC completely */
+/* Show the left navigation sidebar but modify styling */
-html body .sidebar,
 .sidebar {
+    background-color: rgba(245, 245, 247, 0.95) !important;
+    border-right: 1px solid #e1e4e8 !important;
+}
+
+.sidebar-scrollbox {
+    padding: 10px !important;
+}
+
+/* Hide the floating right-side table of contents */
+.page-toc,
+.pagetoc, 
+.table-of-contents {
     display: none !important;
-    width: 0 !important;
     visibility: hidden !important;
 }
 
-/* Make content take up full width without sidebar */
+/* Make content take up appropriate width */
-html body .content-wrap,
 .content-wrap {
-    margin-left: 0 !important;
+    margin-left: auto !important;
-    margin-right: 0 !important;
+    margin-right: auto !important;
-    max-width: 100% !important;
+    max-width: calc(100% - 300px) !important;
     padding: 0 30px !important;
-    left: 0 !important;
 }
 
-/* Right/left navigation buttons */
+/* Improve chapter navigation */
+.chapter {
+    line-height: 1.3 !important;
+    font-size: 0.9em !important;
+}
+
+.chapter li a {
+    display: block !important;
+    padding: 5px 0 !important;
+    text-overflow: ellipsis !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+}
+
+.chapter li a:hover {
+    text-decoration: none !important;
+    background-color: rgba(0, 0, 0, 0.05) !important;
+}
+
+.chapter .active {
+    background-color: rgba(0, 0, 0, 0.07) !important;
+    font-weight: bold !important;
+}
+
+/* Improve nested section visibility */
+.chapter li.chapter-item {
+    margin-left: 1em !important;
+}
+
+.chapter li.chapter-item.expanded {
+    margin-left: 0 !important;
+}
+
+/* Navigation buttons */
 .nav-chapters {
     min-width: 30px !important;
 }
 
-/* Page table of contents styling for in-page TOC */
+/* In-page TOC styling */
 .toc {
     background-color: #f8f9fa;
     border: 1px solid #eaecef;
@@ -140,17 +181,6 @@ th {
     display: block !important;
 }
 
-/* Fix for potentially hidden elements */
-.hidden {
-    display: block !important;
-    visibility: visible !important;
-}
-
-/* Ensure chapters don't disappear */
-.chapter {
-    display: block !important;
-}
-
 /* Ensure main menu button is visible */
 #menu-bar {
     z-index: 10 !important;
@@ -166,70 +196,24 @@ th {
     padding: 10px !important;
 }
 
-/* mdBook TOC styling - this targets the actual sidebar TOC */
+/* Dark mode adjustments */
-.content-wrap {
+.ayu .sidebar, 
-    max-width: calc(100% - 220px) !important;
+.navy .sidebar, 
-    margin-right: 220px !important;
+.coal .sidebar {
-}
-
-.sidebar-scrollbox {
-    padding: 10px !important;
-}
-
-.chapter {
-    line-height: 1.3 !important;
-    font-size: 0.9em !important;
-}
-
-.chapter li a {
-    display: block !important;
-    padding: 5px 0 !important;
-    text-overflow: ellipsis !important;
-    overflow: hidden !important;
-    white-space: nowrap !important;
-}
-
-.chapter li a:hover {
-    text-decoration: none !important;
-    background-color: rgba(0, 0, 0, 0.05) !important;
-}
-
-.chapter .active {
-    background-color: rgba(0, 0, 0, 0.07) !important;
-}
-
-/* Improve nested section visibility */
-.chapter li.chapter-item {
-    margin-left: 1em;
-}
-
-.chapter li.chapter-item.expanded {
-    margin-left: 0;
-}
-
-/* mdBook theme-specific adjustments */
-.light .sidebar {
-    background-color: #fafafa !important;
-    border-right: 1px solid #e6e6e6 !important;
-}
-
-.navy .sidebar, .coal .sidebar, .ayu .sidebar {
     background-color: #292c2f !important;
     border-right: 1px solid #393f44 !important;
 }
 
-/* Responsive adjustments for the sidebar */
+/* Responsive adjustments */
 @media only screen and (max-width: 1300px) {
     .content-wrap {
-        max-width: calc(100% - 200px) !important;
+        max-width: calc(100% - 250px) !important;
-        margin-right: 200px !important;
     }
 }
 
 @media only screen and (max-width: 1080px) {
     .content-wrap {
-        max-width: calc(100% - 180px) !important;
+        max-width: calc(100% - 200px) !important;
-        margin-right: 180px !important;
     }
     
     .chapter {
@@ -240,6 +224,5 @@ th {
 @media only screen and (max-width: 700px) {
     .content-wrap {
         max-width: 100% !important;
-        margin-right: 0 !important;
     }
 }