Arquivos vue

HeaderComponent

<template>
  <div>
    <q-layout-header>
      <q-toolbar
        class="my-header"
      >
        <q-btn
          flat
          dense
          round
          @click="state()"
          aria-label="Menu"
        >
          <q-icon name="menu" />
        </q-btn>

        <q-toolbar-title>
          <q-item
            class="desktop-only"
            style="font-size: 20px; margin-top: 5px"
          >
            <q-item-side avatar="statics/icons/icon-192x192.png" class="my-class"/>
            <q-item-main label="Quasar template"  />
          </q-item>
          <div class="mobile-only" style="text-align: center">
            <q-item-side avatar="statics/icons/icon-192x192.png" class="my-class"/>
          </div>
        </q-toolbar-title>
        <q-btn round icon="announcement" size="13px">
          <q-chip floating color="red">1</q-chip>
        </q-btn>
        <q-btn
          label="Email"
          round
          align="center"
          class="desktop-only"
        >
          <img src="statics/icons/favicon-32x32.png" alt="">
          <q-popover
            style="background: red; margin-top: 14px">
            <q-list separator link>
              <q-item>
                Perfil
              </q-item>
              <q-item>
                Sair
              </q-item>
            </q-list>
          </q-popover>
        </q-btn>
      </q-toolbar>
    </q-layout-header>
  </div>
</template>

<script>
export default {
  // name: 'ComponentName',
  data () {
    return {}
  },
  methods: {
    state () {
      console.log('aquiaaa')
      this.$emit('handleState')
    }
  }
}
</script>

<style>
</style>

MenuItens

<template>
  <div>
    <q-list
      no-border
      link
      inset-delimiter
    >
      <q-item @click.native="openURL('http://quasar-framework.org')">
        <q-item-main label="Docs" sublabel="quasar-framework.org" />
        <q-item-side icon="school" />
      </q-item>
      <q-item @click.native="openURL('https://github.com/quasarframework/')">
        <q-item-side icon="code" />
        <q-item-main label="GitHub" sublabel="github.com/quasarframework" />
      </q-item>
      <q-item @click.native="openURL('https://discord.gg/5TDhbDg')">
        <q-item-side icon="chat" />
        <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
      </q-item>
      <q-item @click.native="openURL('http://forum.quasar-framework.org')">
        <q-item-side icon="record_voice_over" />
        <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
      </q-item>
      <q-item @click.native="openURL('https://twitter.com/quasarframework')">
        <q-item-side icon="rss feed" />
        <q-item-main label="Twitter" sublabel="@quasarframework" />
      </q-item>
      <q-item @click.native="openURL('http://quasar-framework.org')">
        <q-item-main label="Docs" sublabel="quasar-framework.org" />
        <q-item-side icon="school" />
      </q-item>
      <q-item @click.native="openURL('https://github.com/quasarframework/')">
        <q-item-side icon="code" />
        <q-item-main label="GitHub" sublabel="github.com/quasarframework" />
      </q-item>
      <q-item @click.native="openURL('https://discord.gg/5TDhbDg')">
        <q-item-side icon="chat" />
        <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
      </q-item>
      <q-item @click.native="openURL('http://forum.quasar-framework.org')">
        <q-item-side icon="record_voice_over" />
        <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
      </q-item>
      <q-item @click.native="openURL('https://twitter.com/quasarframework')">
        <q-item-side icon="rss feed" />
        <q-item-main label="Twitter" sublabel="@quasarframework" />
      </q-item>
    </q-list>
  </div>
</template>

<script>
export default {
  // name: 'ComponentName',
  data () {
    return {}
  }
}
</script>

<style>
</style>

MyLayout.vue

<template>
  <q-layout>
    <header-component @handleState="handleState()"></header-component>

    <component :is="sidebarComponent" :miniState="miniState" :leftDrawerOpen="leftDrawerOpen"></component>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { openURL } from 'quasar'
import HeaderComponent from '../components/template/header/HeaderComponent'
import SidebarDesktopComponent from '../components/template/sidebar/SidebarDesktopComponent'
import SidebarMobileComponent from '../components/template/sidebar/SidebarMobileComponent'

export default {
  name: 'MyLayout',
  data () {
    return {
      miniState: false,
      leftDrawerOpen: this.$q.platform.is.desktop,
      css: true,
      sidebarComponent: this.$q.platform.is.desktop ? SidebarDesktopComponent : SidebarMobileComponent
    }
  },
  computed: {
    getMenu () {
      return this.leftDrawerOpen ? SidebarDesktopComponent : SidebarMobileComponent
    }
  },
  methods: {
    openURL,
    handleState () {
      console.log('aqui')
      this.miniState = !this.miniState
    }
  },
  components: {
    HeaderComponent,
    SidebarDesktopComponent,
    SidebarMobileComponent
  }
}
</script>

<style>
  .my-header {
    background-color: #1a1e34 !important;
    color: #f5f5f5 !important;
    min-height: 67px !important;
  }
  .q-layout-drawer-normal, .q-layout-drawer-mini {
    background-color: #1a1e34 !important;
    top: 86px !important;
    transform: translateX(21px) !important;
    height: 560px !important;
    border-radius: 0px 20px;
  }
  .q-layout-drawer-mobile {
    background-color: #1a1e34 !important;
  }
  .q-item-side {
    color: white !important;
  }
  .q-item-sublabel {
    color: #a0a0a0 !important;
  }
  .q-item-separator-component {
    margin: 1px 0px;
  }
  .q-layout-drawer-normal > .q-scrollarea-thumb {
    background-color: #f5f5f5;
  }
</style>

SidebarDesktopComponent.vue

<template>
  <div>
    <q-layout-drawer
      :mini="miniState && leftDrawerOpen"
      v-model="miniState"
      style="color: white"
      show-if-above
    >
      <menu-itens></menu-itens>
    </q-layout-drawer>
  </div>
</template>

<script>
import MenuItens from '../../MenuItens'
export default {
  // name: 'ComponentName',
  data () {
    return {}
  },
  components: {
    MenuItens
  },
  props: {
    miniState: {
      required: true
    },
    leftDrawerOpen: {
      required: true
    }
  }
}
</script>

<style>
</style>

SidebarMobileComponent.vue

<template>
  <div>
    <q-layout-drawer
      v-model="miniState"
      class="my-sidebar"
    >
      <menu-itens></menu-itens>
    </q-layout-drawer>
  </div>
</template>

<script>
import MenuItens from '../../MenuItens'
export default {
  // name: 'ComponentName',
  data () {
    return {}
  },
  components: {
    MenuItens
  },
  props: {
    miniState: {
      required: true
    }
  }
}
</script>

<style>
</style>