<template>
  <div class="menu-row">
    <h2 :id="rowTitle" @click="updateActiveMenu">
      {{ rowTitle }}
    </h2>
    <div class="menu-row-content">
      <slot />
    </div>
  </div>
</template>

<script>
  export default {
    name: "MenuRow",
    props: {
      rowTitle: {
        type: String,
        default: "",
      },
    },
  };
</script>

<style>
  .menu-row h2 {
    font-size: medium;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--dark3);
    border-top: 1px solid var(--dark3);
    margin: 0 0 10px 0;
  }

  select {
    margin-top: 10px;
    padding: 5px;
  }

  input[type="button"] {
    min-width: 60px;
    padding: 5px;
    font-weight: bold;
    margin-right: 10px;
  }

  .form-field {
    display: flex;
    margin: 10px;
    justify-content: space-between;
  }

  .menu-row {
    flex: 1;
    position: relative;
  }

  .menu-row:hover .menu-row-content {
    display: block;
    width: 100%;
  }

  .menu-row-content {
    position: absolute;
    background: var(--dark1);
    display: none;
  }

  label,
  .form-field label {
    margin-right: 10px;
    font-weight: bold;
  }

  @media screen and (max-width: 800px) {
    .menu-row {
      margin: 0 auto;
      width: 100%;
    }

    .menu-row h2,
    .form-field {
      margin: 0;
    }

    .menu-row h2 {
      border-bottom: 1px solid var(--dark3);
      border-top: none;
    }

    .form-field {
      padding: 10px;
    }

    .menu-row:active .menu-row-content {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .menu-row-content {
      position: relative;
      width: 100%;
    }
  }
</style>
