layout.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  7. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. <title>vuetify demo</title>
  10. <style>
  11. [v-cloak] {
  12. display: none;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="app" v-cloak>
  18. <v-app id="inspire">
  19. <v-navigation-drawer app :value="true" clipped :permanent="true">
  20. <v-list>
  21. <v-list-item @click="">
  22. <v-list-item-action>
  23. <v-icon>search</v-icon>
  24. </v-list-item-action>
  25. <v-list-item-content>
  26. <v-list-item-title>
  27. Text 1
  28. </v-list-item-title>
  29. </v-list-item-content>
  30. </v-list-item>
  31. <v-subheader class="mt-4 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
  32. <v-list>
  33. <v-list-item @click="">
  34. <v-list-item-avatar>
  35. <img :src="`https://randomuser.me/api/portraits/men/28.jpg`" alt="">
  36. </v-list-item-avatar>
  37. <v-list-item-title> Text 1</v-list-item-title>
  38. </v-list-item>
  39. </v-list>
  40. <v-list-item class="mt-4" @click="">
  41. <v-list-item-action>
  42. <v-icon color="grey darken-1">add_circle_outline</v-icon>
  43. </v-list-item-action>
  44. <v-list-item-title class="grey--text text--darken-1">Browse Channels</v-list-item-title>
  45. </v-list-item>
  46. <v-list-item @click="">
  47. <v-list-item-action>
  48. <v-icon color="grey darken-1">settings</v-icon>
  49. </v-list-item-action>
  50. <v-list-item-title class="grey--text text--darken-1">Manage Subscriptions</v-list-item-title>
  51. </v-list-item>
  52. </v-list>
  53. </v-navigation-drawer>
  54. <v-app-bar app clipped-left>
  55. <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  56. <v-icon class="mx-4">fab fa-youtube</v-icon>
  57. <v-toolbar-title class="mr-12 align-center">
  58. <span class="title">Youtube</span>
  59. </v-toolbar-title>
  60. <v-spacer></v-spacer>
  61. <v-layout align-center style="max-width: 650px">
  62. <v-text-field :append-icon-cb="() => {}" placeholder="Search..." single-line append-icon="search"
  63. color="white" hide-details></v-text-field>
  64. </v-layout>
  65. </v-app-bar>
  66. <v-content>
  67. <v-container fill-height>
  68. Hello
  69. </v-container>
  70. </v-content>
  71. </v-app>
  72. </div>
  73. <script src="http://localhost:3080/app.js"></script>
  74. <script src="http://localhost:3100/app.js"></script>
  75. </body>
  76. </html>