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>