tengo una menú de tipo barra lateral en el cual se expande y se contrae cada vez que se le da click en un boton hamburguesa, resulta que en el layout principal tengo este componente con un `<outlet-router>` para imprimir en las rutas cada ruta del menú a un lado de la barra lateral. Ahora lo que pasa es que la interfaz de las rutas quedan detrás de la barra lateral y me gustaria que estuvieran a un lado de está barra y según se habrá o se cierre la barra lateral pues que el contenido de las rutas también se expandan y se extiendan. 

Así es como se ve, no se puede ver el contenido de la ruta que estoy en ese momento que es dashboard:
[![introducir la descripción de la imagen aquí][1]][1]


Pero cuando contraigo la barra lateral, el contenido de la ruta en la que estoy aparece estando dentras de la barra:
[![introducir la descripción de la imagen aquí][2]][2]


  [1]: https://i.sstatic.net/VWv5x.png
  [2]: https://i.sstatic.net/xwoCJ.png

Me gustaria que el contenido de las rutas aparecieran al lado de la barra lateral y que este contenido se expanda y se extienda según se abra o se cierre la barra.

Este es el código que tengo en el layout principal donde renderizo la barra y los componentes de las rutas:

    <div>
    <app-sidebar></app-sidebar>
    </div>
    <div>
    <router-outlet></router-outlet>
    </div>
Pensé que encerrando con los div podría conseguir este efecto pero no :/. Quiero aclarar que no tengo nada en los estilos de este componente principal
**Agradecería mucho si alguien supiera hacer este efecto compañeros**

Este es el el html del componente de la barra lateral por si lo necesitan ver compañeros:

    <header>
        <div id="sidemenu" class="menu-collapsed" [class.menu-expanded]="activeMenu">
          <!-- HEADER -->
            <div class="header">
              <div class="title"><span>Administrador</span></div>
              <!--Boton hamburguesa:-->
              <div class="menu-btn" (click)="toggleActiveMenu()">
                  <!--Estos 3 divs me ayudaran a crear el icono de la hamburguesa:-->
                  <div class="btn-hamburguer"></div>
                  <div class="btn-hamburguer"></div>
                  <div class="btn-hamburguer"></div>
              </div>
            </div>
            <!-- PROFILE -->
            <div class="profile">
                <div class="photo"><img src="../../../assets/images/perfil mym.jpg"></div>
                <div class="name"><span>Javier Mejía</span></div>
            </div>
            <!-- ITEMS MENU -->
            <div class="menu-items">
                <div class="item">
                    <div class="item-text" routerLink="home">
                      <div class="icon"><img src="../../../assets//images/home-icon.png"></div>
                      <div class="title"><a>Home</a></div>
                    </div>
                    <div class="item-text" routerLink="empleados">
                      <div class="icon"><img src="../../../assets//images/employee-icon.png"></div>
                      <div class="title"><a>Empleados</a></div>
                    </div>
                    <div class="item-text" routerLink="dashboard">
                      <div class="icon"><img src="../../../assets//images/dashboard-icon.png"></div>
                      <div class="title"><a>Dashboard</a></div>
                    </div>
                </div>
            </div>
        </div>
    </header>