<button class="c-button c-drawer__toggle c-button__filled c-button__filled--primary c-button--md" data-js-toggle-trigger="drawer-6aaf9045ec1e2" aria-controls="drawer" type="button" aria-label=
"Toggle drawer" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Toggle
drawer</span></span></button>
<nav class="c-drawer c-drawer--right js-drawer c-drawer c-drawer--duotone c-drawer--primary c-drawer--duotone-secondary" data-move-to="body" data-js-toggle-item="drawer-6aaf9045ec1e2"
data-js-toggle-class="is-open" data-component="drawer">
<div class="c-drawer__header">
<button class="c-button c-drawer__close c-button--align-visually c-button__basic c-button__basic--default c-button--md" aria-controls="drawer" data-simulate-click=
"[data-js-toggle-trigger=drawer-6aaf9045ec1e2]" type="button" aria-label="Close" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
<!-- icon.blade.php --></span> <span class="c-button__label-text">Close</span></span></button> <!-- form.blade.php -->
<form class="c-form u-width--100 js-form-validation" id="drawer-search-form" data-component="form" method="get" action="#" name="drawer-search-form">
<div class="c-element u-display--flex" data-component="element">
<!-- field.blade.php -->
<div class="c-field u-rounded-right--none c-field--search c-field--icon c-field--sm c-field--radius-md" id="drawer-search-form__field" data-component="field">
<label class="c-field__label u-sr__only" for="input_drawer-search-form__field" id="label_drawer-search-form__field">What are you looking for?</label>
<div class="c-field__inner c-field__inner--search">
<!-- icon.blade.php -->
<input id="input_drawer-search-form__field" value="" aria-label="What are you looking for?" placeholder="What are you looking for?" type="search" name="s" autocomplete="on" />
<div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
<!-- icon.blade.php -->
</div>
</div><button class="c-button u-rounded-left--none c-button__filled c-button__filled--default c-button--sm" aria-label="Search" type="submit" id="drawer-search-form__submit" data-component=
"button"><span class="c-button__label"><span class="c-button__label-text">Search</span></span></button>
</div>
</form>
</div>
<div class="c-drawer__body">
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--drawer c-nav--dark site-nav-mobile__primary c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu"
data-js-keep-in-viewport-after-resize="1" id="id_6aaf9045e9cfe" data-component="nav">
<li id="6aaf9045e9cfe-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045e9cfe-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
"c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" type="button" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div><!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-component="element">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaf9045ea1f1"
data-component="nav">
<li id="6aaf9045ea1f1-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
"Arbete - Child 1 with a long name">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ea1f1-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long
name</span></a> <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Child 1 with a long name"
aria-pressed="false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div><!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-component="element">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
"id_6aaf9045ea61a" data-component="nav">
<li id="6aaf9045ea61a-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ea61a-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
</div>
</li>
<li id="6aaf9045ea61a-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ea61a-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
</div>
</li>
</ul>
</div>
</li>
<li id="6aaf9045ea1f1-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ea1f1-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
</div>
</li>
</ul>
</div>
</li>
<li id="6aaf9045e9cfe-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045e9cfe-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
</div>
</li>
<li id="6aaf9045e9cfe-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045e9cfe-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
</div>
</li>
<li id="6aaf9045e9cfe-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label=
"Kommun och politik">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045e9cfe-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
"c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" type="button" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div><!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-component="element">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaf9045eb1bf"
data-component="nav">
<li id="6aaf9045eb1bf-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045eb1bf-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
</div>
</li>
<li id="6aaf9045eb1bf-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045eb1bf-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
</div>
</li>
<li id="6aaf9045eb1bf-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045eb1bf-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
</div>
</li>
<li id="6aaf9045eb1bf-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045eb1bf-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
</div>
</li>
</ul>
</div>
</li>
<li id="6aaf9045e9cfe-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
<div class="c-nav__item-wrapper">
<a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--md" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaf9045e9cfe-1-4__label"
data-component="button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
</div>
</li>
</ul><!-- nav.blade.php -->
<ul class="c-nav s-nav-drawer-secondary u-position--relative c-nav--drawer c-nav--dark site-nav-mobile__secondary c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu"
data-js-keep-in-viewport-after-resize="1" id="id_6aaf9045ebaa6" data-component="nav">
<li id="6aaf9045ebaa6-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ebaa6-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a>
</div>
</li>
<li id="6aaf9045ebaa6-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ebaa6-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
</div>
</li>
<li id="6aaf9045ebaa6-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ebaa6-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
</div>
</li>
<li id="6aaf9045ebaa6-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ebaa6-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a>
</div>
</li>
<li id="6aaf9045ebaa6-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
<div class="c-nav__item-wrapper">
<a class="c-link c-nav__link" href="#" target="_top" id="id_6aaf9045ebaa6-1-4__label" data-component="link"><span class="c-nav__text" style="">Omsorg och stöd</span></a>
</div>
</li>
</ul>
</div>
</nav>
<div class="drawer-overlay js-close-drawer" data-simulate-click="[data-js-toggle-trigger=drawer-6aaf9045ec1e2]" data-move-to="body"></div>
@drawer([
'label' => 'Close',
'classList' => ['c-drawer--duotone', 'c-drawer--primary', 'c-drawer--duotone-secondary'],
'attributeList' => [
'data-move-to' => 'body',
],
'toggleButtonData' => [
'text' => "Toggle drawer",
'icon' => 'menu_open',
'color' => 'primary'
]
])
@slot('search')
@form([
'id' => 'drawer-search-form',
'method' => 'get',
'action' => "#",
'classList' => ['u-width--100']
])
@element([
'classList' => ['u-display--flex']
])
@field([
'id' => 'drawer-search-form__field',
'type' => 'search',
'name' => 's',
'required' => false,
'size' => 'sm',
'label' => "What are you looking for?",
'placeholder' => "What are you looking for?",
'hideLabel' => true,
'icon' => ['icon' => 'search'],
'classList' => ['u-rounded-right--none']
])
@endfield
@button([
'id' => 'drawer-search-form__submit',
'text' => "Search",
'color' => 'default',
'type' => 'submit',
'size' => 'sm',
'attributeList' => [
'aria-label' => "Search",
],
'classList' => ['u-rounded-left--none']
])
@endbutton
@endelement
@endform
@endslot
@slot('menu')
@nav([
'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
'classList' => [
'u-position--relative',
'c-nav--drawer',
'c-nav--dark',
'site-nav-mobile__primary'],
'childItemsUrl' => '/',
'direction' => 'vertical',
'includeToggle' => true,
])
@endnav
@nav([
'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
'classList' => [
's-nav-drawer-secondary',
'u-position--relative',
'c-nav--drawer',
'c-nav--dark',
'site-nav-mobile__secondary'],
'childItemsUrl' => '/',
'direction' => 'vertical',
])
@endnav
@endslot
@enddrawer
