diff --git a/javascript/navbar.js b/javascript/navbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..37813c646214c88c9b64f3bf3fc8f2e9968ae8a4
--- /dev/null
+++ b/javascript/navbar.js
@@ -0,0 +1,15 @@
+var showhide = document.getElementById('showhide')
+
+showhide.style.cursor = 'pointer'
+var leftnav = document.getElementById('left-nav')
+var rightnav = document.getElementById('right-nav')
+
+showhide.onclick = function() {
+ if ((leftnav.style.display == "none") || (leftnav.style.display == "")) {
+ leftnav.style.display="inline"
+ rightnav.style.display="inline"
+ } else {
+ leftnav.style.display="none";
+ rightnav.style.display="none";
+ }
+};
\ No newline at end of file
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index ba9b98d63633fca2baa2c3d6483b26ffea3e42d1..cbde681afced8bcd4a69108446da5e5601d1e120 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -138,6 +138,17 @@ h1, h2, h3, h4, h5, h6 {
text-decoration: none;
}
+.navbutton {
+ display: none;
+ width: 100%;
+}
+
+.navbutton i {
+ float: right;
+ padding: 1em;
+ color: white;
+}
+
/* We only want a border on all but the last element to act as a separator */
.rightborder {
border-right: 1px solid white;
@@ -170,12 +181,16 @@ h1, h2, h3, h4, h5, h6 {
max-height: 15%;
}
-
/* Media Queries */
@media screen and (max-width: 768px) {
+ .navbutton {
+ display: block;
+ }
+
.left-nav, .right-nav {
width: 100%;
+ display: none;
}
.left-nav ul, .right-nav ul {
diff --git a/templates/base.html b/templates/base.html
index c1a53f2f262470d70e0ee9c8d9e79d8ef41a2a78..ffca0e02b39bfe5f19010e253e72b65a1b15a7ad 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,6 +16,7 @@
<body>
{% block content %}{% endblock %}
{% block js %}{% endblock %}
+ <script src="navbar.js"></script>
</body>
</html>
diff --git a/templates/helpers.html b/templates/helpers.html
index 44ce88359af05cb401ef429d0f94543bfb2ddd6f..0af131920a2077e628f1ec887fac9cbea93f52ea 100644
--- a/templates/helpers.html
+++ b/templates/helpers.html
@@ -17,7 +17,10 @@
link is simply the link to the codebase (this is stored in a data file rather than the template).
#}
<div class='nav mono'>
- <div class='left-nav'>
+ <div class="navbutton" id="showhide">
+ <i class="fa fa-bars" aria-hidden="true"></i>
+ </div>
+ <div class="left-nav" id="left-nav">
<ul>
{% for item in items %}
<li class="{{ item[2] }}">
@@ -29,9 +32,9 @@
</ul>
</div>
- <div class='right-nav'>
+ <div class="right-nav" id="right-nav">
<ul>
- <li class='btn-orange code'>
+ <li class="btn-orange code">
<a href="{{ link }}"><i class="fa fa-gitlab" aria-hidden="true"></i> Code</a>
</li>
</ul>