move about into context

app/templates/base.html

@@ -18,30 +18,37 @@
     <span class="burger">[=]</span> <a href="/">{{ settings.SITENAME }}</a>
 </header>
 <nav class="overlay">
-    <a href="/about/">about</a><br>
+    <header>
+        <span class="burger">[x]</span> <a href="/">{{ settings.SITENAME }}</a>
+    </header>
+    <div class="about">
+        {{ about.content | safe }}
+    </div>
+    <div class="user">
     {% if request.user.is_authenticated %}
     <div>You are logged in as {{ request.user.username }}</div>
-    <a href="/logout/">logout</a><br>
+    <a href="/logout/">logout</a>
     {% else %}
-    <a href="/login/">login</a><br>
+    <a href="/login/">login</a>
     {% endif %}
+    </div>
 </nav>
 <style>
 </style>
 <script>
-    document.querySelector('.burger').addEventListener('click', event => {
-        event.preventDefault()
-        event.stopPropagation()
-        var overlay = document.querySelector('nav.overlay')
-        if (overlay.classList.contains('active')) {
-            overlay.classList.remove('active')
-            document.body.style.overflow = ''
-            document.querySelector('.burger').innerText = '[=]'
-        } else {
-            overlay.classList.add('active')
-            document.body.style.overflow = 'hidden'
-            document.querySelector('.burger').innerText = '[x]'
-        }
+    document.querySelectorAll('.burger').forEach(burger => {
+        burger.addEventListener('click', event => {
+            event.preventDefault()
+            event.stopPropagation()
+            var overlay = document.querySelector('nav.overlay')
+            if (overlay.classList.contains('active')) {
+                overlay.classList.remove('active')
+                document.body.style.overflow = ''
+            } else {
+                overlay.classList.add('active')
+                document.body.style.overflow = 'hidden'
+            }
+        })
     })
 </script>
 {% endblock %}