Add basic navbar
This commit is contained in:
parent
aa54319778
commit
4a31f0fcf6
3 changed files with 54 additions and 1 deletions
|
@ -1 +1,15 @@
|
|||
@import "materialize-css/sass/materialize";
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
footer.page-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
|
@ -16,8 +16,44 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<header id="top">
|
||||
<nav>
|
||||
<div class="nav-wrapper black">
|
||||
<a href="#" class="brand-logo right">Logo</a>
|
||||
<a href="#" data-target="mobile-nav" class="sidenav-trigger">menu</a>
|
||||
<ul id="nav-mobile" class="left hide-on-med-and-down">
|
||||
{% include "nav-items.html" %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ul class="sidenav" id="mobile-nav">
|
||||
{% include "nav-items.html" %}
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="page-footer black">
|
||||
<div class="footer-copyright">
|
||||
<div class="container">
|
||||
© {% now "Y" %} TheOrangeOne
|
||||
<a class="grey-text text-lighten-4 right" href="#top">Top</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var elems = document.querySelectorAll('.sidenav');
|
||||
var instances = M.Sidenav.init(elems, {});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
3
templates/nav-items.html
Normal file
3
templates/nav-items.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<li><a href="sass.html">Sass</a></li>
|
||||
<li><a href="badges.html">Components</a></li>
|
||||
<li><a href="collapsible.html">JavaScript</a></li>
|
Reference in a new issue