explorata/src/components/MainMenu.vue

<template>
  <div id="sidebar">
    <MenuGeneralOptions />
    <MenuCellProperties />
    <MenuElementaryCA />
    <Menu2dCA />
  </div>
</template>

<script>
  import MenuCellProperties from "./MenuCellProperties.vue";
  import MenuGeneralOptions from "./MenuGeneralOptions.vue";
  import MenuElementaryCA from "./MenuElementaryCA.vue";
  import Menu2dCA from "./Menu2dCA.vue";
  export default {
    name: "MainMenu",
    components: {
      MenuCellProperties,
      MenuGeneralOptions,
      MenuElementaryCA,
      Menu2dCA,
    },
  };
</script>

<style>
  #sidebar {
    width: 25%;
    padding: 0 10px;
    overflow-y: scroll;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  #sidebar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  #sidebar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  @media screen and (max-width: 800px) {
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    #mainContent {
      flex: 1;
      width: 100%;
    }

    #sidebar {
      flex: 1;
      padding: 0;
      width: 100%;
    }
  }
</style>