To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit 4ed65819 authored by Sandro Lutz's avatar Sandro Lutz Committed by Sandro Lutz
Browse files

Refactor main menu

parent 94b157b3
......@@ -11,31 +11,6 @@ export default class Header {
}
static view() {
let submenu;
if (mainNavigation.selectedItem && mainNavigation.selectedItem.submenu) {
const menu = mainNavigation.selectedItem.submenu;
submenu = m(
'section.grey',
m(
'div',
m(
'nav.submenu',
menu.map((item, index) =>
m(
'a',
{
class: menu.selectedIndex === index ? 'active' : '',
href: item.getLink(),
onupdate: item.onupdate,
},
i18n(item.label)
)
)
)
)
);
}
return m('header', [
m(
'section.blue',
......@@ -45,51 +20,92 @@ export default class Header {
{ href: `/${currentLanguage()}/`, onupdate: m.route.link },
m('img.logo', { src: AmivLogo })
),
m(
'nav',
mainNavigation.map((item, index) =>
m(
'a',
{
class: mainNavigation.selectedIndex === index ? 'active' : '',
href: item.getLink(),
onupdate: item.onupdate,
},
i18n(item.label)
)
)
),
isLoggedIn()
? m('div.profile', [
m('nav', [
m(
'ul.mainmenu',
mainNavigation.map((item, index) =>
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Profile')
),
m(
'a',
{ href: `/${currentLanguage()}/logout`, onupdate: m.route.link },
i18n('Logout')
),
])
: m(
'div.profile',
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Login')
'li',
{
class: mainNavigation.selectedIndex === index ? 'active' : '',
},
[
m(
'a',
{
href: item.getLink(),
onupdate: item.onupdate,
},
i18n(item.label)
),
item.submenu
? m('ul.submenu', [
item.submenu.map((subitem, subindex) =>
m(
'li',
{ class: item.submenu.selectedIndex === subindex ? 'active' : '' },
m(
'a',
{
href: subitem.getLink(),
onupdate: subitem.onupdate,
},
i18n(subitem.label)
)
)
),
])
: m(''),
]
)
),
m(
'div.language-switcher',
m(Button, {
label: i18n('language_button'),
events: { onclick: () => switchLanguage() },
})
),
)
),
m(
'ul.profile',
isLoggedIn()
? [
m(
'li',
{
class: m.route.get() === `/${currentLanguage()}/profile` ? 'active' : '',
},
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Profile')
)
),
m(
'li',
m(
'a',
{ href: `/${currentLanguage()}/logout`, onupdate: m.route.link },
i18n('Logout')
)
),
]
: [
m(
'li',
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Login')
)
),
]
),
m(
'div.language-switcher',
m(Button, {
label: i18n('language_button'),
events: { onclick: () => switchLanguage() },
})
),
]),
])
),
submenu,
m('section.grey'),
]);
}
}
@dimension-max-content-width: 1280px;
@dimension-desktop-header-height: 88px;
@dimension-desktop-submenu-height: 45px;
@import './colors.less';
@import './dimensions.less';
.mainmenu-template {
li {
&.active {
background-color: @color-grey;
> a {
color: @color-dark-blue;
}
}
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em;
color: #fff;
text-decoration: none;
&:hover {
color: @color-red;
}
}
}
}
header {
grid-area: header;
width: 100%;
display: block;
width: 100%;
font-size: 1.2em;
section.blue > div {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
grid-template-columns: auto 1fr;
height: @dimension-desktop-header-height;
grid-template-areas:
"logo main-navigation profile language-switcher";
"logo navigation";
.logo {
grid-area: logo;
}
nav {
grid-area: main-navigation;
align-self: center;
display: grid;
grid-area: navigation;
grid-template-columns: 1fr auto auto auto;
grid-template-areas:
"main-navigation profile language-switcher";
a {
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
padding: 1.3em;
font-size: 1.5em;
color: #fff;
text-decoration: none;
&:hover {
color: @color-red;
}
&.active {
background-color: @color-grey;
color: @color-dark-blue;
cursor: default;
li {
display: inline-block;
height: 100%;
}
}
}
.profile {
grid-area: profile;
align-self: center;
ul.mainmenu {
.mainmenu-template;
grid-area: main-navigation;
a {
height: 100%;
padding: 1.3em;
font-size: 1.5em;
color: #fff;
text-decoration: none;
li {
&.active {
ul.submenu {
display: block;
z-index: 5;
}
}
&:hover {
ul.submenu {
display: block;
}
}
&:hover {
color: @color-red;
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em;
color: #fff;
text-decoration: none;
&:hover {
color: @color-red;
}
}
}
}
}
.language-switcher {
grid-area: language-switcher;
align-self: center;
}
}
ul.submenu {
display: none;
position: absolute;
top: @dimension-desktop-header-height;
left: 0;
width: 100%;
height: @dimension-desktop-submenu-height;
text-align: center;
background-color: @color-grey;
z-index: 10;
section.grey > div {
display: grid;
li {
&.active {
background-color: @color-grey;
nav {
margin: 0 auto;
> a {
color: @color-red;
}
}
a {
display: inline-block;
height: 100%;
padding: 0.5em;
font-size: 1.5em;
color: #000;
text-decoration: none;
&:hover {
> a {
color: @color-red;
}
}
&:hover {
color: @color-red;
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-submenu-height;
padding: 0 0.5em;
color: #000;
text-decoration: none;
}
}
}
&.active {
color: @color-red;
cursor: default;
}
ul.profile {
.mainmenu-template;
grid-area: profile;
}
.language-switcher {
grid-area: language-switcher;
align-self: center;
}
}
}
section.grey {
height: @dimension-desktop-submenu-height;
}
}
Markdown is supported
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