<template>
  <ion-header>
    <ion-toolbar class="loc-toolbar">
      
      <ion-buttons v-if="withMenuToggle" class="loc-buttons" slot="secondary">
        <ion-menu-toggle :menu="menuId">
          <ion-button>
            <ion-icon class="loc-icon" slot="icon-only" name="menu"></ion-icon>
          </ion-button>
        </ion-menu-toggle>
      </ion-buttons>

      <ion-title v-if="title" class="loc-title">{{title}}</ion-title>

      <slot name="main"></slot>

      <div slot="primary">
        <slot name="primary"></slot>
      </div>
      
      <div slot="secondary">
        <slot name="secondary"></slot>
      </div>

    </ion-toolbar>
  </ion-header>
</template>

<script lang="ts">
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    withMenuToggle: {
      type: Boolean,
      default: true,
    },
    menuId: {
      type: String,
      default: "recoMenu",
    },
  },
  methods: {
    inputFocus() {
      this.isInputFocused = true;
    },
    inputLosesFocus() {
      this.isInputFocused = false;
    },
  },
}
</script>

<style scoped lang="css">
  .loc-toolbar {
    --border-width: 0px !important;
    --min-height: 60px;
  }
  .loc-title {
    text-align: left;
    font-size: 24px;
    padding-left: 70px;
    color: var(--reco-light-font-color);
  }
  .loc-buttons {
    padding-left: 10px;
  }
  .loc-icon {
    color: var(--reco-light-font-color);
    font-size: 36px !important;
  }
</style>
