<template>
  <div id="main-menu">
    <MenuGeneralOptions />
    <MenuCellProperties />
    <MenuElementaryCA />
    <Menu2dCA />
  </div>
</template>

<script setup>
  import MenuCellProperties from "./MenuCellProperties.vue";
  import MenuGeneralOptions from "./MenuGeneralOptions.vue";
  import MenuElementaryCA from "./MenuElementaryCA.vue";
  import Menu2dCA from "./Menu2dCA.vue";
</script>

<style>
  #main-menu {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1;
  }

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

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

  @media screen and (max-width: 800px) {
    #main-menu {
      flex-direction: column;
      position: absolute;
    }
  }
</style>
