Change sidebar to accordion

aaranxu · Sep 4, 2023 · 8e94669 · 8e94669
1 parent 7a2706f
commit 8e94669
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/static/js/bootstrap.bundle.min.js b/static/js/bootstrap.bundle.min.js
diff --git a/templates/base.html b/templates/base.html
@@ -5,7 +5,7 @@
 {% import 'macros/javascript.html' as macros_js -%}
 {% import 'macros/page-publish-metadata.html' as macros_publish -%}
 {% import 'macros/section-navigation.html' as macros_section_nav -%}
-{% import 'macros/docs-sidebar.html' as macros_sidebar -%}
+{% import 'macros/docs-sidebar_accordion.html' as macros_sidebar -%}
 {% import 'macros/docs-edit-page.html' as macros_edit_page -%}
 {% import 'macros/docs-navigation.html' as macros_navigation -%}
 {% import 'macros/docs-toc.html' as macros_toc -%}

diff --git a/templates/macros/docs-sidebar_accordion.html b/templates/macros/docs-sidebar_accordion.html
@@ -0,0 +1,46 @@
+{% macro docs_sidebar(current_section) %}
+<div class="col-lg-5 col-xl-4 docs-sidebar">
+	<nav class="docs-links" aria-label="Main navigation">
+			{% set index_path = current_section ~ "/_index.md" | trim_start_matches(pat="/") %}
+			{% set index = get_section(path=index_path) %}
+			{% if index.pages %}
+					<ul class="list-unstyled">
+					{% for page in index.pages %}                           
+							<li><a class="docs-link{% if current_url == page.permalink %} active{% endif %}" href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+					{% endfor %}
+					</ul>
+			{% endif %}
+			{% if index.subsections %}
+					<div class="accordion accordion-flush" id="accordionSubMenu">
+					{% for s in index.subsections %}
+					{% set subsection = get_section(path=s) %}
+					{% if subsection.pages %}
+					<div class="accordion-item">
+						<h2 class="accordion-header" id="{{ subsection.title | slugify }}">
+							{% if subsection.permalink in current_url %} 
+								<a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ subsection.title | slugify }}" aria-expanded="true" aria-controls="collapse{{ subsection.title | slugify }}">
+									{{ subsection.title }}
+								</a>
+							{% else %}
+								<a class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ subsection.title | slugify }}" aria-expanded="false" aria-controls="collapse{{ subsection.title | slugify }}">
+									{{ subsection.title }}
+								</a>
+							{% endif %}
+						</h2>
+						<div id="collapse{{ subsection.title | slugify }}" class="accordion-collapse collapse {% if subsection.permalink in current_url %} show {% endif %}" aria-labelledby="{{ subsection.title | slugify }}" {% if subsection.permalink not in current_url %} data-bs-parent="#accordionSubMenu" {% endif %}>
+						  <div class="accordion-body">
+							<ul class="list-unstyled">
+							  {% for page in subsection.pages %}                           
+								  <li><a class="docs-link{% if current_url == page.permalink %} active{% endif %}" href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+							  {% endfor %}
+							  </ul>
+						  </div>
+						</div>
+					  </div>
+					{% endif %}
+					{% endfor %}
+					</div>
+			{% endif %}
+	</nav>
+</div>
+{% endmacro %}
diff --git a/templates/macros/javascript.html b/templates/macros/javascript.html
@@ -1,5 +1,6 @@
 {% macro javascript() %}
 <script type="text/javascript" src="{{ get_url(path="js/main.js") | safe }}" defer></script>
+<script type="text/javascript" src="{{ get_url(path="js/bootstrap.bundle.min.js") | safe }}" defer></script>
 {% if config.build_search_index %}
   <script type="text/javascript" src="{{ get_url(path="plugins/elasticlunr.min.js") | safe }}" defer></script>
   <script type="text/javascript" src="{{ get_url(path="search_index." ~ lang ~ ".js") | safe }}" defer></script>