You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

App.vue 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <v-app id="inspire">
  3. <v-navigation-drawer
  4. v-model="drawer"
  5. :clipped="$vuetify.breakpoint.lgAndUp"
  6. :color="color"
  7. :expand-on-hover="expandOnHover"
  8. :mini-variant="miniVariant"
  9. :right="right"
  10. :permanent="permanent"
  11. :src="bg"
  12. :absolute="absolute"
  13. dark
  14. app
  15. >
  16. <v-list dense>
  17. <template v-for="item in items">
  18. <v-row
  19. v-if="item.heading"
  20. :key="item.heading"
  21. align="center"
  22. >
  23. <v-col cols="6">
  24. <v-subheader v-if="item.heading">
  25. {{ item.heading }}
  26. </v-subheader>
  27. </v-col>
  28. <v-col
  29. cols="6"
  30. class="text-center"
  31. >
  32. <a
  33. href="#!"
  34. class="body-2 black--text"
  35. >EDIT</a>
  36. </v-col>
  37. </v-row>
  38. <v-list-group
  39. v-else-if="item.children"
  40. :key="item.text"
  41. v-model="item.model"
  42. :prepend-icon="item.model ? item.icon : item['icon-alt']"
  43. append-icon=""
  44. >
  45. <template v-slot:activator>
  46. <v-list-item-content>
  47. <v-list-item-title>
  48. {{ item.text }}
  49. </v-list-item-title>
  50. </v-list-item-content>
  51. </template>
  52. <v-list-item
  53. v-for="(child, i) in item.children"
  54. :key="i"
  55. link
  56. >
  57. <v-list-item-action v-if="child.icon">
  58. <v-icon>{{ child.icon }}</v-icon>
  59. </v-list-item-action>
  60. <v-list-item-content>
  61. <v-list-item-title>
  62. {{ child.text }}
  63. </v-list-item-title>
  64. </v-list-item-content>
  65. </v-list-item>
  66. </v-list-group>
  67. <!-- This in Case Items have no Children -->
  68. <v-list-item
  69. v-else
  70. :key="item.text"
  71. link
  72. :to="item.href"
  73. >
  74. <v-list-item-action>
  75. <v-icon @click.stop="fuckOff">{{ item.icon }}</v-icon>
  76. </v-list-item-action>
  77. <v-list-item-content>
  78. <v-list-item-title>
  79. {{ item.text }}
  80. </v-list-item-title>
  81. </v-list-item-content>
  82. </v-list-item>
  83. </template>
  84. </v-list>
  85. </v-navigation-drawer>
  86. <v-app-bar
  87. :clipped-left="$vuetify.breakpoint.lgAndUp"
  88. app
  89. color="blue darken-3"
  90. dark
  91. >
  92. <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  93. <!-- <v-toolbar-title
  94. style="width: 300px"
  95. class="ml-0 pl-4"
  96. >
  97. <span class="hidden-sm-and-down">Google Contacts</span>
  98. </v-toolbar-title> -->
  99. <!-- <v-spacer></v-spacer>
  100. <v-btn icon>
  101. <v-icon>mdi-apps</v-icon>
  102. </v-btn>
  103. <v-btn icon>
  104. <v-icon>mdi-bell</v-icon>
  105. </v-btn>
  106. <v-btn
  107. icon
  108. large
  109. >
  110. <v-avatar
  111. size="32px"
  112. item
  113. >
  114. <v-img
  115. src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
  116. alt="Vuetify"
  117. ></v-img></v-avatar>
  118. </v-btn> -->
  119. </v-app-bar>
  120. <v-content>
  121. <v-container class="px-4 py-0 fill-height" fluid>
  122. <v-row class="fill-height">
  123. <v-col>
  124. <transition name="fade">
  125. <router-view></router-view>
  126. </transition>
  127. </v-col>
  128. </v-row>
  129. </v-container>
  130. </v-content>
  131. </v-app>
  132. </template>
  133. <script>
  134. // import HelloWorld from './components/HelloWorld.vue'
  135. export default {
  136. components: {
  137. // HelloWorld
  138. },
  139. props: {
  140. source: String,
  141. },
  142. data: () => ({
  143. // App Drawer properties
  144. dialog: false,
  145. drawer: null,
  146. right: false,
  147. permanent: false,
  148. miniVariant: false,
  149. expandOnHover: false,
  150. background: true,
  151. absolute: false,
  152. // Items in the App Drawer
  153. items: [
  154. { icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' },
  155. { icon: 'mdi-history', text: 'Frequently contacted' },
  156. { icon: 'mdi-content-copy', text: 'Duplicates' },
  157. {
  158. icon: 'mdi-chevron-up',
  159. 'icon-alt': 'mdi-chevron-down',
  160. text: 'Labels',
  161. model: true,
  162. children: [
  163. { icon: 'mdi-plus', text: 'Create label' },
  164. ],
  165. },
  166. {
  167. icon: 'mdi-chevron-up',
  168. 'icon-alt': 'mdi-chevron-down',
  169. text: 'More',
  170. model: false,
  171. children: [
  172. { text: 'Import' },
  173. { text: 'Export' },
  174. { text: 'Print' },
  175. { text: 'Undo changes' },
  176. { text: 'Other contacts' },
  177. ],
  178. },
  179. { icon: 'mdi-settings', text: 'Settings' },
  180. { icon: 'mdi-message', text: 'Send feedback' },
  181. { icon: 'mdi-help-circle', text: 'Help' },
  182. { icon: 'mdi-cellphone-link', text: 'App downloads' },
  183. { icon: 'mdi-keyboard', text: 'Go to the old version' },
  184. ],
  185. }),
  186. computed: {
  187. bg () {
  188. return this.background ? 'https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg' : undefined
  189. },
  190. },
  191. methods: {
  192. fuckOff() {
  193. alert('fuckOff')
  194. },
  195. toggleTheme() {
  196. this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
  197. },
  198. }
  199. }
  200. </script>