Drawer

<!-- drawer.blade.php -->
        <button class="c-button c-drawer__toggle c-button__filled c-button__filled--primary c-button--md" target="_top" data-js-toggle-trigger="drawer-6622ae70b5fd7" aria-controls="navigation" type="button" aria-label="Toggle drawer" data-uid="6622ae70b6042">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--menu-open c-icon--material c-icon--material-menu_open material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="menu_open" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6622ae70b607f">
                menu_open
    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Toggle drawer
            </span>
        
    </span> </button>
<nav class="c-drawer c-drawer--right c-drawer--primary js-drawer c-drawer" data-move-to="body" data-js-toggle-item="drawer-6622ae70b5fd7" data-js-toggle-class="is-open" data-uid="6622ae70b5fd7">
    <div class="c-drawer__header">
            <button class="c-button c-drawer__close c-button__basic c-button__basic--default c-button--md" target="_top" aria-controls="navigation" data-simulate-click="[data-js-toggle-trigger=drawer-6622ae70b5fd7]" type="button" aria-label="Close" data-uid="6622ae70b60c1">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="close" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6622ae70b60f6">
                close
    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    
                    <!-- form.blade.php -->
<form class="c-form js-form-validation" id="mobile-search-form" data-uid="6622ae70b5031" method="get" action="#">

    
    
    <!-- group.blade.php -->
<div class="c-group u-margin--auto c-group--horizontal" data-uid="6622ae70b4fe2">
    <!-- field.blade.php -->
<div class="c-field u-flex-grow--1 u-box-shadow--1 u-rounded__left--8 c-field--search c-field--icon c-field--sm c-field--borderless c-field--radius-sm" id="mobile-search-form--field" data-uid="6622ae70b4def">
    
            <label class="c-field__label u-sr__only" for="input_mobile-search-form--field" id="label_mobile-search-form--field">
            Search
                    </label>
            
    <div class="c-field__inner c-field__inner--search">
        
        
        
        
                                        <!-- icon.blade.php -->
    <span class="c-icon c-field__icon c-icon--search c-icon--material c-icon--material-search material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" material-symbol="search" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6622ae70b4e78">
                search
    </span>
            
            
            <input id="input_mobile-search-form--field" value="" aria-label="Search" type="search" name="s" autocomplete="on" placeholder="Search">
            <div class="c-field_focus-styler u-level-top"></div> 

                    
        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6622ae70b4ec2">
                error_outline
    </span>

        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6622ae70b4f16">
                check_circle_outline
    </span>

    </div>

    
    </div>

                    <button class="c-button c-button__filled c-button__filled--default c-button--sm" target="_top" id="mobile-search-form--submit" type="submit" aria-label="Search" data-uid="6622ae70b4f7c">   
     <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" js-keep-in-viewport-after-resize="1" id="6622ae70b50b0" data-uid="6622ae70b50b0">
          
      <li id="6622ae70b50b0-9007870565424580617-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" id="6622ae70b50b0-9007870565424580617-0__label" href="#" target="_top" id="6622ae70b50b0-9007870565424580617-0__label" data-uid="6622ae70b51dd">
        <br />
<b>Warning</b>:  The parameter <b>"icon"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Warning</b>:  The parameter <b>"size"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="6622ae70b50b0-4472061268025757685-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" id="6622ae70b50b0-4472061268025757685-1__label" href="#" target="_top" id="6622ae70b50b0-4472061268025757685-1__label" data-uid="6622ae70b52c8">
        <br />
<b>Warning</b>:  The parameter <b>"icon"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Warning</b>:  The parameter <b>"size"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="6622ae70b50b0-244616557872149416-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" id="6622ae70b50b0-244616557872149416-2__label" href="#" target="_top" id="6622ae70b50b0-244616557872149416-2__label" data-uid="6622ae70b5381">
        <br />
<b>Warning</b>:  The parameter <b>"icon"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Warning</b>:  The parameter <b>"size"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="6622ae70b50b0-3155782248736171087-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" id="6622ae70b50b0-3155782248736171087-3__label" href="#" target="_top" id="6622ae70b50b0-3155782248736171087-3__label" data-uid="6622ae70b5451">
        <br />
<b>Warning</b>:  The parameter <b>"icon"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Warning</b>:  The parameter <b>"size"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="6622ae70b50b0-1623121043147835950-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" id="6622ae70b50b0-1623121043147835950-4__label" href="#" target="_top" id="6622ae70b50b0-1623121043147835950-4__label" data-uid="6622ae70b5509">
        <br />
<b>Warning</b>:  The parameter <b>"icon"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Warning</b>:  The parameter <b>"size"</b> in the <b>icon</b> component should be of type <b>"string"</b> but was recieved as type <b>"NULL"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<!-- 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-6622ae70b5fd7]" data-move-to="body"></div>

@drawer([
    'label' => 'Close',
    'attributeList' => [
        'data-move-to' => 'body',
    ],
    'toggleButtonData' => [
        'text' => "Toggle drawer",
        'icon' => 'menu_open',
        'color' => 'primary'
    ]
])
    @slot('search')
        @form([
        'id'        => 'mobile-search-form',
        'method'    => 'get',
        'action'    => '#',
        ])
            @group(['direction' => 'horizontal', 'classList' => ['u-margin--auto']])
                @field([
                    'id'            => 'mobile-search-form--field',
                    'type'          => 'search',
                    'name'          => 's',
                    'required'      => false,
                    'size'          => 'sm',
                    'radius'        => 'sm',
                    'borderless'    => true,
                    'label'         => 'Search',
                    'hideLabel'     => true,
                    'icon'          => ['icon' => 'search'],
                    'classList'     => [
                        'u-flex-grow--1',
                        'u-box-shadow--1',
                        'u-rounded__left--8'
                    ]
                ])
                @endfield

                @button([
                    'id'            => 'mobile-search-form--submit',
                    'text'          => 'Search',
                    'color'         => 'default',
                    'type'          => 'submit',
                    'size'          => 'sm',
                    'attributeList' => [
                        'id'            => 'mobile-search-form--submit',
                    ],
                ])
                @endbutton
            @endgroup
        @endform
    @endslot

    @slot('menu')
        @nav([
            'items' => \HbgStyleGuide\Navigation::getMockedTopLevel(),
            'classList' => [
                'u-position--relative', 
                'c-nav--drawer',           
                'c-nav--dark',
                'site-nav-mobile__primary'],
            'childItemsUrl' => '/', 
            'direction' => 'vertical',
        ])
        @endnav 
    @endslot

@enddrawer