default1.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <q-layout view="lHh Lpr lFf">
  3. <q-layout-header>
  4. <q-toolbar
  5. color="primary"
  6. :glossy="$q.theme === 'mat'"
  7. :inverted="$q.theme === 'ios'"
  8. >
  9. <q-btn
  10. flat
  11. dense
  12. round
  13. @click="leftDrawerOpen = !leftDrawerOpen"
  14. aria-label="Menu"
  15. >
  16. <q-icon name="menu" />
  17. </q-btn>
  18. <q-toolbar-title>
  19. Quasar App
  20. <div slot="subtitle">Running on Quasar v{{ $q.version }}</div>
  21. </q-toolbar-title>
  22. </q-toolbar>
  23. </q-layout-header>
  24. <q-layout-drawer
  25. v-model="leftDrawerOpen"
  26. :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
  27. >
  28. <q-list
  29. no-border
  30. link
  31. inset-delimiter
  32. >
  33. <q-list-header>Essential Links</q-list-header>
  34. <q-item @click.native="openURL('http://quasar-framework.org')">
  35. <q-item-side icon="school" />
  36. <q-item-main label="Docs" sublabel="quasar-framework.org" />
  37. </q-item>
  38. <q-item @click.native="openURL('https://github.com/quasarframework/')">
  39. <q-item-side icon="code" />
  40. <q-item-main label="GitHub" sublabel="github.com/quasarframework" />
  41. </q-item>
  42. <q-item @click.native="openURL('https://discord.gg/5TDhbDg')">
  43. <q-item-side icon="chat" />
  44. <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
  45. </q-item>
  46. <q-item @click.native="openURL('http://forum.quasar-framework.org')">
  47. <q-item-side icon="record_voice_over" />
  48. <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
  49. </q-item>
  50. <q-item @click.native="openURL('https://twitter.com/quasarframework')">
  51. <q-item-side icon="rss feed" />
  52. <q-item-main label="Twitter" sublabel="@quasarframework" />
  53. </q-item>
  54. </q-list>
  55. </q-layout-drawer>
  56. <q-page-container>
  57. <router-view />
  58. </q-page-container>
  59. </q-layout>
  60. </template>
  61. <script>
  62. import { openURL } from 'quasar'
  63. export default {
  64. name: 'LayoutDefault',
  65. data () {
  66. return {
  67. leftDrawerOpen: this.$q.platform.is.desktop
  68. }
  69. },
  70. methods: {
  71. openURL
  72. }
  73. }
  74. </script>
  75. <style>
  76. </style>