Chartjs-How can I keep my menu from moving other elements in the page?

document.querySelector("#MenuToggle").addEventListener('click', function(event) {
  document.body.classList.toggle('toggleSidebar');
});

const myChart = new Chart(
  document.getElementById('myChart'), {
    type: 'bar',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        borderWidth: 1,
      }]
    }
  }
);

#header {
  display: flex;
  align-items: center;
}

#wrapall {
  display: flex;
  background: red;
}

#sidebar {
  display: flex;
  background: green;
  padding: 0.5em;
}

#main {
  display: flex;
  padding: 0.5em;
}

.chart-container {
  background: #FFF;
}

.toggleSidebar #sidebar {
  display: none;
}

.toggleSidebar #main {
  margin-left: 0;
}

@media screen and (max-width: 820px) {
  #MobileMenuToggle {
    display: inline-flex;
  }
  #sidebar {
    display: none;
  }
  .toggleSidebar #sidebar {
    display: initial;
    z-index: 999;
  }
  #main {
    margin-left: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<header>
  <div id="header">
    <div class="header" id="MenuToggle">click me</div>
  </div>
</header>
<div id="wrapall">
  <div id="sidebar">
    <div id="sidebarContent">
      my insane menu
      <aside>
        <div><a href="#graph-1">graph1</a></div>
        <div><a href="#graph-2">graph2</a></div>
        <div><a href="#graph-3">graph3</a></div>
        <div><a href="#graph-4">graph4</a></div>
        <div><a href="#graph-5">graph5</a></div>
        <div><a href="#graph-6">graph6</a></div>
        <div><a href="#graph-7">graph7</a></div>
        <div><a href="#graph-8">graph8</a></div>
      </aside>
    </div>
  </div>
  <div id="main">
    <section id="page">
      <main>
        <article id="graph-1">
          insane graph 1
          <div class="chart-container">
            <canvas class="chart" id="myChart"></canvas>
          </div>
        </article>
        <article id="graph-2">
          insane graph 2
        </article>
        <article id="graph-3">
          insane graph 3
        </article>
      </main>
    </section>
  </div>
</div>