App.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <v-app id="inspire" :dark="darkMode">
  3. <!-- Sidebar menu -->
  4. <v-navigation-drawer
  5. v-model="drawer"
  6. clipped
  7. fixed
  8. app
  9. >
  10. <v-list dense>
  11. <v-list-tile to="/" exact>
  12. <v-list-tile-action>
  13. <v-icon>home</v-icon>
  14. </v-list-tile-action>
  15. <v-list-tile-content>
  16. <v-list-tile-title>Home</v-list-tile-title>
  17. </v-list-tile-content>
  18. </v-list-tile>
  19. <v-list-tile to="/listScenes" exact>
  20. <v-list-tile-action>
  21. <v-icon>photo_library</v-icon>
  22. </v-list-tile-action>
  23. <v-list-tile-content>
  24. <v-list-tile-title>List scenes</v-list-tile-title>
  25. </v-list-tile-content>
  26. </v-list-tile>
  27. </v-list>
  28. </v-navigation-drawer>
  29. <!--/ Sidebar menu -->
  30. <!-- Top bar -->
  31. <v-toolbar app fixed clipped-left>
  32. <v-toolbar-side-icon @click.stop="drawer = !drawer" />
  33. <v-toolbar-title>Web experience</v-toolbar-title>
  34. </v-toolbar>
  35. <!--/ Top bar -->
  36. <!-- Pages content -->
  37. <v-content>
  38. <v-container fluid fill-height>
  39. <v-layout justify-center align-center>
  40. <v-scroll-x-reverse-transition mode="out-in">
  41. <!-- View injected here -->
  42. <router-view />
  43. <!--/ View injected here -->
  44. </v-scroll-x-reverse-transition>
  45. </v-layout>
  46. </v-container>
  47. </v-content>
  48. <!--/ Pages content -->
  49. </v-app>
  50. </template>
  51. <script>
  52. export default {
  53. data() {
  54. return {
  55. darkMode: true,
  56. drawer: false
  57. }
  58. }
  59. }
  60. </script>