Skip to content
Snippets Groups Projects
Commit 4dcfae8c authored by Josh Borrow's avatar Josh Borrow
Browse files

Added mobile navbar and required javascript

parent 4908efda
Branches
Tags
No related merge requests found
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
......@@ -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 {
......
......@@ -16,6 +16,7 @@
<body>
{% block content %}{% endblock %}
{% block js %}{% endblock %}
<script src="navbar.js"></script>
</body>
</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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment