title: Bootstrap horizontal menu collapse to sidemenu
body: <p>For a website I need one horizontal menu in Bootstrap 4 (.container) after the header (.container-fluid) which should collapse into right sidebar using slideout.js.</p>
  
  <p>Currently  I have horizontal menu (code below) but I can't figure out how to properly collapse items for slideout. <strong>How can I do it?</strong></p>
  
  <p>I can't load two menus. If there is any solution I am open to suggestions.</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-light bg-light m-0 p-0" id="menu"&gt;
  &lt;div class="container"&gt;
  
      &lt;div class="collapse navbar-collapse" id="sidebar"&gt;
          &lt;ul class="navbar-nav mr-auto col align-self-center justify-content-center"&gt;
  
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
                      Title
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                      &lt;a class="dropdown-item" href="link"&gt;@lang('titles.link')&lt;/a&gt;
  
                      &lt;a class="dropdown-item" href="link"&gt;@lang('titles.link')&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Link 1&lt;/a&gt;
              &lt;/li&gt;        
  
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="somesite1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                      @lang('titles.somesite')
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="somesite1"&gt;
  
                      &lt;a class="dropdown-item" href="{{url(trans('routes.somesite'))}}"&gt;@lang('titles.somesite')&lt;/a&gt;           
  
                  &lt;/div&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="container-fluid main-header p-0 m-0 fixed"&gt;
  &lt;div class="container header"&gt;
      &lt;div class="row text-sm-center text-md-left text-center"&gt;
  
          &lt;div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" style="z-index:1000"&gt;
              &lt;a class="navbar-brand" href="{{url('/', [app()-&gt;getLocale()])}}"&gt;
                  &lt;img src="{{asset('logos/logo.png')}}" class="nav-logo" alt="Logo"&gt;
              &lt;/a&gt;
  
              &lt;button class="navbar-toggler d-md-none menu-icon" type="button" id="toggle-button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="true" aria-label="Toggle navigation"&gt;
                  &lt;span class="navicon"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
          &lt;/div&gt;
  
  
          &lt;div class="col-md-4 text-md-right d-none d-md-block phone-data"&gt;
           some phone data
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  @includeIf('components.navigation')
  
  &lt;main id="panel"&gt;
  
  &lt;/main&gt;
  </code></pre>