<button class="c-button c-drawer__toggle c-button__filled c-button__filled--primary c-button--md" data-js-toggle-trigger="drawer-6a44f0fd0f5a1" aria-controls="drawer" type="button" aria-label=
"Toggle drawer" data-uid="6a44f0fd0f607" 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-6a44f0fd0f5a1"
data-js-toggle-class="is-open" data-uid="6a44f0fd0f5a1" 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-6a44f0fd0f5a1]" type="button" aria-label="Close" data-uid="6a44f0fd0f6c9" 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-uid="6a44f0fcec1a8" data-component="form" method="get" action="#" name="drawer-search-form">
<div class="c-element u-display--flex" data-uid="6a44f0fcec108" 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-uid="6a44f0fcebb5e" 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-uid=
"6a44f0fcec01f" 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_6a44f0fcec354" data-uid="6a44f0fcec354" data-component="nav">
<li id="6a44f0fcec354-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_6a44f0fcec354-1-0__label" data-uid="6a44f0fcec622" data-component="link"><!-- icon.blade.php -->
<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-uid="6a44f0fd0a6cd" 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-uid="6a44f0fd0b6f4" 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_6a44f0fd0a869"
data-uid="6a44f0fd0a869" data-component="nav">
<li id="6a44f0fd0a869-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_6a44f0fd0a869-1-0__label" data-uid="6a44f0fd0aa85" data-component="link"><!-- icon.blade.php -->
<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-uid="6a44f0fd0ab4e" 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-uid="6a44f0fd0b462" 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_6a44f0fd0acb8" data-uid="6a44f0fd0acb8" data-component="nav">
<li id="6a44f0fd0acb8-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_6a44f0fd0acb8-1-0__label" data-uid="6a44f0fd0ae91" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Arbete - Granchild 1</span></a> <button class=
"c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" aria-pressed=
"false" type="button" data-uid="6a44f0fd0af5e" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div>
</li>
<li id="6a44f0fd0acb8-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_6a44f0fd0acb8-1-1__label" data-uid="6a44f0fd0b1bc" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Arbete - Granchild 2</span></a> <button class=
"c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" aria-pressed=
"false" type="button" data-uid="6a44f0fd0b2e4" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div>
</li>
</ul>
</div>
</li>
<li id="6a44f0fd0a869-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_6a44f0fd0a869-1-1__label" data-uid="6a44f0fd0b669" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Arbete - Child 2</span></a>
</div>
</li>
</ul>
</div>
</li>
<li id="6a44f0fcec354-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_6a44f0fcec354-1-1__label" data-uid="6a44f0fd0b801" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Bo, bygga och miljö</span></a> <button class=
"c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" aria-pressed="false" type=
"button" data-uid="6a44f0fd0b889" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div>
</li>
<li id="6a44f0fcec354-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_6a44f0fcec354-1-2__label" data-uid="6a44f0fd0bb0d" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Förskola och utbildning</span></a> <button class=
"c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" aria-pressed="false" type=
"button" data-uid="6a44f0fd0bba7" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div>
</li>
<li id="6a44f0fcec354-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_6a44f0fcec354-1-3__label" data-uid="6a44f0fd0bd26" data-component="link"><!-- icon.blade.php -->
<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-uid="6a44f0fd0bda9" 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-uid="6a44f0fd0e624" 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_6a44f0fd0c04e"
data-uid="6a44f0fd0c04e" data-component="nav">
<li id="6a44f0fd0c04e-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_6a44f0fd0c04e-1-0__label" data-uid="6a44f0fd0cc34" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">About</span></a>
</div>
</li>
<li id="6a44f0fd0c04e-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_6a44f0fd0c04e-1-1__label" data-uid="6a44f0fd0cddb" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Contact</span></a>
</div>
</li>
<li id="6a44f0fd0c04e-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_6a44f0fd0c04e-1-2__label" data-uid="6a44f0fd0cf9f" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Links</span></a>
</div>
</li>
<li id="6a44f0fd0c04e-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_6a44f0fd0c04e-1-3__label" data-uid="6a44f0fd0e57d" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">More info</span></a>
</div>
</li>
</ul>
</div>
</li>
<li id="6a44f0fcec354-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_6a44f0fcec354-1-4__label" data-uid=
"6a44f0fd0e752" 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_6a44f0fd0e89d" data-uid="6a44f0fd0e89d" data-component="nav">
<li id="6a44f0fd0e89d-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_6a44f0fd0e89d-1-0__label" data-uid="6a44f0fd0ea4a" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Arbete</span></a>
</div>
</li>
<li id="6a44f0fd0e89d-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_6a44f0fd0e89d-1-1__label" data-uid="6a44f0fd0eba1" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
</div>
</li>
<li id="6a44f0fd0e89d-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_6a44f0fd0e89d-1-2__label" data-uid="6a44f0fd0ed21" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Förskola och utbildning</span></a>
</div>
</li>
<li id="6a44f0fd0e89d-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_6a44f0fd0e89d-1-3__label" data-uid="6a44f0fd0ee5a" data-component="link"><!-- icon.blade.php -->
<span class="c-nav__text" style="">Kommun och politik</span></a>
</div>
</li>
<li id="6a44f0fd0e89d-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_6a44f0fd0e89d-1-4__label" data-uid="6a44f0fd0f4c5" data-component="link"><!-- icon.blade.php -->
<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-6a44f0fd0f5a1]" 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
