Milligram: 내 사이드 ​​바를 사용하여 다른 요소를 오른쪽으로 푸시하는 방법은 무엇입니까?

전체 화면 높이를 차지하는 간단한 측면 탐색을 만들고 싶습니다. 나는 사용하고있다
내 기지를위한 밀리그램 이고 내 사이드 ​​탐색이 그것과 함께 작동하기를 원합니다. 다음 설정이 있습니다.

Codepen 데모

보시다시피 내 사이드 ​​바는 다음 요소입니다.

<div class="sidebar"></div>

다음 스타일로 :

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

이런 종류의 작동, 사이드 바는 다른 모든 것 위에 나타나지만 다른 모든 것은 옆으로 밀리지 않습니다. 화면이 작 으면 콘텐츠가 사이드 바와 충돌합니다.

사이드 바가 다른 모든 것 (내비게이션 포함)을 오른쪽으로 250px (너비)만큼 밀도록하려면 어떻게해야합니까? 이로 인해 작은 화면에서는 사용할 수 없게된다는 것을 알고 있지만 사용자에게 토글 할 수있는 방법을 제공하겠습니다.