luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Style the hamburber menu icon

Browse source
This commit is contained in:
Michael Lange 2018-07-25 17:06:39 -07:00
parent 737805272a
commit f2f8c28a91
3 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/app/styles/core/navbar.scss
View file

@ -85,4 +85,24 @@
}
}
}
.navbar-gutter-toggle {
display: none;
position: absolute;
left: 0;
padding: 1rem;
transform: translate(-35%, 0%);
height: 100%;
fill: desaturate(lighten($nomad-green, 20%), 30%);
cursor: pointer;
> svg {
width: 20px;
}
@media #{$mq-hidden-gutter} {
display: inline-block;
}
}
}

4
ui/app/styles/utils/z-indices.scss
View file

@ -1,5 +1,5 @@
$z-tooltip: 250;
$z-header: 200;
$z-gutter: 200;
$z-header: 210;
$z-gutter: 220;
$z-subnav: 200;
$z-base: 100;

8
ui/app/templates/components/global-header.hbs
View file

@ -1,6 +1,12 @@
<nav class="navbar is-primary">
<div class="navbar-brand">
<span class="navbar-item" onclick={{action onHamburgerClick}}>Hamburger</span>
<span class="navbar-gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="16" />
<rect x="0" y="42" width="100" height="16" />
<rect x="0" y="84" width="100" height="16" />
</svg>
</span>
<span class="navbar-item is-logo">
<img src="/ui/images/nomad-logo.svg" alt="Nomad" />
</span>