<template>
  <q-layout class="containers" view="hHh lpR lFf">
    <q-page-container>
      <q-page>
        <q-header class="text-white bg-black q-py-none" style="opacity: 0.95">
          <header-menu />
        </q-header>
        <div class="flex justify-end">
          <q-btn
            class="hide"
            label="Menu"
            color="primary"
            dense
            flat
            icon="dashboard"
            @click="right = !right"
          />
        </div>

        <q-drawer v-model="right" side="left" class="bg-grey-3">
          <div class="full-width bg-grey-3">
            <dashboard-menues :dbMenues="dbMenues" />
          </div>
        </q-drawer>
        <div class="row">
          <div class="col-3 col-md-3 col-sm-12 col-xs-12 bg-white show">
            <dashboard-menues :dbMenues="dbMenues" />
          </div>
          <div class="col-9 col-md-9 col-sm-12 col-xs-12 bg-white">
            <router-view />
          </div>
        </div>
        <footer-link />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  data() {
    return {
      dbMenues: "tutor",
      link: "welcome",
      left: false,
      right: false
    };
  },
  components: {
    "footer-link": require("components/footerLink.vue").default,
    "dashboard-menues": require("components/DbMenues.vue").default,
    "header-menu": require("components/HeaderMenu.vue").default
  }
};
</script>
<style lang="css">
.q-drawer__content {
  background: #eeeeee;
}
</style>
<style lang="css" scoped>
.hide {
  display: none !important;
}

.show {
  display: inline;
}
.my-menu-link {
  color: white;
  background: #04b1ed;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline !important;
  }

  .show {
    display: none;
  }
}
</style>
