<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 &amp; 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 &amp; 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"
}
  • Content:
    .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;
    	}
    }
  • URL: /components/raw/primary-nav/_primary-nav.scss
  • Filesystem Path: components/01-components/primary-nav/_primary-nav.scss
  • Size: 1.4 KB
  • Content:
    /* 
     *	_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
    	};
    
    }());
  • URL: /components/raw/primary-nav/primary-nav.js
  • Filesystem Path: components/01-components/primary-nav/primary-nav.js
  • Size: 471 Bytes

There are no notes for this item.