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>