Convert navigation to primarily sidebar
This commit is contained in:
parent
c07394768e
commit
15c25e5cdb
3 changed files with 28 additions and 9 deletions
|
@ -2,6 +2,8 @@
|
|||
|
||||
@import "homepage";
|
||||
|
||||
$sidenav-width: 275px;
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
|
@ -10,8 +12,27 @@ body {
|
|||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
|
||||
@media #{$large-and-up} {
|
||||
margin-left: $sidenav-width;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
footer.page-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
width: $sidenav-width;
|
||||
|
||||
@media #{$large-and-up} {
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
@media #{$large-and-up} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,18 +21,13 @@
|
|||
<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 "navigation/index.html" %}
|
||||
</ul>
|
||||
<a href="#" data-target="nav" class="sidenav-trigger">menu</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ul class="sidenav" id="mobile-nav">
|
||||
{% include "navigation/index.html" %}
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
{% include "navigation/index.html" %}
|
||||
|
||||
<main>
|
||||
{% block main %}
|
||||
<div class="container">
|
||||
|
|
|
@ -1 +1,4 @@
|
|||
<ul class="sidenav" id="nav">
|
||||
{% include "navigation/item.html" with reverse="homepage" text="Home" %}
|
||||
{% include "navigation/item.html" with reverse="about" text="About" %}
|
||||
</ul>
|
||||
|
|
Reference in a new issue