Commit c3d78a9d authored by Sandro Lutz's avatar Sandro Lutz Committed by Sandro Lutz
Browse files

Add animated mobile menu icon

parent d05c82e8
......@@ -9,8 +9,6 @@ export default {
filterList:
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
mobileMenu:
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"><image id="image0" width="256" height="256" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAQAAAD2e2DtAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAAAFoAAABaAHAjuH0AAAAHdElNRQfiBhgPCCUFNIOLAAAByElEQVR42u3doU1DYRSG4dNLKwgJExAcDsccKEZAMAmaDRgB2xFA1SDRuGIbBAnoS9D/ueF7ngX60bypOvmpAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH5b9X78d9VUx91fwkCr+qyv5i99Zt09oC5qu4AVo6zrtrbdI+aDum3qrDbdIwZa2O/d1D2AXgIIJ4BwAggngHACCCeAcAIIJ4BwAggngHACCCeAcAIIJ4BwAggngHACCNd/EravhzrqHjHMVG/dEwAAAAAAAAAI0P9I1Eldda8YaKrX2i/pz+0P4LJ2UW8E3dTTkgJwEhZOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDh+t8Ieq+77sO0gabadU8AAAAAAAAAAOBf638k6jzqv4at676el3QA1X8SdlrXUa+EPXYPmHMUGk4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOH6T8IO9RJ1E/jRPWGu/yg00JKOQgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPjTD1TVF9/MoC8YAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA2LTI0VDE1OjA4OjM3KzA2OjAwo1/avAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNi0yNFQxNTowODozNyswNjowMNICYgAAAABXdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvc3ZnaW1hZ2UvcHVibGljX2h0bWwvZG93bmxvYWRzL21lbnUtYnV0dG9uLXJlc3BvbnNpdmVfNzc3LnN2Zww7UV8AAAAASUVORK5CYII=" /></svg>',
link:
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>',
earth:
......
......@@ -29,6 +29,34 @@
}
}
.mobile-menu-icon {
display: inline-block;
cursor: pointer;
div {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: .4s;
}
// Rotate first bar
&.change .bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
// Fade out the second bar
&.change .bar2 {
opacity: 0;
}
// Rotate last bar
&.change .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
}
header {
background-color: @color-dark-blue;
margin-bottom: 5px;
......@@ -68,6 +96,7 @@ header nav {
height: auto;
max-height: @dimension-mobile-header-height;
transition: max-height ease-in-out 500ms;
align-items: center;
overflow: hidden;
&.expanded {
......@@ -266,13 +295,6 @@ header .language-selector {
header .mobile-menu {
grid-area: mobile-menu;
display: none;
height: @dimension-desktop-header-height;
.pe-icon--large {
height: calc(@dimension-desktop-header-height - 4em);
width: 72px;
cursor: pointer;
}
@media @mobile {
display: block;
......
......@@ -9,6 +9,30 @@ import { isLoggedIn, login } from '../models/auth';
let mobileMenuShowing = false;
class MobileMenuIcon {
constructor() {
this.change = false;
}
_toggle() {
this.change = !this.change;
}
view({ attrs: { className = '', change = this.change, onclick = () => {} } }) {
return m(
'div.mobile-menu-icon',
{
className: `${className} ${change ? 'change' : ''}`,
onclick: e => {
this._toggle();
onclick(e);
},
},
[m('div.bar1'), m('div.bar2'), m('div.bar3')]
);
}
}
export default class Header {
oninit() {
this._mobileMenuShowing = mobileMenuShowing;
......@@ -54,19 +78,26 @@ export default class Header {
events: { onclick: () => changeLanguage('de') },
}),
]),
m(
'div.mobile-menu',
{
onclick: () => {
this._mobileMenuShowing = !this._mobileMenuShowing;
},
m(MobileMenuIcon, {
className: 'mobile-menu',
change: this._mobileMenuShowing,
onclick: () => {
this._mobileMenuShowing = !this._mobileMenuShowing;
},
m(Icon, {
svg: { content: m.trust(icons.mobileMenu) },
size: 'large',
alt: i18n('Menu'),
})
),
}),
// m(
// 'div.mobile-menu',
// {
// onclick: () => {
// this._mobileMenuShowing = !this._mobileMenuShowing;
// },
// },
// m(Icon, {
// svg: { content: m.trust(icons.mobileMenu) },
// size: 'large',
// alt: i18n('Menu'),
// })
// ),
]
)
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment