diff --git a/assets/css/codeberg-docs.css b/assets/css/codeberg-docs.css
index 7dea114..96dd719 100644
--- a/assets/css/codeberg-docs.css
+++ b/assets/css/codeberg-docs.css
@@ -14,19 +14,23 @@ header > .container { display: flex; align-items: center; }
 main { flex: 1; }
 main > .container { display: flex; }
 
-#sidebar { display: flex; flex-direction: column; padding: 50px 10px; background: #2185d0; color: white; font-weight: 500; }
+#sidebar { display: flex; flex-direction: column; padding: 50px 10px; background: #2185d0; color: white; font-weight: 500; box-sizing: border-box; }
 #sidebar nav { width: 350px; box-sizing: border-box; flex: 1; }
 #sidebar nav .fas { width: 30px; text-align: center; }
 #sidebar nav a { text-decoration: none; color: white; }
 #sidebar nav ul { list-style-type: none; padding: 0; margin: 0; }
-#sidebar .nav-section a { display: block; padding: 7px 10px; margin: 0 -10px 5px; background: #4595d3; font-size: 14pt; }
-#sidebar .nav-section a:hover, #sidebar .nav-section.active a { background: #27628f; margin-left: -15px; padding-left: 15px; margin-right: -15px; }
+#sidebar .nav-section a { display: block; padding: 7px 10px; margin: 0 -10px 5px; background: #4595d3; font-size: 12pt; }
+#sidebar .nav-section:hover a, #sidebar .nav-section.active a { background: #27628f; margin-left: -15px; padding-left: 15px; padding-right: 15px; margin-right: -15px; }
+#sidebar .nav-second-level a { font-size: 11pt; }
 #sidebar .nav-second-level ul { margin-left: 15px; padding: 7px 0; }
 #sidebar .nav-second-level li { margin-bottom: 10px; }
 #sidebar .nav-second-level a:hover, #sidebar .nav-second-level a.active { text-decoration: underline; }
 #sidebar .sidebar-close-button { display: none; position: relative; text-align: right; top: -35px; }
 #sidebar .sidebar-close-button a:hover { color: red; }
-#sidebar-overlay { display: none; opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 999; background: #000a; }
+#sidebar .section-collapse-button { margin-left: 0 !important; padding-left: 5px !important; }
+#sidebar .section-collapse-button:hover { color: #cfffff; }
+#sidebar .section-link { margin-right: 0 !important; padding-right: 5px !important; }
+#sidebar-overlay { display: none; opacity: 0; position: fixed; width: 100%; height: 100%; z-index: 999; background: #000a; }
 .sidebar-overlay-in { opacity: 1; }
 
 article { padding: 50px 0; width: 800px; }
@@ -65,6 +69,7 @@ footer { background: #f5f5f5; text-align: center; font-size: 8pt; padding: 15px;
 .action-buttons { flex: 1; }
 .action-buttons a { text-decoration: none; color: black; margin-left: 10px; }
 .action-buttons a:hover { text-decoration: underline; }
+.collapsible { overflow-y: hidden; transition: max-height 500ms; }
 .container { max-width: 1300px; margin: auto; height: 100%; }
 .flex-spacer { flex: 99; }
 
@@ -75,11 +80,10 @@ footer { background: #f5f5f5; text-align: center; font-size: 8pt; padding: 15px;
     .narrow-only { display: initial; }
 
     #header-logo { margin-left: 0; }
-    #sidebar { display: block; position: absolute; left: 0; top: 0; height: 100%; transform: translateX(-400px); z-index: 9999; }
+    #sidebar { display: block; position: fixed; overflow-y: auto; left: 0; top: 0; height: 100%; transform: translateX(-400px); z-index: 9999; }
     #sidebar .sidebar-close-button { display: block; }
     #sidebar nav { width: 300px; }
-    #sidebar .nav-section a { font-size: 12pt; }
-    #sidebar .nav-second-level { font-size: 11pt; }
+    #sidebar .nav-section a { font-size: 11pt; }
 
     #sidebar-overlay.sidebar-overlay-in { display: block; }
     article { margin-left: 0; margin-right: 0; padding-top: 0; width: 100%; }
diff --git a/assets/js/collapse.js b/assets/js/collapse.js
new file mode 100644
index 0000000..b521535
--- /dev/null
+++ b/assets/js/collapse.js
@@ -0,0 +1,22 @@
+function onCollapseButtonClick(button) {
+    let icon = button.querySelector(".fas")
+    
+    let collapseId = button.dataset["collapseId"]
+    let collapseElement = document.getElementById(collapseId)
+    if (collapseElement.style.maxHeight == "0px") {
+        icon.classList.remove("fa-plus-square")
+        icon.classList.add("fa-minus-square")
+        collapseElement.style.maxHeight = collapseElement.scrollHeight + "px"
+    } else {
+        console.log(collapseElement.style.maxHeight)
+        if (collapseElement.style.maxHeight === "") { // This is a workaround to fix animation when no initial maxHeight has been set
+            collapseElement.style.maxHeight = collapseElement.scrollHeight + "px"
+            void collapseElement.offsetWidth // Needed to trigger render
+        }
+
+
+        icon.classList.add("fa-plus-square")
+        icon.classList.remove("fa-minus-square")
+        collapseElement.style.maxHeight = "0px"
+    }
+}
diff --git a/content/_includes/default_layout.njk b/content/_includes/default_layout.njk
index 3187e2f..84d12b7 100644
--- a/content/_includes/default_layout.njk
+++ b/content/_includes/default_layout.njk
@@ -24,6 +24,7 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/solid.min.css" async>
     <link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/fontawesome.min.css" async>
 
+    <script type="text/javascript" src="/assets/js/collapse.js"></script>
     <script type="text/javascript" src="/assets/js/sidebar.js"></script>
   </head>
 
@@ -53,17 +54,24 @@
       <div class="container">
         <div id="sidebar">
           <nav>
-            <div class="sidebar-close-button"><a href="#" onclick="hideSidebar()">{% fas_icon "times-circle" %}</a></div>
+            <div class="sidebar-close-button"><a href="javascript:void(0)" onclick="hideSidebar()">{% fas_icon "times-circle" %}</a></div>
 
             <ul>
               {% for entry in collections.all | eleventyNavigation %}
                 {% set active = entry.url == page.url or entry.key == eleventyNavigation.parent %}
                 {% if (not entry.draft) or active %}
-                  <li class="nav-section{% if active %} active{% endif %}">
-                    <a href="{{ entry.url }}">{% fas_icon entry.icon | default("caret-right") %} {{ entry.title }}</a>
+                  <li class="nav-section{% if active %} active{% endif %}" style="display: flex;">
+                    <a class="section-link" href="{{ entry.url }}" style="flex: 1;">{% fas_icon entry.icon | default("caret-right") %} {{ entry.title }}</a>
+                    {% if entry.children.length > 0 %}
+                      <a class="section-collapse-button" data-collapse-id="nav-second-level-{{ entry.key }}" href="javascript:void(0)" onclick="onCollapseButtonClick(this)">
+                        {% if active %}{% fas_icon "minus-square" %}{% else %}{% fas_icon "plus-square" %}{% endif %}
+                      </a>
+                    {% else %}
+                      <a class="section-collapse-button"><!-- Intentionally left blank --></a>
+                    {% endif %}
                   </li>
-                  {% if active and entry.children.length > 0 %}
-                    <li class="nav-second-level">
+                  {% if entry.children.length > 0 %}
+                    <li class="nav-second-level collapsible" id="nav-second-level-{{ entry.key }}"{% if not active %} style="max-height: 0px;"{% endif %}>
                       <ul>
                         {% for child in entry.children %}
                           {% set child_active = child.url == page.url %}