<nav class="primary-nav js-no-modal">
<ul class="nav-list">
<a class="nav-link" href="/components/preview/index" title="Dashboard">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dashboard"></use>
</svg>
</div>
<span class="nav-text text">Dashboard</span>
</li>
</a>
<a class="nav-link" href="/components/preview/projects" title="Projects">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-projects"></use>
</svg>
</div>
<span class="nav-text text">Projects</span>
</li>
</a>
<a class="nav-link" href="/components/preview/commercials" title="Commercials">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-commercials"></use>
</svg>
</div>
<span class="nav-text text">Commercials</span>
</li>
</a>
<a class="nav-link" href="/components/preview/integrity" title="Integrity">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-integrity"></use>
</svg>
</div>
<span class="nav-text text">Integrity</span>
</li>
</a>
<a class="nav-link" href="/components/preview/assets" title="Assets">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-assets"></use>
</svg>
</div>
<span class="nav-text text">Assets</span>
</li>
</a>
<a class="nav-link" href="/components/preview/people" title="People">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-people"></use>
</svg>
</div>
<span class="nav-text text">People</span>
</li>
</a>
<a class="nav-link" href="/components/preview/outputs-impact" title="Outputs & Impact">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-outputs-impact"></use>
</svg>
</div>
<span class="nav-text text">Outputs & Impact</span>
</li>
</a>
<a class="nav-link" href="/components/preview/reporting" title="Reporting">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-reporting"></use>
</svg>
</div>
<span class="nav-text text">Reporting</span>
</li>
</a>
<a class="nav-link" href="/components/preview/researcher-training" title="Researcher Training">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-researcher-training"></use>
</svg>
</div>
<span class="nav-text text">Researcher Training</span>
</li>
</a>
<a class="nav-link" href="/components/preview/admin-settings" title="Admin Settings">
<li class="nav-item ">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-admin-settings"></use>
</svg>
</div>
<span class="nav-text text">Admin Settings</span>
</li>
</a>
</ul>
<button class="btn nav-item btn-collapse js-collapse-nav" data-control-name="mainMenu" data-control-toggle="open, collapsed" data-current-value="collapsed">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-collapse"></use>
</svg>
</div>
<span class="nav-text text">Collapse Sidebar</span>
</button>
</nav>
<nav class="primary-nav js-no-modal">
<ul class="nav-list">
{{#each sections }}
<a class="nav-link" href="{{ @root.basePath }}{{ slug }}{{ @root.baseExtension }}" title="{{ title }}"
{{#if ( eq title @root._target.context.baseTitle )}}tabindex="-1"{{/if}} >
<li class="nav-item {{#if ( eq title @root._target.context.baseTitle )}}-active{{/if}}">
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{ name }}"></use>
</svg>
</div>
<span class="nav-text text">{{ title }}</span>
</li>
</a>
{{/each}}
</ul>
<button class="btn nav-item btn-collapse js-collapse-nav"
data-control-name="mainMenu"
data-control-toggle="open, collapsed"
data-current-value="collapsed"
>
<div class="nav-icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-collapse"></use>
</svg>
</div>
<span class="nav-text text">Collapse Sidebar</span>
</button>
</nav>
{
"sections": [
{
"name": "dashboard",
"title": "Dashboard",
"slug": "index",
"isActive": false
},
{
"name": "projects",
"title": "Projects",
"slug": "projects",
"isActive": false
},
{
"name": "commercials",
"title": "Commercials",
"slug": "commercials",
"isActive": false
},
{
"name": "integrity",
"title": "Integrity",
"slug": "integrity",
"isActive": false
},
{
"name": "assets",
"title": "Assets",
"slug": "assets",
"isActive": false
},
{
"name": "people",
"title": "People",
"slug": "people",
"isActive": false
},
{
"name": "outputs-impact",
"title": "Outputs & Impact",
"slug": "outputs-impact",
"isActive": false
},
{
"name": "reporting",
"title": "Reporting",
"slug": "reporting",
"isActive": false
},
{
"name": "researcher-training",
"title": "Researcher Training",
"slug": "researcher-training",
"isActive": false
},
{
"name": "admin-settings",
"title": "Admin Settings",
"slug": "admin-settings",
"isActive": false
}
],
"basePath": "/components/preview/",
"baseTitle": "Dashboard"
}
.primary-nav {
position: relative;
width: 60rem;
min-height: 150rem;
height: 100%;
overflow: hidden;
background: $color-irma-slate;
color: white;
box-shadow: -10px 0 10px 0 rgba(black, 0.14) inset;
transition: width $transition $ease-out-quad;
.-nav-collapsed & {
width: 15rem;
.btn-collapse {
.nav-icon {
svg {
transform: scale(-1, 1);
}
}
}
}
.nav-list {
width: 100%;
margin: 0;
padding: 0;
}
.nav-link {
color: inherit;
text-decoration: none;
&:focus {
outline: none;
border: none;
.nav-item {
opacity: 1;
}
}
}
.nav-item {
position: relative;
width: 60rem;
height: 12rem;
padding-left: 19.5rem;
overflow: hidden;
opacity: (2 / 3);
@include font-primary-bold;
transition: opacity $transition;
&:hover, &:focus {
opacity: 1;
}
&.-active {
opacity: 1;
background: $color-irma-navy;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
height: 100%;
width: 5px;
background: $color-irma-primary;
}
}
.nav-icon {
position: absolute;
top: 50%;
left: 5rem;
transform: translateY(-50%);
width: 6rem;
height: 6rem;
svg {
fill: white;
}
}
.nav-text {
@include font-size-small;
text-transform: uppercase;
line-height: 12rem;
}
}
.btn-collapse {
position: absolute;
bottom: 15rem;
left: 0;
}
}
/*
* _primary-nav.js
*/
irma.primaryNav = (function () {
'use strict';
var init = function () {
$(document).on('click', '.js-collapse-nav', function () {
var $body = $('body');
if ($body.is('.-nav-collapsed')) {
$body.removeClass('-nav-collapsed');
$(this).attr('data-current-value', 'open');
}
else {
$body.addClass('-nav-collapsed');
$(this).attr('data-current-value', 'collapsed');
}
});
};
return {
init: init
};
}());
There are no notes for this item.