<div class="c-sidebar-nav">
<div class="c-sidebar-nav__header">
<a href="/" class="c-sidebar-nav__header-link">
<button class="o-button o-button--icon c-sidebar-nav__button" aria-label="Back">
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L11.4142 12L14.7071 15.2929C15.0976 15.6834 15.0976 16.3166 14.7071 16.7071C14.3166 17.0976 13.6834 17.0976 13.2929 16.7071L9.29289 12.7071C8.90237 12.3166 8.90237 11.6834 9.29289 11.2929L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289Z" />
</svg>
</span>
</button>
<h2 class="o-heading o-heading--xs c-sidebar-nav__heading">
Heading
</h2>
</a>
</div>
<div class="c-link-list">
<a class="o-link c-link-list__item" href="/" target="_blank" rel="noreferrer">
<span class="o-link__label">
Link One
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M18.2308 21H4.38462C4.01754 20.9995 3.66565 20.8535 3.40609 20.5939C3.14653 20.3344 3.00049 19.9825 3 19.6154V5.76923C3.00049 5.40216 3.14653 5.05026 3.40609 4.79071C3.66565 4.53115 4.01754 4.38511 4.38462 4.38462H11.3077V5.76923H4.38462V19.6154H18.2308V12.6923H19.6154V19.6154C19.6149 19.9825 19.4689 20.3344 19.2093 20.5939C18.9497 20.8535 18.5978 20.9995 18.2308 21Z" />
<path d="M14.0769 3V4.38462H18.6365L12.6923 10.3288L13.6712 11.3077L19.6154 5.36354V9.92308H21V3H14.0769Z" />
</svg>
</span>
</span>
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</a>
<a class="o-link c-link-list__item" href="/" target="_self">
<span class="o-link__label">
Link Two
</span>
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</a>
<a class="o-link c-link-list__item" href="/" target="_self">
<span class="o-link__label">
Link Three
</span>
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</a>
</div>
</div>
{% set base_class = sidebar_nav.base_class|default('c-sidebar-nav') %}
{% if sidebar_nav %}
<div class="{{ bem(base_class, sidebar_nav.element, sidebar_nav.modifiers, sidebar_nav.extra) }}">
<div class="{{ bem(base_class, 'header') }}">
{% if sidebar_nav.heading.link %}
<a href="{{ sidebar_nav.heading.link }}" class="{{ bem(base_class, 'header-link') }}">
{% include "@button" with {
"button": {
"icon": {
"name": "chevron-left",
"size": "md"
},
"modifiers": "icon",
"extra": bem(base_class, 'button'),
"attributes": {
"aria-label": "Back"
}
}
} %}
{% endif %}
{% include "@heading" with {
"heading": {
"level": "2",
"size": "xs",
"text": sidebar_nav.heading.text,
"extra": bem(base_class, 'heading')
}
} %}
{% if sidebar_nav.heading.link %}
</a>
{% endif %}
</div>
{% include "@link-list" with sidebar_nav %}
</div>
{% endif %}
{
"sidebar_nav": {
"heading": {
"link": "/",
"text": "Heading"
},
"link_list": {
"items": [
{
"link": {
"text": "Link One",
"url": "/",
"target": "_blank"
}
},
{
"link": {
"text": "Link Two",
"url": "/"
}
},
{
"link": {
"text": "Link Three",
"url": "/"
}
}
]
}
}
}
/* ------------------------------------*\
$SIDEBAR-NAV
\*------------------------------------ */
.c-sidebar-nav {
display: flex;
flex-direction: column;
row-gap: var(--dotd-space);
padding: var(--dotd-space);
background-color: var(--dotd-color-background-default);
&__header,
&__header-link {
display: flex;
align-items: center;
gap: var(--dotd-space-xxs);
}
&__header-link {
width: 100%;
> * {
color: var(--dotd-color-content-secondary-strong);
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
}
&:hover,
&:focus {
> * {
color: var(--dotd-color-content-primary-default);
}
}
}
&__button {
padding: 0;
}
}
No notes defined.