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-673edc58e1fad" aria-controls="navigation" type="button" aria-label="Toggle drawer" data-uid="673edc58e1ff7">   
     <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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="menu_open" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673edc58e2035">
                    </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-673edc58e1fad" data-js-toggle-class="is-open" data-uid="673edc58e1fad">
    <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-673edc58e1fad]" type="button" aria-label="Close" data-uid="673edc58e207b">   
     <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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673edc58e20c3">
                    </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="673edc58e1ab7" method="get" action="#">

    
    
    <!-- group.blade.php -->
<div class="c-group u-margin--auto c-group--horizontal" data-uid="673edc58e1a64">
    <!-- 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="673edc58e17c7">
    
            <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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="search" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673edc58e18e1">
                    </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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673edc58e1945">
                    </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 material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673edc58e198e">
                    </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="673edc58e19fa">   
     <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="673edc58e1b51" data-uid="673edc58e1b51">
          
      <li id="673edc58e1b51-8355136711702749279-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="673edc58e1b51-8355136711702749279-0__label" href="#" target="_top" id="673edc58e1b51-8355136711702749279-0__label" data-uid="673edc58e1c6a">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="673edc58e1b51-8108210590945400503-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="673edc58e1b51-8108210590945400503-1__label" href="#" target="_top" id="673edc58e1b51-8108210590945400503-1__label" data-uid="673edc58e1d42">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="673edc58e1b51-5268476382537212978-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="673edc58e1b51-5268476382537212978-2__label" href="#" target="_top" id="673edc58e1b51-5268476382537212978-2__label" data-uid="673edc58e1de7">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="673edc58e1b51-4838023652831784090-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="673edc58e1b51-4838023652831784090-3__label" href="#" target="_top" id="673edc58e1b51-4838023652831784090-3__label" data-uid="673edc58e1e8a">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
        
      </li>

          
      <li id="673edc58e1b51-8773064290771893205-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="673edc58e1b51-8773064290771893205-4__label" href="#" target="_top" id="673edc58e1b51-8773064290771893205-4__label" data-uid="673edc58e1f27">
        <!-- 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-673edc58e1fad]" 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

Blade component parameters

Key	Default value	Type	Available values	Description
label	Close	string	-	What to say in the label of the close drawer button.
screenSizes	["xs","sm","md","lg","xl"]	array	-	Show on selected screen sizes. xs,sm,md,lg,xl.
toggleButtonData	[]	array	-	The data to be passed to the toggle button. If empty no button will be rendered.
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Drawer/drawer.json