<a href="#main" class="skip-link">Hoppa till innehållet</a>
<header class="main-header d-flex flex-row align-items-center">
<div class="wrapper d-flex flex-row justify-content-between align-items-center">
<nav class="m-left d-flex flex-row align-items-center" id="main-navigation" aria-label="primary">
<a href="/open-menu" class="m-link d-flex flex-row align-items-center m-hamburger">
<i class="material-icons">menu</i>
<span>Meny</span>
</a>
</nav>
<div class="m-center">
<a href="/" id="logo" title="MIUN logotyp">
<img src="/images/mittuniversitetet_logo.png" alt="MIUN logotyp" >
</a>
</div>
<nav class="m-right d-flex flex-row align-items-center justify-content-end" id="secondary-navigation" aria-label="secondary">
<a href="/en" class="m-link d-flex flex-row align-items-center ">
<i class="material-icons">language</i>
<span>English</span>
</a>
</nav>
</div>
</header>
<a href="{{this.skipLinkUrl}}" class="skip-link">{{this.skipLinkText}}</a>
<header class="main-header d-flex flex-row align-items-center">
<div class="wrapper d-flex flex-row justify-content-between align-items-center">
{{#if primaryNav}}
<nav class="m-left d-flex flex-row align-items-center" id="main-navigation" aria-label="primary">
{{#each primaryNav}}
<a href="{{linkUrl}}" class="m-link d-flex flex-row align-items-center m-hamburger">
<i class="material-icons">{{linkIcon}}</i>
<span>{{linkText}}</span>
</a>
{{/each}}
</nav>
{{/if}}
<div class="m-center">
<a href="{{ logoLinkUrl }}" id="logo" title="MIUN logotyp">
<img src="{{ logoImageUrl }}" alt="MIUN logotyp" >
</a>
</div>
<nav class="m-right d-flex flex-row align-items-center justify-content-end" id="secondary-navigation" aria-label="secondary">
{{#each secondaryNav}}
<a href="{{linkUrl}}" class="m-link d-flex flex-row align-items-center {{linkCustomClass}}">
<i class="material-icons">{{linkIcon}}</i>
<span>{{linkText}}</span>
</a>
{{/each}}
</nav>
</div>
{{#if menuOpen}}
<div class="main-header-menu">
<div class="d-flex flex-row align-items-center main-header-close">
<a href="{{this.closeMenuUrl}}" class="close-btn">
<i class="material-icons">close</i>
</a>
</div>
<nav>
{{#if menuColumn1}}
<ul class="list-unstyled">
{{#if subSite}}
<li>
<a href="{{subSiteBackLinkUrl}}" class="subsite-back d-flex flex-row align-items-center">
<i class="material-icons">
chevron_left
</i>
<span>
{{subSiteLinkText}}
</span>
</a>
</li>
<li>
<a href="{{subSiteLinkUrl}}" class="subsite-btn d-flex flex-row justify-content-between align-items-center">
{{subSiteTitle}}
</a>
</li>
{{/if}}
{{#each menuColumn1}}
<li>
{{#if hasChildren}}
<a href="{{url}}?showMenu=1" class="d-flex flex-row justify-content-between align-items-center {{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
<i class="material-icons">chevron_right</i>
</a>
{{else}}
<a href="{{url}}" class="{{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
</a>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{#if menuColumn2}}
<ul>
{{#each menuColumn2}}
<li>
{{#if hasChildren}}
<a href="{{url}}?showMenu=1" class="d-flex flex-row justify-content-between align-items-center {{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
<i class="material-icons">chevron_right</i>
</a>
{{else}}
<a href="{{url}}" class="{{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
</a>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{#if menuColumn3}}
<ul>
{{#each menuColumn3}}
<li>
{{#if hasChildren}}
<a href="{{url}}?showMenu=1" class="d-flex flex-row justify-content-between align-items-center {{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
<i class="material-icons">chevron_right</i>
</a>
{{else}}
<a href="{{url}}" class="{{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
</a>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{#if menuColumn4}}
<ul>
{{#each menuColumn4}}
<li>
{{#if hasChildren}}
<a href="{{url}}?showMenu=1" class="d-flex flex-row justify-content-between align-items-center {{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
<i class="material-icons">chevron_right</i>
</a>
{{else}}
<a href="{{url}}" class="{{#if active}}active{{/if}}">
<span>
{{displayName}}
</span>
</a>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</nav>
</div>
{{/if}}
</header>
{
"skipLinkUrl": "#main",
"skipLinkText": "Hoppa till innehållet",
"logoImageUrl": "/images/mittuniversitetet_logo.png",
"logoLinkUrl": "/",
"logoAltText": "Mittuniversitetets logotyp",
"menuOpen": false,
"subSite": false,
"closeMenuUrl": "/close-menu",
"primaryNav": [
{
"linkText": "Meny",
"linkUrl": "/open-menu",
"linkIcon": "menu",
"linkCustomClass": ""
}
],
"secondaryNav": [
{
"linkText": "English",
"linkUrl": "/en",
"linkIcon": "language",
"linkCustomClass": ""
}
],
"menuColumn1": [
{
"displayName": "Utbildning",
"url": "/utbildning",
"active": true,
"hasChildren": true
},
{
"displayName": "Forskning",
"url": "/forskning",
"active": false,
"hasChildren": true
},
{
"displayName": "Möt Mittuniversitetet",
"url": "/mot-mittuniversitete",
"active": false,
"hasChildren": true
},
{
"displayName": "Student",
"url": "/student",
"active": false,
"hasChildren": true
},
{
"displayName": "Medarbetare",
"url": "/medarbetare",
"active": false,
"hasChildren": true
},
{
"displayName": "Bibliotek",
"url": "/bibliotek",
"active": false,
"hasChildren": true
}
],
"menuColumn2": [
{
"displayName": "Utbildning - 1",
"url": "/utbildning/page1",
"active": false,
"hasChildren": true
},
{
"displayName": "Utbildning - 2",
"url": "/utbildning/page2",
"active": true,
"hasChildren": true
},
{
"displayName": "Utbildning - 3",
"url": "/utbildning/page2",
"active": false,
"hasChildren": false
},
{
"displayName": "Utbildning - 4",
"url": "/utbildning/page2",
"active": false,
"hasChildren": true
}
],
"menuColumn3": [
{
"displayName": "Utbildning - 2 - 1",
"url": "/utbildning/page2/page1",
"active": false,
"hasChildren": false
},
{
"displayName": "Utbildning - 2 - 2",
"url": "/utbildning/page2/page2",
"active": false,
"hasChildren": false
},
{
"displayName": "Utbildning - 2 - 3",
"url": "/utbildning/page2/page3",
"active": false,
"hasChildren": true
},
{
"displayName": "Utbildning - 2 - 4",
"url": "/utbildning/page2/page4",
"active": true,
"hasChildren": true
},
{
"displayName": "Utbildning - 2 - 5",
"url": "/utbildning/page2/page5",
"active": false,
"hasChildren": false
}
],
"menuColumn4": [
{
"displayName": "Utbildning - 2 - 4 - 1",
"url": "/utbildning/page2/page4/page1",
"active": true,
"hasChildren": false
},
{
"displayName": "Utbildning - 2 - 4 - 2",
"url": "/utbildning/page2/page4/page1",
"active": false,
"hasChildren": false
}
]
}
.skip-link {
display: block;
position: absolute;
top: -80px;
width: 100%;
padding: $xs-space;
background-color: $orange;
color: #fff;
text-align: center;
font-family: "Lato Bold";
font-size: 1.5rem;
transition: top 0.3s ease-in-out;
z-index: 10;
&:focus {
top: 0;
}
&:hover {
color: #fff;
}
}
header {
&.main-header {
width: 100%;
border-bottom: 1px solid #e5e5e5;
position: relative;
.main-header-menu {
z-index: 99999;
position: absolute;
margin: $sm-space;
left: 0;
right: 0;
top: 0;
min-height: 500px;
background: white;
box-shadow: $box-shadow;
.main-header-close {
padding: 25px;
.close-btn {
opacity: 1;
transition: all 0.3s ease;
&:hover{
opacity: 0.6;
}
i{
font-size: 32px;
line-height: 32px;
}
}
}
nav {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
padding: 0 70px 0 70px;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
}
ul {
padding-left: 0;
list-style: none;
width: 100%;
padding-bottom: 100px;
margin: 0px;
li {
min-height: 50px;
a {
padding: $xs-space;
display: flex;
align-items: center;
height: 100%;
color: $dark-grey;
i {
font-size: 18px;
line-height: 18px;
}
&.subsite-btn{
background-color: #0D58A3 !important;
color: white;
span{
color: white;
}
}
&.active {
background-color: #ecf6fc;
font-family: "Lato Bold";
span {
font-family: "Lato Bold";
}
}
&:hover {
text-decoration: none;
background-color: #ecf6fc;
span {
text-decoration: underline;
}
}
}
}
}
}
}
.wrapper {
padding: 21px 50px;
width: 100%;
transition: padding 0.3s ease;
@include media-breakpoint-down(md) {
padding: 15px $xs-space;
}
.m-link {
text-decoration: none !important;
&:hover {
i {
text-decoration: none !important;
}
span {
text-decoration: underline;
}
}
i {
text-decoration: none !important;
}
span {
font-size: 18px;
line-height: 22px;
font-family: "Lato Bold";
font-weight: inherit;
margin-left: 5px;
@include media-breakpoint-down(sm) {
display: none;
}
}
&.m-hamburger {
i {
font-size: 32px;
line-height: 32px;
@include media-breakpoint-down(md) {
font-size: 28px;
line-height: 28px;
}
@include media-breakpoint-down(xs) {
font-size: 28px;
line-height: 28px;
}
}
}
&.m-tool {
i {
font-size: 25px;
line-height: 25px;
@include media-breakpoint-down(md) {
font-size: 24px;
line-height: 24px;
}
@include media-breakpoint-down(xs) {
font-size: 24px;
line-height: 24px;
}
}
}
&.m-user {
i {
font-size: 32px;
line-height: 32px;
@include media-breakpoint-down(md) {
font-size: 28px;
line-height: 28px;
}
}
}
&.m-globe {
i {
font-size: 25px;
line-height: 25px;
@include media-breakpoint-down(md) {
font-size: 24px;
line-height: 24px;
}
}
}
&.m-search {
i {
font-size: 32px;
line-height: 32px;
@include media-breakpoint-down(md) {
font-size: 28px;
line-height: 28px;
}
}
}
}
.m-left {
width: 250px;
}
.m-center {
img {
width: 170px;
height: auto;
}
}
.m-right {
width: 250px;
}
}
}
}
// header.main-header {
// height: inherit;
// box-shadow: 0 1px 0 #e5e5e5;
// // margin-bottom: 50px;
// position: relative;
// #fav-navigation {
// background: $dark-grey;
// height: 50px;
// display: flex;
// align-items: center;
// .my-courses {
// .material-icons {
// color: #fff;
// }
// }
// .favorites {
// .material-icons {
// color: $orange;
// }
// }
// &>ul {
// margin: 0;
// padding: 0;
// list-style: none;
// width: 100%;
// text-align: right;
// &>li {
// margin: 0;
// padding: 0;
// display: inline-block;
// margin-right: 35px;
// &:last-child {
// margin-right: 50px;
// }
// &>a {
// font-size: 16px;
// color: #fff;
// font-weight: bold;
// display: flex;
// .material-icons {
// margin-right: 10px;
// margin-top: 1px;
// text-decoration: none !important;
// }
// &:hover {
// .material-icons {
// text-decoration: none;
// }
// }
// }
// }
// }
// #fav-list {
// padding-top: 30px;
// padding-bottom: 30px;
// box-shadow: $box-shadow;
// .fav-head {
// font-size: 18px;
// font-weight: bold;
// padding-left: 30px;
// margin-bottom: 30px;
// }
// .fav-close {
// position: absolute;
// right: 30px;
// top: 33px;
// width: 22px;
// height: 22px;
// opacity: 1;
// &:hover {
// opacity: 0.8;
// }
// &:before, &:after {
// position: absolute;
// left: 10px;
// content: ' ';
// height: 22px;
// width: 2px;
// background-color: #404040;
// }
// &:before {
// transform: rotate(45deg);
// }
// &:after {
// transform: rotate(-45deg);
// }
// }
// position: absolute;
// right: 0;
// top: 0;
// background: #fff;
// z-index: 999;
// text-align: left;
// ul {
// margin: 0;
// padding: 0;
// li {
// list-style: none;
// border-bottom: 1px solid $light-grey;
// padding: 10px 30px;
// a {
// color: #333;
// }
// }
// }
// }
// }
// button.btn-menu {
// border: 0;
// background-color: #fff;
// margin-right: 3px;
// span {
// margin-right: 5px;
// vertical-align: middle;
// line-height: 1px;
// }
// &:hover {
// cursor: pointer;
// }
// &.toggle-menu {
// margin-left: 50px;
// }
// }
// a.link-menu {
// span {
// margin-right: 5px;
// vertical-align: middle;
// line-height: 1px;
// text-decoration: none !important;
// display: inline-block !important;
// }
// }
// #main-navigation__container {
// height: 125px;
// display: flex;
// align-items: center;
// justify-content: space-between;
// position: relative;
// #logo {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translateY(-50%) translateX(-50%);
// }
// nav#main-navigation {
// position: relative;
// display: flex;
// align-items: center;
// height: 100%;
// ul {
// list-style-type: none;
// }
// div.menu-container {
// position: absolute;
// top: 100px;
// left: 10px;
// right: 10px;
// padding: 70px;
// background-color: #fff;
// box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15);
// z-index: 1;
// .menu-options {
// .sub-site-info a {
// display: inline-block;
// margin-bottom: $sm-space;
// }
// a {
// color: $dark-grey;
// span {
// margin-left: -7px;
// }
// }
// }
// }
// div#menu-list-container {
// display: flex;
// .menu-list {
// margin: 0;
// padding: 0;
// width: 25%;
// }
// .menu-item {
// &.has-children>a:after {
// content: 'chevron_right';
// font-family: 'Material Icons';
// float: right;
// }
// }
// .menu-link {
// display: block;
// padding: $xs-space;
// color: $dark-grey;
// &.active {
// background-color: $light-blue;
// }
// &:hover {
// background-color: $light-blue;
// }
// }
// }
// }
// }
// &>a {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// nav#secondary-navigation {
// ul {
// margin: 0;
// padding: 0;
// list-style-type: none;
// li {
// display: inline-block;
// a {
// margin-right: 50px;
// color: $dark-grey;
// }
// }
// }
// }
// .user-menu {
// display: inline-block;
// width: 44px;
// height: 44px;
// color: #fff !important;
// border-radius: 50%;
// text-align: center;
// line-height: 44px;
// &.pink {
// background-color: $user-pink;
// }
// &.purple {
// background-color: $user-purple;
// }
// &.dark-green {
// background-color: $user-dark-green;
// }
// &.dark-blue {
// background-color: $user-dark-blue;
// }
// &.orange {
// background-color: $user-orange;
// }
// &.light-blue {
// background-color: $user-light-blue;
// }
// &.green {
// background-color: $user-green;
// }
// &.red {
// background-color: $user-red;
// }
// &:hover {
// text-decoration: none;
// }
// }
// }
Renders the header component