feat: enhance sidebar styling and introduce collapsible sections

Updated the sidebar background color, border, and various styles for better aesthetics and usability. Added styling for titles, images, content links, and lists within the sidebar. Introduced collapsible sections with smooth transitions to improve the user experience by allowing users to manage sidebar content visibility. These changes enhance readability and interactivity.

src/wikimore/static/css/style.css

@@ -85,17 +85,91 @@ h1 {
     margin-bottom: 20px;
 }
 
+/* General sidebar styling */
 .sidebar {
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    padding: 10px;
+    margin: 10px 0;
     float: right;
     width: 250px;
-    background-color: #ffffff;
-    border: 1px solid #a2a9b1;
-    padding: 10px;
     box-sizing: border-box;
-    margin: 10px 0;
     clear: right;
 }
 
+.sidebar-title-with-pretitle,
+.sidebar-list-title {
+    background-color: #ccccff;
+    font-size: 1em;
+    padding: 0.5em;
+    margin: 0.4em 0;
+    text-align: center;
+}
+
+.sidebar-image {
+    text-align: center;
+    margin: 1em 0;
+}
+
+.sidebar-content {
+    font-size: 0.9em;
+    line-height: 1.5;
+}
+
+.sidebar-content a {
+    color: #1e90ff;
+    text-decoration: none;
+}
+
+.sidebar-content a:hover {
+    text-decoration: underline;
+}
+
+.sidebar-content ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* Collapsible sections */
+.sidebar-list {
+    position: relative;
+}
+
+.sidebar-list-title {
+    cursor: pointer;
+    background-color: #ddddff;
+    text-align: center;
+    padding: 0.5em;
+    color: var(--color-base);
+    border: 1px solid #ccc;
+    transition: background-color 0.3s ease;
+}
+
+.sidebar-list-title:after {
+    content: "\25BC"; /* Down arrow */
+    float: right;
+    margin-right: 10px;
+    transition: transform 0.3s ease;
+}
+
+.sidebar-list:hover .sidebar-list-title:after,
+.sidebar-list:focus-within .sidebar-list-title:after {
+    transform: rotate(-180deg); /* Rotate arrow */
+}
+
+.sidebar-list-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.sidebar-list:hover .sidebar-list-content,
+.sidebar-list:focus-within .sidebar-list-content {
+    max-height: 1000px; /* Adjust as needed */
+}
+
+
 .toc {
     list-style-type: none;
     padding: 0;
@@ -511,6 +585,10 @@ span {
         clear: none;
     }
 
+    .sidebar-content {
+        font-size: 0.8em;
+    }
+
     .table th,
     .table td {
         padding: 5px;