<template>
  <div class="q-pa-none">
      <div class="flex justify-end">
        <q-btn
          class="hide"
          label="Menu"
          color="primary"
          dense
          flat
          icon="dashboard"
          @click="right = !right"
        />
      </div>
      <div class="row">
        <div class="show col-3 col-md-3 col-sm-12 col-xs-12 bg-white">
          <div class="full-width bg-white">
            <dashboard-menues :dbMenues="dbMenues" />
          </div>
        </div>
        <div class="col-9 col-md-9 col-sm-12 col-xs-12 bg-white q-pa-md q-mb-md">
          <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
            <tutor-welcome class="hidden" />
          </transition>
        </div>
      </div>
      <q-drawer v-model="right" side="left" class="bg-grey-2">
        <div class="full-width bg-grey-2">
          <dashboard-menues :dbMenues="dbMenues" />
        </div>
      </q-drawer>
  </div>
</template>

<script>
export default {
  name: "MyLayout",
  data() {
    return {
      dbMenues: "tutor",
      right: false,
      link: "welcome",
      left: false,
      slide: 1,
      exams: 1
    };
  },
  components: {
    "dashboard-menues": require("components/DbMenues.vue").default,
    "tutor-welcome": require("components/TutorWelcome.vue").default,
  }
};
</script>

<style lang="css" scoped>
a {
  text-decoration: none;
  color: #04b1ed;
}

.hide {
  display: none;
}

.show {
  display: inline;
}
.border {
  border: none;
}
.my-card {
  width: 100%;
  /* max-width: 430px; */
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
  .border {
    border: 1px solid #d1d1d1;
    margin: 5px;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
