<nav class="c-nav" lang="en">
<ul class="c-nav__list">
<li class="c-nav__list-item">
<a href="work" class="c-nav__link ">Work</a>
</li>
<li class="c-nav__list-item">
<div class="c-dropdown c-dropdown--raw c-dropdown--centered-list c-dropdown--nav">
<button class="c-dropdown__button" aria-expanded="false" aria-controls="services-dropdown-">
<span class="c-dropdown__button-text">Services</span>
<span class="c-dropdown__button-icon"><svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-arrow-bottom-24px"></use>
</svg></span>
</button>
<ul class="c-dropdown__list" id="services-dropdown-">
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="#">Design for Innovation</a>
</li>
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="#">Ecosystem Design</a>
</li>
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="#">Digital Product Design</a>
</li>
</ul>
</div>
</li>
<li class="c-nav__list-item">
<a href="impact" class="c-nav__link ">Impact</a>
</li>
<li class="c-nav__list-item">
<div class="c-dropdown c-dropdown--raw c-dropdown--centered-list c-dropdown--nav">
<button class="c-dropdown__button" aria-expanded="false" aria-controls="culture-dropdown-">
<span class="c-dropdown__button-text">Culture</span>
<span class="c-dropdown__button-icon"><svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
<use xlink:href="#icn-arrow-bottom-24px"></use>
</svg></span>
</button>
<ul class="c-dropdown__list" id="culture-dropdown-">
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="life">Life in Tangible</a>
</li>
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="thinking">Thinking</a>
</li>
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="inspiration">Inspiration</a>
</li>
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="community">Community</a>
</li>
<li class="c-dropdown__list-item">
<a class="c-dropdown__link" href="newsletter">Newsletter</a>
</li>
</ul>
</div>
</li>
<li class="c-nav__list-item">
<a href="contacts" class="c-nav__link ">Contacts</a>
</li>
</ul>
</nav>
{% import "@macros" as macroNav %}
{% set element = (category ?? entry ?? null) %}
<nav class="c-nav{% if modifier is defined %} {{ modifier }}{% endif %}" lang="en">
<ul class="c-nav__list">
{% for navLink in GLOBAL_NAV_LINKS %}
{% if navLink.items is defined and navLink.items is not null %}
<li class="c-nav__list-item{% if navLink.class is defined %} {{ navLink.class }}{% endif %}">
{% include "@dropdown" with {
modifier: "c-dropdown--raw c-dropdown--centered-list c-dropdown--nav",
id: navLink.url ~ "-dropdown-" ~ context,
buttonText: navLink.title,
items: navLink.items
} %}
</li>
{% else %}
<li class="c-nav__list-item{% if navLink.class is defined %} {{ navLink.class }}{% endif %}">
<a
href="{{ siteUrl }}{{ navLink.url }}"
class="c-nav__link {{ macroNav.is_active_css(navLink.url) }}"
{{ macroNav.is_active_notation(navLink.url) }}
>{{ navLink.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
{
"GLOBAL_NAV_LINKS": [
{
"title": "Work",
"url": "work"
},
{
"title": "Services",
"url": "services",
"items": [
{
"title": "Design for Innovation",
"url": "#"
},
{
"title": "Ecosystem Design",
"url": "#"
},
{
"title": "Digital Product Design",
"url": "#"
}
]
},
{
"title": "Impact",
"url": "impact"
},
{
"title": "Culture",
"url": "culture",
"items": [
{
"title": "Life in Tangible",
"url": "life"
},
{
"title": "Thinking",
"url": "thinking"
},
{
"title": "Inspiration",
"url": "inspiration"
},
{
"title": "Community",
"url": "community"
},
{
"title": "Newsletter",
"url": "newsletter"
}
]
},
{
"title": "Contacts",
"url": "contacts"
}
]
}
.c-nav__list {
display: flex;
list-style: none;
justify-content: space-evenly;
align-items: center;
font-family: 'brother-1816'; // This rule sets font-family to Services dropdown
@include min-screen(bp(medium)) {
justify-content: initial;
}
}
.c-nav__link {
color: useHSL(--primary-100);
text-decoration: none;
@include font-scale(level-4, $font-primary, extrabold);
}
.c-nav__link.is-active {
.no-js & {
text-decoration: underline;
text-decoration-color: useHSL(--accent-100);
}
}
.c-nav__list-item {
margin-left: spacing(space-12);
margin-right: spacing(space-12);
// display: none;
@include min-screen(bp(medium)) {
// display: block;
margin-left: spacing(space-24);
margin-right: spacing(space-24);
}
}
// .c-nav__list-item--relevant {
// display: block;
// }
/*------------------------------------*
Off Canvas modifier
*------------------------------------*/
.c-nav--off-canvas {
background-color: useHSL(--primary-100);
.c-nav__list-item {
display: block;
}
.c-nav__list-item--relevant {
display: none;
}
.c-nav__list {
flex-direction: column;
align-items: flex-start;
}
.c-nav__link {
@include font-scale(level-5, $font-primary, extrabold);
color: useHSL(--base-100);
}
.c-nav__list-item {
margin-left: 0;
margin-right: 0;
}
.c-nav__list-item + .c-nav__list-item {
margin-top: spacing(space-24);
}
}
No notes defined.