Styling of the navigation sidebar

#172

server.py

@@ -223,69 +223,69 @@ def documentation():
         "documentation.html")
 
 @app.route("/documentation/sessionmanagement")
-@back.anchor
+# @back.anchor
 @login_required
 def sessionmanagement_documentation():
     return render_template(
         "documentation-sessionmanagement.html")
 
 @app.route("/documentation/sessionmanagement/plan")
-@back.anchor
+# @back.anchor
 @login_required
 def plan_sessionmanagement_documentation():
     return render_template(
         "documentation-sessionmanagement-plan.html")
 
 @app.route("/documentation/sessionmanagement/write")
-@back.anchor
+# @back.anchor
 @login_required
 def write_sessionmanagement_documentation():
     return render_template(
         "documentation-sessionmanagement-write.html")
 
 @app.route("/documentation/sessionmanagement/tracking")
-@back.anchor
+# @back.anchor
 @login_required
 def tracking_sessionmanagement_documentation():
     return render_template(
         "documentation-sessionmanagement-tracking.html")
 
 @app.route("/documentation/syntax")
-@back.anchor
+# @back.anchor
 @login_required
 def syntax_documentation():
     return render_template(
         "documentation-syntax.html")
 
 @app.route("/documentation/syntax/meta")
-@back.anchor
+# @back.anchor
 @login_required
 def meta_syntax_documentation():
     return render_template(
         "documentation-syntax-meta.html")
 
 @app.route("/documentation/syntax/top")
-@back.anchor
+# @back.anchor
 @login_required
 def top_syntax_documentation():
     return render_template(
         "documentation-syntax-top.html")
 
 @app.route("/documentation/syntax/lists")
-@back.anchor
+# @back.anchor
 @login_required
 def lists_syntax_documentation():
     return render_template("documentation-syntax-lists.html")
 
 @app.route("/documentation/syntax/internal")
-@back.anchor
+# @back.anchor
 @login_required
 def internal_syntax_documentation():
     return render_template(
         "documentation-syntax-internal.html")
 
 @app.route("/documentation/syntax/tags")
-@back.anchor
+# @back.anchor
 @login_required
 def tags_syntax_documentation():
     todostates = list(TodoState)
@@ -295,21 +295,21 @@ def tags_syntax_documentation():
         name_to_state=name_to_state)
 
 @app.route("/documentation/configuration")
-@back.anchor
+# @back.anchor
 @login_required
 def configuration_documentation():
     return render_template(
         "documentation-configuration.html")
 
 @app.route("/documentation/configuration/types")
-@back.anchor
+# @back.anchor
 @login_required
 def types_configuration_documentation():
     return render_template(
         "documentation-configuration-types.html")
 
 @app.route("/documentation/configuration/todomails")
-@back.anchor
+# @back.anchor
 @login_required
 def todomails_configuration_documentation():
     return render_template(

templates/documentation-base.html

 {% extends "layout.html" %}
 {% from "macros.html" import render_table %}
 {% set navigation_bar = [
-    ('documentation', 'Dokumentation', None),
-    ('sessionmanagement_documentation', 'Sitzungsverwaltung', [
-        ('plan_sessionmanagement_documentation', 'Planung'),
-        ('write_sessionmanagement_documentation', 'Protokollieren'),
-        ('tracking_sessionmanagement_documentation', 'Nachverfolgung')
+    ('sessionmanagement_documentation', '/documentation/sessionmanagement', 'Sitzungsverwaltung', [
+        ('plan_sessionmanagement_documentation', '/documentation/sessionmanagement/plan', 'Planung'),
+        ('write_sessionmanagement_documentation', '/documentation/sessionmanagement/write', 'Protokollieren'),
+        ('tracking_sessionmanagement_documentation', '/documentation/sessionmanagement/tracking', 'Nachverfolgung')
     ]),
-    ('syntax_documentation', 'Syntax', [
-        ('meta_syntax_documentation', 'Metadaten'),
-        ('top_syntax_documentation', 'Tagesordnungspunkte'),
-        ('lists_syntax_documentation', 'Listen'),
-        ('internal_syntax_documentation', 'Interne Abschnitte'),
-        ('tags_syntax_documentation', 'Tags')
+    ('syntax_documentation', '/documentation/syntax', 'Syntax', [
+        ('meta_syntax_documentation', '/documentation/syntax/meta', 'Metadaten'),
+        ('top_syntax_documentation', '/documentation/syntax/top', 'Tagesordnungspunkte'),
+        ('lists_syntax_documentation', '/documentation/syntax/lists', 'Listen'),
+        ('internal_syntax_documentation', '/documentation/syntax/internal', 'Interne Abschnitte'),
+        ('tags_syntax_documentation', '/documentation/syntax/tags', 'Tags')
     ]),
-    ('configuration_documentation', 'Einrichtung' [
-        ('types_configuration_documentation', 'Typen'),
-        ('todomails_configuration_documentation', 'Todo Mails')
+    ('configuration_documentation', '/documentation/configuration', 'Einrichtung', [
+        ('types_configuration_documentation', '/documentation/configuration/types', 'Typen'),
+        ('todomails_configuration_documentation', '/documentation/configuration/todomails', 'Todo Mails')
     ])
 ] -%}
 {% set active_page = active_page|default('documentation') -%}
 
-{% block title %}{{active_page}}{% endblock %}
-
 {% block content %}
 <div class="row">
-    <div id="left-column", class="col-lg-9">
-    {% block documentation_content %}
-        Diese Seite ist leer.
-    {% endblock %}
+    <div id="left-column", class="col-lg-3">
+		<nav class="navbar navbar-default" style="border: none; background-color:white">
+			<div class="container-fluid">
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#documentation-navigation" aria-expanded="false">
+						<span class="sr-only">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand" href="/documentation">Dokumentation</a>
+				</div>
+				<div class="collapse navbar-collapse" id="documentation-navigation">
+					<ul class="nav navbar-nav" style="width:100%">
+					{% for id, url, caption, children in navigation_bar %}
+						<li{% if id == active_page %} class="active"{% endif %} style="width:100%">
+							<div class="btn-group" style="width:100%">
+								<a class="btn btn-{% if id == active_page %}primary{% else %}default{% endif %}{% if children %} col-xs-10{% endif %}" href="{{url|e}}" role="button" style="font-weight: bold; text-align:left; border: none; padding: 10px 15px">{{caption|e}}</a>
+								{% if children %}
+								<button class="btn btn-{% if id == active_page %}primary{% else %}default{% endif %} col-xs-2" type="button" data-toggle="collapse" role="button" data-target="#{{id}}-collapse" aria-expanded="true" style="float:right; border:none; padding: 10px 15px">
+									<span class="caret"></span>
+									<span class="sr-only">Toggle Dropdown</span>
+								</button>
+								{% endif %}
 							</div>
-    <div id="right-column", class="col-lg-3">
-        <ul id="right-column-navigation", class="nav nav-pills flex-column">
-        {% for id, caption, children in navigation_bar %}
-            <li class="nav-item">
-                <a {% if id == active_page %} class="nav-link active"{% else %} class="nav-link"{% endif %}" href="{{url_for(id|e)}}">{{caption|e}}</a>
-                {% if children is not None %}
-                <ul class="nav nav-pills flex-column">
-                {% for child_id, child_caption in children %}
-                    <li class="nav-item">
-                        <a {% if child_id == active_page %} class="nav-link active"{% else %} class="nav-link"{% endif %}" href="{{url_for(child_id|e)}}">{{child_caption|e}}</a>
+							{% if children %}
+								<ul class="collapse{% if active_page.endswith(id) %}.in{% endif %} nav nav-pills nav-stacked" id="{{id}}-collapse">
+								{% for child_id, child_url, child_caption in children %}
+								<li{% if child_id == active_page %} class="active"{% endif %}>
+									<a href="{{child_url|e}}" style="padding-left: 30px">{{child_caption|e}}</a>
 								</li>
 								{% endfor %}
 								</ul>
@@ -49,4 +61,12 @@
 					</ul>
 				</div>
 			</div>
+		</nav>
+    </div>
+    <div id="right-column", class="col-lg-9">
+    {% block documentation_content %}
+        Diese Seite ist leer.
+    {% endblock %}
+    </div>
+</div>
 {% endblock %}