<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Home Service</title>
  <link rel="stylesheet" href="../libs/vendor/css/google-fonts.css">
  <link rel="stylesheet" href="../libs/vendor/css/vuetify.min.css">
  <style>
    [v-cloak] {
      display: none
    }
  </style>
</head>

<body>
  <div v-cloak id="app">
    <v-app id="inspire">

      <v-navigation-drawer v-model="drawer" temporary  absolute app>
        <v-list dense>
          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon>home</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Home</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon>contact_mail</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Front Office</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon>games</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Process</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon>folder_special</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Special Order</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon>equalizer</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Quality Control</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon>library_books</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Report</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile @click="">
            <v-list-tile-action>
              <v-icon>settings</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Settings</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>


 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >home</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Home
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >contact_mail</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Front Office
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >games</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Process
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >folder_special</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Special Order
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >equalizer</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Quality Control
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >library_books</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
Report
 </div>

 <div>
              <v-menu  >
                <v-btn slot="activator"  fab dark  color="purple">
                  <v-icon >settings</v-icon>
                </v-btn>
                <v-list>

                  <v-list-tile   v-for="(item, i) in items" :key="i" @click="" >
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
settings
 </div>


      </v-navigation-drawer>





      <v-toolbar color="deep-purple" dark fixed app>
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-toolbar-title>Home Service</v-toolbar-title>
        <v-spacer></v-spacer>

        <img src="../src/assets/logo.png" height="60px">



        <div class="text-xs-center">
      <v-dialog v-model="dialog" width="500" >
        <v-btn flat icon slot="activator" color="white" dark>
          <v-badge color="red">
            <span slot="badge">3</span>
            <v-icon >
              mail
            </v-icon>
          </v-badge>
        </v-btn>

        <v-card>
          <v-card-title
            class="headline grey lighten-2"
            primary-title
          >
           Peringatan
          </v-card-title>

          <v-card-text>
 <p>1. Ini Contoh Peringatan</p>
 <p>2. Ini Contoh Peringatan</p>
 <p>3. Ini Contoh Peringatan</p>
            </v-card-text>

          <v-divider></v-divider>


        </v-card>
      </v-dialog>
      </div>

      </v-toolbar>
      <v-content>
        <v-container fluid fill-height>
          <v-layout justify-center align-center>
            <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">
              <template slot="items" slot-scope="props">
                <td>{{ props.item.name }}</td>
                <td class="text-xs-right">{{ props.item.calories }}</td>
                <td class="text-xs-right">{{ props.item.fat }}</td>
                <td class="text-xs-right">{{ props.item.carbs }}</td>
                <td class="text-xs-right">{{ props.item.protein }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
              </template>
            </v-data-table>
          </v-layout>
        </v-container>
      </v-content>
      <v-footer color="deep-purple" app>
        <span class="white--text">&copy; 2018</span>
      </v-footer>
    </v-app>

  </div>

  <!-- Vendor -->
  <script src="../libs/vendor/vue.min.js"></script>
  <script src="../libs/vendor/vuetify.js"></script>
  <!-- App Script -->
  <script>
    new Vue({
      el: '#app',
      data: {
        dialog: false,
        drawer: null,
        fav: true,
      menu: false,
      message: false,
      hints: true,

      items: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' }
      ],

        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Iron (%)', value: 'iron' }

        ],
        desserts: [
          {
            value: false,
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            value: false,
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            value: false,
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            value: false,
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            value: false,
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            value: false,
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            value: false,
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            value: false,
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            value: false,
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            value: false,
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]

      },
      props: {
        source: String
      }




    });

  </script>
</body>

</html>
