<template>
  <div id="main-menu">
    <MenuGeneralOptions :active="active" @update-active="updateActive" />
    <MenuCellProperties :active="active" @update-active="updateActive" />
    <MenuElementaryCA :active="active" @update-active="updateActive" />
    <Menu2dCA :active="active" @update-active="updateActive" />
  </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,
    },
    data() {
      return {
        active: "",
      };
    },
    methods: {
      // set the opened submenu. If already active, reset it so it can close
      updateActive(menu) {
        if (menu === this.active) {
          this.active = "";
        } else {
          this.active = menu;
        }
      },
    },
  };
</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>
