├── static
    └── .gitkeep
├── src
    ├── store
    │   ├── actions.js
    │   ├── getters.js
    │   ├── mutations.js
    │   └── store.js
    ├── assets
    │   ├── 1.png
    │   ├── blog.png
    │   ├── logo.png
    │   ├── academy.png
    │   ├── avatar.png
    │   ├── cloud.png
    │   ├── ga_app.png
    │   ├── ga_demo.png
    │   ├── bigquery.png
    │   ├── campaign.png
    │   ├── debugger.png
    │   ├── embed_api.png
    │   ├── optimize.png
    │   ├── active-users.PNG
    │   ├── attribution.png
    │   ├── data_studio.png
    │   ├── ga_partners.png
    │   ├── help_center.png
    │   ├── tag_manager.png
    │   ├── users-report.PNG
    │   ├── users-report.png
    │   ├── bounce-report.png
    │   ├── custom_alerts.png
    │   ├── reporting_api.png
    │   ├── tag_assistant.png
    │   ├── duration-report.png
    │   ├── sessions-report.PNG
    │   └── sessions-report.png
    ├── pages
    │   ├── Duplicates.vue
    │   ├── Behaviour.vue
    │   ├── Dashboard.vue
    │   ├── Conversions.vue
    │   ├── Audience.vue
    │   ├── RealTime.vue
    │   ├── Acquistion.vue
    │   ├── Discover.vue
    │   └── Home.vue
    ├── components
    │   ├── HelloWorld.vue
    │   ├── Footer.vue
    │   ├── LoginFrom.vue
    │   ├── ModelCreateContact.vue
    │   ├── GoogleKeep.vue
    │   ├── Navbar.vue
    │   └── GoogleContacts.vue
    ├── main.js
    ├── App.vue
    └── router
    │   └── index.js
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/store/getters.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/1.png


--------------------------------------------------------------------------------
/src/assets/blog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/blog.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/academy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/academy.png


--------------------------------------------------------------------------------
/src/assets/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/avatar.png


--------------------------------------------------------------------------------
/src/assets/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/cloud.png


--------------------------------------------------------------------------------
/src/assets/ga_app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/ga_app.png


--------------------------------------------------------------------------------
/src/assets/ga_demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/ga_demo.png


--------------------------------------------------------------------------------
/src/assets/bigquery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/bigquery.png


--------------------------------------------------------------------------------
/src/assets/campaign.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/campaign.png


--------------------------------------------------------------------------------
/src/assets/debugger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/debugger.png


--------------------------------------------------------------------------------
/src/assets/embed_api.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/embed_api.png


--------------------------------------------------------------------------------
/src/assets/optimize.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/optimize.png


--------------------------------------------------------------------------------
/src/assets/active-users.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/active-users.PNG


--------------------------------------------------------------------------------
/src/assets/attribution.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/attribution.png


--------------------------------------------------------------------------------
/src/assets/data_studio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/data_studio.png


--------------------------------------------------------------------------------
/src/assets/ga_partners.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/ga_partners.png


--------------------------------------------------------------------------------
/src/assets/help_center.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/help_center.png


--------------------------------------------------------------------------------
/src/assets/tag_manager.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/tag_manager.png


--------------------------------------------------------------------------------
/src/assets/users-report.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/users-report.PNG


--------------------------------------------------------------------------------
/src/assets/users-report.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/users-report.png


--------------------------------------------------------------------------------
/src/assets/bounce-report.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/bounce-report.png


--------------------------------------------------------------------------------
/src/assets/custom_alerts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/custom_alerts.png


--------------------------------------------------------------------------------
/src/assets/reporting_api.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/reporting_api.png


--------------------------------------------------------------------------------
/src/assets/tag_assistant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/tag_assistant.png


--------------------------------------------------------------------------------
/src/assets/duration-report.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/duration-report.png


--------------------------------------------------------------------------------
/src/assets/sessions-report.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/sessions-report.PNG


--------------------------------------------------------------------------------
/src/assets/sessions-report.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waseembarcha/vue-analytics/master/src/assets/sessions-report.png


--------------------------------------------------------------------------------
/src/store/mutations.js:
--------------------------------------------------------------------------------
1 | export const changeDrawer = (state) => {
2 | 	if(state.drawer === null) {
3 | 		state.drawer = false;
4 | 	} else {
5 | 		state.drawer = !state.drawer;
6 | 	}
7 | }


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import * as mutations from './mutations';
 4 | Vue.use(Vuex);
 5 | 
 6 | export const store = new Vuex.Store({
 7 | 	state:{
 8 | 		drawer:null
 9 | 	},
10 | 
11 | 	mutations
12 | });


--------------------------------------------------------------------------------
/src/pages/Duplicates.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>Duplicates Page Here</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Duplicates',
10 |   data () {
11 |     return {
12 |     }
13 |   }
14 | }
15 | </script>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>Home Component Here</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'HelloWorld',
10 |   data () {
11 |     return {
12 |     }
13 |   }
14 | }
15 | </script>


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-analytics</title>
 7 |     <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <!-- built files will be auto injected -->
12 |     
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | import { store } from './store/store'
 5 | 
 6 | Vue.config.productionTip = false
 7 | /* eslint-disable no-new */
 8 | 
 9 | import Vuetify from 'vuetify'
10 | Vue.use(Vuetify,{
11 | 	theme: {
12 | 	 primary: '#ff6d00'
13 | 	}
14 | })
15 | 
16 | import 'vuetify/dist/vuetify.min.css'
17 | 
18 | export const bus = new Vue();
19 | new Vue({
20 |   el: '#app',
21 |   store,
22 |   router,
23 |   components: { App },
24 |   template: '<App/>'
25 | })
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-analytics
 2 | 
 3 | > A Vue.js project: design inspiration from Google-Analytics
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-footer
 3 |     dark
 4 |     height="auto"
 5 |   >
 6 |     <v-card
 7 |       flat
 8 |       tile
 9 |       width="100%"
10 |       class="indigo lighten-1 white--text text-xs-center"
11 |     >
12 | 
13 |       <v-card-text class="white--text">
14 |         &copy;2018 — VueAnylatics by <strong><a class="white--text" href="http://www.waseembarcha.com">Waseem Barcha</a></strong>
15 |       </v-card-text>
16 |     </v-card>
17 |   </v-footer>
18 | </template>
19 | 
20 | <script>
21 |   export default {
22 |     data: () => ({
23 |     	icons: [
24 |         'facebook',
25 |         'twitter',
26 |         'google-plus',
27 |         'linkedin',
28 |         'instagram'
29 |       ]
30 |       
31 |     })
32 |   }
33 | </script>
34 | 
35 | <style>
36 |   .off-title{
37 |     font-size: 40px;
38 |     font-weight: 300;
39 |     letter-spacing: 0;
40 |     margin-top: 10px;
41 |     margin-bottom: 20px;
42 |   }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/pages/Behaviour.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <template>
 4 | 	  <v-jumbotron>
 5 | 	    <v-container fill-height>
 6 | 	      <v-layout align-center>
 7 | 	        <v-flex>
 8 | 	          <h3 class="display-3">Welcome to the site</h3>
 9 | 
10 | 	          <span class="subheading">Lorem ipsum dolor sit amet, pri veniam forensibus id. Vis maluisset molestiae id, ad semper lobortis cum. At impetus detraxit incorrupte usu, repudiare assueverit ex eum, ne nam essent vocent admodum.</span>
11 | 
12 | 	          <v-divider class="my-3"></v-divider>
13 | 
14 | 	          <div class="title mb-3">Check out our newest features!</div>
15 | 
16 | 	          <v-btn
17 | 	            class="mx-0"
18 | 	            color="primary"
19 | 	            large
20 | 	          >
21 | 	            See more
22 | 	          </v-btn>
23 | 	        </v-flex>
24 | 	      </v-layout>
25 | 	    </v-container>
26 | 	  </v-jumbotron>
27 | 	</template>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   name: 'Behaviour',
34 |   data () {
35 |     return {
36 |     }
37 |   }
38 | }
39 | </script>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <v-app id="inspire">
 4 |       <sidebar-topbar></sidebar-topbar>
 5 |       <v-content>
 6 |         <v-container fluid grid-list-xl>
 7 |           
 8 |           <router-view/>
 9 | 
10 |         </v-container>
11 |         <v-container fluid pa-0 ma-0>
12 |           <v-layout row align-end>
13 |             <v-flex xs12 xl12 >
14 |           
15 |               <main-footer></main-footer>
16 |             </v-flex>
17 |           </v-layout>
18 |         </v-container>
19 | 
20 | 
21 |       </v-content>
22 |       <create-contact></create-contact>
23 |     </v-app>  
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import Navbar from '@/components/Navbar'
29 | import Footer from '@/components/Footer'
30 | import ModelCreateContact from '@/components/ModelCreateContact'
31 | export default {
32 |   name: 'App',
33 |   components:{
34 |       'sidebar-topbar' :Navbar,
35 |       'main-footer' :Footer,
36 |       'create-contact' :ModelCreateContact
37 |   },
38 |   data(){
39 |     return {
40 |       
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <style>
47 |   .main-title{
48 |     font-size: 20px;
49 |     font-weight: 300;
50 |     color: #4a4a4a;
51 |     letter-spacing: 0;
52 |     margin-top: 10px;
53 |     margin-bottom: 20px;
54 |   }
55 |   .border-bottom{
56 |         border-bottom: 1px solid rgba(0,0,0,0.12);
57 |   }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/pages/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="text-xs-center">
 3 |     <v-progress-circular
 4 |       :rotate="360"
 5 |       :size="100"
 6 |       :width="15"
 7 |       :value="value"
 8 |       color="teal"
 9 |     >
10 |       {{ value }}
11 |     </v-progress-circular>
12 | 
13 |     <v-progress-circular
14 |       :rotate="-90"
15 |       :size="100"
16 |       :width="15"
17 |       :value="value"
18 |       color="primary"
19 |     >
20 |       {{ value }}
21 |     </v-progress-circular>
22 | 
23 |     <v-progress-circular
24 |       :rotate="90"
25 |       :size="100"
26 |       :width="15"
27 |       :value="value"
28 |       color="red"
29 |     >
30 |       {{ value }}
31 |     </v-progress-circular>
32 | 
33 |     <v-progress-circular
34 |       :rotate="180"
35 |       :size="100"
36 |       :width="15"
37 |       :value="value"
38 |       color="pink"
39 |     >
40 |       {{ value }}
41 |     </v-progress-circular>
42 |   </div>
43 | </template>
44 | 
45 | <script>
46 |   export default {
47 |     data () {
48 |       return {
49 |         interval: {},
50 |         value: 0
51 |       }
52 |     },
53 |     beforeDestroy () {
54 |       clearInterval(this.interval)
55 |     },
56 |     mounted () {
57 |       this.interval = setInterval(() => {
58 |         if (this.value === 100) {
59 |           return (this.value = 0)
60 |         }
61 |         this.value += 10
62 |       }, 1000)
63 |     }
64 |   }
65 | </script>
66 | 
67 | <style  scoped>
68 |   .v-progress-circular{
69 |     margin: 1rem;}
70 | </style>


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import HelloWorld from '@/components/HelloWorld'
 4 | import Home from '@/pages/Home'
 5 | import RealTime from '@/pages/RealTime'
 6 | import Audience from '@/pages/Audience'
 7 | import Acquistion from '@/pages/Acquistion'
 8 | import Behaviour from '@/pages/Behaviour'
 9 | import Conversions from '@/pages/Conversions'
10 | import Duplicates from '@/pages/Duplicates'
11 | import Discover from '@/pages/Discover'
12 | import Dashboard from '@/pages/Dashboard'
13 | 
14 | 
15 | Vue.use(Router)
16 | 
17 | 
18 | export default new Router({
19 |   mode: 'history',
20 |   routes: [
21 |     {
22 |       path: '/hello',
23 |       name: 'HelloWorld',
24 |       component: HelloWorld
25 |     },
26 |     {
27 |       path: '/home',
28 |       name: 'Home',
29 |       component: Home
30 |     },
31 |     {
32 |       path: '/real-time',
33 |       name: 'RealTime',
34 |       component: RealTime
35 |     },
36 |     {
37 |       path: '/audience',
38 |       name: 'Audience',
39 |       component: Audience
40 |     },
41 |     {
42 |       path: '/acquistion',
43 |       name: 'Acquistion',
44 |       component: Acquistion
45 |     },
46 |     {
47 |       path: '/behaviour',
48 |       name: 'Behaviour',
49 |       component: Behaviour
50 |     },
51 |     {
52 |       path: '/conversions',
53 |       name: 'Conversions',
54 |       component: Conversions
55 |     },
56 |     {
57 |       path: '/duplicates',
58 |       name: 'Duplicates',
59 |       component: Duplicates
60 |     },
61 |     {
62 |       path: '/',
63 |       name: 'Discover',
64 |       component: Discover
65 |     },
66 |     {
67 |       path: '/dashboard',
68 |       name: 'Dashboard',
69 |       component: Dashboard
70 |     },
71 |   ]
72 | })
73 | 


--------------------------------------------------------------------------------
/src/components/LoginFrom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app id="inspire">
 3 |     <v-content>
 4 |       <v-container fluid fill-height>
 5 |         <v-layout align-center justify-center>
 6 |           <v-flex xs12 sm8 md4>
 7 |             <v-card class="elevation-12">
 8 |               <v-toolbar dark color="primary">
 9 |                 <v-toolbar-title>Login form</v-toolbar-title>
10 |                 <v-spacer></v-spacer>
11 |                 <v-tooltip bottom>
12 |                   <v-btn
13 |                     icon
14 |                     large
15 |                     :href="source"
16 |                     target="_blank"
17 |                     slot="activator"
18 |                   >
19 |                     <v-icon large>code</v-icon>
20 |                   </v-btn>
21 |                   <span>Source</span>
22 |                 </v-tooltip>
23 |                 <v-tooltip right>
24 |                   <v-btn icon large href="https://codepen.io/johnjleider/pen/wyYVVj" target="_blank" slot="activator">
25 |                     <v-icon large>mdi-codepen</v-icon>
26 |                   </v-btn>
27 |                   <span>Codepen</span>
28 |                 </v-tooltip>
29 |               </v-toolbar>
30 |               <v-card-text>
31 |                 <v-form>
32 |                   <v-text-field prepend-icon="person" name="login" label="Login" type="text"></v-text-field>
33 |                   <v-text-field prepend-icon="lock" name="password" label="Password" id="password" type="password"></v-text-field>
34 |                 </v-form>
35 |               </v-card-text>
36 |               <v-card-actions>
37 |                 <v-spacer></v-spacer>
38 |                 <v-btn color="primary">Login</v-btn>
39 |               </v-card-actions>
40 |             </v-card>
41 |           </v-flex>
42 |         </v-layout>
43 |       </v-container>
44 |     </v-content>
45 |   </v-app>
46 | </template>
47 | 
48 | <script>
49 |   export default {
50 |     data: () => ({
51 |       drawer: null
52 |     }),
53 |     props: {
54 |       source: String
55 |     }
56 |   }
57 | </script>


--------------------------------------------------------------------------------
/src/components/ModelCreateContact.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 | 	<v-btn
 4 | 	  fab
 5 | 	  bottom
 6 | 	  right
 7 | 	  color="pink"
 8 | 	  dark
 9 | 	  fixed
10 | 	  @click.stop="dialog = !dialog"
11 | 	>
12 | 	  <v-icon>add</v-icon>
13 | 	</v-btn>
14 | 	<v-dialog v-model="dialog" width="800px">
15 | 	  <v-card>
16 | 		<v-card-title
17 | 		  class="grey lighten-4 py-4 title"
18 | 		>
19 | 		  Create contact
20 | 		</v-card-title>
21 | 		<v-container grid-list-sm class="pa-4">
22 | 		  <v-layout row wrap>
23 | 			<v-flex xs12 align-center justify-space-between>
24 | 			  <v-layout align-center>
25 | 				<v-avatar size="40px" class="mr-3">
26 | 				  <img
27 | 					src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
28 | 					alt=""
29 | 				  >
30 | 				</v-avatar>
31 | 				<v-text-field
32 | 				  placeholder="Name"
33 | 				></v-text-field>
34 | 			  </v-layout>
35 | 			</v-flex>
36 | 			<v-flex xs6>
37 | 			  <v-text-field
38 | 				prepend-icon="business"
39 | 				placeholder="Company"
40 | 			  ></v-text-field>
41 | 			</v-flex>
42 | 			<v-flex xs6>
43 | 			  <v-text-field
44 | 				placeholder="Job title"
45 | 			  ></v-text-field>
46 | 			</v-flex>
47 | 			<v-flex xs12>
48 | 			  <v-text-field
49 | 				prepend-icon="mail"
50 | 				placeholder="Email"
51 | 			  ></v-text-field>
52 | 			</v-flex>
53 | 			<v-flex xs12>
54 | 			  <v-text-field
55 | 				type="tel"
56 | 				prepend-icon="phone"
57 | 				placeholder="(000) 000 - 0000"
58 | 				mask="phone"
59 | 			  ></v-text-field>
60 | 			</v-flex>
61 | 			<v-flex xs12>
62 | 			  <v-text-field
63 | 				prepend-icon="notes"
64 | 				placeholder="Notes"
65 | 			  ></v-text-field>
66 | 			</v-flex>
67 | 		  </v-layout>
68 | 		</v-container>
69 | 		<v-card-actions>
70 | 		  <v-btn flat color="primary">More</v-btn>
71 | 		  <v-spacer></v-spacer>
72 | 		  <v-btn flat color="primary" @click="dialog = false">Cancel</v-btn>
73 | 		  <v-btn flat @click="dialog = false">Save</v-btn>
74 | 		</v-card-actions>
75 | 	  </v-card>
76 | 	</v-dialog>
77 |   </div>
78 | </template>
79 | 
80 | <script>
81 | 	export default {
82 | 		data: () => ({
83 | 		  dialog: false
84 | 		})
85 | 	}
86 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-analytics",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project: design inspiration from Google-Analytics",
 5 |   "author": "waseembarcha <waseembarcha1993@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.5.2",
14 |     "vue-router": "^3.0.1",
15 |     "vuetify": "^1.0.16",
16 |     "vuex": "^3.0.1"
17 |   },
18 |   "devDependencies": {
19 |     "autoprefixer": "^7.1.2",
20 |     "babel-core": "^6.22.1",
21 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
22 |     "babel-loader": "^7.1.1",
23 |     "babel-plugin-syntax-jsx": "^6.18.0",
24 |     "babel-plugin-transform-runtime": "^6.22.0",
25 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
26 |     "babel-preset-env": "^1.3.2",
27 |     "babel-preset-stage-2": "^6.22.0",
28 |     "chalk": "^2.0.1",
29 |     "copy-webpack-plugin": "^4.0.1",
30 |     "css-loader": "^0.28.0",
31 |     "extract-text-webpack-plugin": "^3.0.0",
32 |     "file-loader": "^1.1.4",
33 |     "friendly-errors-webpack-plugin": "^1.6.1",
34 |     "html-webpack-plugin": "^2.30.1",
35 |     "node-notifier": "^5.1.2",
36 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
37 |     "ora": "^1.2.0",
38 |     "portfinder": "^1.0.13",
39 |     "postcss-import": "^11.0.0",
40 |     "postcss-loader": "^2.0.8",
41 |     "postcss-url": "^7.2.1",
42 |     "rimraf": "^2.6.0",
43 |     "semver": "^5.3.0",
44 |     "shelljs": "^0.7.6",
45 |     "uglifyjs-webpack-plugin": "^1.1.1",
46 |     "url-loader": "^0.5.8",
47 |     "vue-loader": "^13.3.0",
48 |     "vue-style-loader": "^3.0.1",
49 |     "vue-template-compiler": "^2.5.2",
50 |     "webpack": "^3.6.0",
51 |     "webpack-bundle-analyzer": "^2.9.0",
52 |     "webpack-dev-server": "^2.9.1",
53 |     "webpack-merge": "^4.1.0"
54 |   },
55 |   "engines": {
56 |     "node": ">= 6.0.0",
57 |     "npm": ">= 3.0.0"
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions",
62 |     "not ie <= 8"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/pages/Conversions.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1 class="main-title">Conversions Page Here</h1>
  4 |     <template>
  5 | 	  <div class="text-xs-center">
  6 | 	    <v-progress-circular
  7 | 	      :rotate="360"
  8 | 	      :size="100"
  9 | 	      :width="15"
 10 | 	      :value="value"
 11 | 	      color="teal"
 12 | 	    >
 13 | 	      {{ value }}
 14 | 	    </v-progress-circular>
 15 | 
 16 | 	    <v-progress-circular
 17 | 	      :rotate="-90"
 18 | 	      :size="100"
 19 | 	      :width="15"
 20 | 	      :value="value"
 21 | 	      color="primary"
 22 | 	    >
 23 | 	      {{ value }}
 24 | 	    </v-progress-circular>
 25 | 
 26 | 	    <v-progress-circular
 27 | 	      :rotate="90"
 28 | 	      :size="100"
 29 | 	      :width="15"
 30 | 	      :value="value"
 31 | 	      color="red"
 32 | 	    >
 33 | 	      {{ value }}
 34 | 	    </v-progress-circular>
 35 | 
 36 | 	    <v-progress-circular
 37 | 	      :rotate="180"
 38 | 	      :size="100"
 39 | 	      :width="15"
 40 | 	      :value="value"
 41 | 	      color="pink"
 42 | 	    >
 43 | 	      {{ value }}
 44 | 	    </v-progress-circular>
 45 | 	  </div>
 46 | 	</template>
 47 |     <template>
 48 | 	  <v-layout>
 49 | 	    <v-flex xs12 sm6 offset-sm3>
 50 | 	      <v-card>
 51 | 	        <v-card-media
 52 | 	          class="white--text"
 53 | 	          height="200px"
 54 | 	          src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
 55 | 	        >
 56 | 	          <v-container fill-height fluid>
 57 | 	            <v-layout fill-height>
 58 | 	              <v-flex xs12 align-end flexbox>
 59 | 	                <span class="headline">Top 10 Australian beaches</span>
 60 | 	              </v-flex>
 61 | 	            </v-layout>
 62 | 	          </v-container>
 63 | 	        </v-card-media>
 64 | 	        <v-card-title>
 65 | 	          <div>
 66 | 	            <span class="grey--text">Number 10</span><br>
 67 | 	            <span>Whitehaven Beach</span><br>
 68 | 	            <span>Whitsunday Island, Whitsunday Islands</span>
 69 | 	          </div>
 70 | 	        </v-card-title>
 71 | 	        <v-card-actions>
 72 | 	          <v-btn flat color="orange">Share</v-btn>
 73 | 	          <v-btn flat color="orange">Explore</v-btn>
 74 | 	        </v-card-actions>
 75 | 	      </v-card>
 76 | 	    </v-flex>
 77 | 	  </v-layout>
 78 | 	</template>
 79 |     
 80 |     
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script>
 85 |   export default {
 86 |     data () {
 87 |       return {
 88 |         interval: {},
 89 |         value: 0
 90 |       }
 91 |     },
 92 |     beforeDestroy () {
 93 |       clearInterval(this.interval)
 94 |     },
 95 |     mounted () {
 96 |       this.interval = setInterval(() => {
 97 |         if (this.value === 100) {
 98 |           return (this.value = 0)
 99 |         }
100 |         this.value += 10
101 |       }, 1000)
102 |     }
103 |   }
104 | </script>
105 | 
106 | <style  scoped>
107 |   .v-progress-circular{
108 |     margin: 1rem;}
109 | </style>


--------------------------------------------------------------------------------
/src/pages/Audience.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1 class="main-title">Audience Page Here</h1>
  4 |     <template>
  5 | 	  <v-data-table
  6 | 	    :headers="headers"
  7 | 	    :items="desserts"
  8 | 	    hide-actions
  9 | 	    class="elevation-1"
 10 | 	  >
 11 | 	    <template slot="items" slot-scope="props">
 12 | 	      <td>{{ props.item.name }}</td>
 13 | 	      <td class="text-xs-right">{{ props.item.calories }}</td>
 14 | 	      <td class="text-xs-right">{{ props.item.fat }}</td>
 15 | 	      <td class="text-xs-right">{{ props.item.carbs }}</td>
 16 | 	      <td class="text-xs-right">{{ props.item.protein }}</td>
 17 | 	      <td class="text-xs-right">{{ props.item.iron }}</td>
 18 | 	    </template>
 19 | 	  </v-data-table>
 20 | 	</template>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 |   export default {
 26 |     data () {
 27 |       return {
 28 |         headers: [
 29 |           {
 30 |             text: 'Dessert (100g serving)',
 31 |             align: 'left',
 32 |             sortable: false,
 33 |             value: 'name'
 34 |           },
 35 |           { text: 'Calories', value: 'calories' },
 36 |           { text: 'Fat (g)', value: 'fat' },
 37 |           { text: 'Carbs (g)', value: 'carbs' },
 38 |           { text: 'Protein (g)', value: 'protein' },
 39 |           { text: 'Iron (%)', value: 'iron' }
 40 |         ],
 41 |         desserts: [
 42 |           {
 43 |             value: false,
 44 |             name: 'Frozen Yogurt',
 45 |             calories: 159,
 46 |             fat: 6.0,
 47 |             carbs: 24,
 48 |             protein: 4.0,
 49 |             iron: '1%'
 50 |           },
 51 |           {
 52 |             value: false,
 53 |             name: 'Ice cream sandwich',
 54 |             calories: 237,
 55 |             fat: 9.0,
 56 |             carbs: 37,
 57 |             protein: 4.3,
 58 |             iron: '1%'
 59 |           },
 60 |           {
 61 |             value: false,
 62 |             name: 'Eclair',
 63 |             calories: 262,
 64 |             fat: 16.0,
 65 |             carbs: 23,
 66 |             protein: 6.0,
 67 |             iron: '7%'
 68 |           },
 69 |           {
 70 |             value: false,
 71 |             name: 'Cupcake',
 72 |             calories: 305,
 73 |             fat: 3.7,
 74 |             carbs: 67,
 75 |             protein: 4.3,
 76 |             iron: '8%'
 77 |           },
 78 |           {
 79 |             value: false,
 80 |             name: 'Gingerbread',
 81 |             calories: 356,
 82 |             fat: 16.0,
 83 |             carbs: 49,
 84 |             protein: 3.9,
 85 |             iron: '16%'
 86 |           },
 87 |           {
 88 |             value: false,
 89 |             name: 'Jelly bean',
 90 |             calories: 375,
 91 |             fat: 0.0,
 92 |             carbs: 94,
 93 |             protein: 0.0,
 94 |             iron: '0%'
 95 |           },
 96 |           {
 97 |             value: false,
 98 |             name: 'Lollipop',
 99 |             calories: 392,
100 |             fat: 0.2,
101 |             carbs: 98,
102 |             protein: 0,
103 |             iron: '2%'
104 |           },
105 |           {
106 |             value: false,
107 |             name: 'Honeycomb',
108 |             calories: 408,
109 |             fat: 3.2,
110 |             carbs: 87,
111 |             protein: 6.5,
112 |             iron: '45%'
113 |           },
114 |           {
115 |             value: false,
116 |             name: 'Donut',
117 |             calories: 452,
118 |             fat: 25.0,
119 |             carbs: 51,
120 |             protein: 4.9,
121 |             iron: '22%'
122 |           },
123 |           {
124 |             value: false,
125 |             name: 'KitKat',
126 |             calories: 518,
127 |             fat: 26.0,
128 |             carbs: 65,
129 |             protein: 7,
130 |             iron: '6%'
131 |           }
132 |         ]
133 |       }
134 |     }
135 |   }
136 | </script>


--------------------------------------------------------------------------------
/src/components/GoogleKeep.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app id="inspire">
  3 |     <v-navigation-drawer
  4 |       fixed
  5 |       clipped
  6 |       class="grey lighten-4"
  7 |       app
  8 |       v-model="drawer"
  9 |     >
 10 |       <v-list
 11 |         dense
 12 |         class="grey lighten-4"
 13 |       >
 14 |         <template v-for="(item, i) in items">
 15 |           <v-layout
 16 |             row
 17 |             v-if="item.heading"
 18 |             align-center
 19 |             :key="i"
 20 |           >
 21 |             <v-flex xs6>
 22 |               <v-subheader v-if="item.heading">
 23 |                 {{ item.heading }}
 24 |               </v-subheader>
 25 |             </v-flex>
 26 |             <v-flex xs6 class="text-xs-right">
 27 |               <v-btn small flat>edit</v-btn>
 28 |             </v-flex>
 29 |           </v-layout>
 30 |           <v-divider
 31 |             dark
 32 |             v-else-if="item.divider"
 33 |             class="my-3"
 34 |             :key="i"
 35 |           ></v-divider>
 36 |           <v-list-tile
 37 |             :key="i"
 38 |             v-else
 39 |             @click=""
 40 |           >
 41 |             <v-list-tile-action>
 42 |               <v-icon>{{ item.icon }}</v-icon>
 43 |             </v-list-tile-action>
 44 |             <v-list-tile-content>
 45 |               <v-list-tile-title class="grey--text">
 46 |                 {{ item.text }}
 47 |               </v-list-tile-title>
 48 |             </v-list-tile-content>
 49 |           </v-list-tile>
 50 |         </template>
 51 |       </v-list>
 52 |     </v-navigation-drawer>
 53 |     <v-toolbar color="amber" app absolute clipped-left>
 54 |       <v-toolbar-side-icon @click.native="drawer = !drawer"></v-toolbar-side-icon>
 55 |       <span class="title ml-3 mr-5">Google&nbsp;<span class="text">Keep</span></span>
 56 |       <v-text-field
 57 |         solo-inverted
 58 |         flat
 59 |         label="Search"
 60 |         prepend-icon="search"
 61 |       ></v-text-field>
 62 |       <v-spacer></v-spacer>
 63 |     </v-toolbar>
 64 |     <v-content>
 65 |       <v-container fluid fill-height class="grey lighten-4">
 66 |         <v-layout justify-center align-center>
 67 |           <v-flex shrink>
 68 |             <v-tooltip right>
 69 |               <v-btn
 70 |                 icon
 71 |                 large
 72 |                 :href="source"
 73 |                 target="_blank"
 74 |                 slot="activator"
 75 |               >
 76 |                 <v-icon large>code</v-icon>
 77 |               </v-btn>
 78 |               <span>Source</span>
 79 |             </v-tooltip>
 80 |             <v-tooltip right>
 81 |               <v-btn icon large href="https://codepen.io/johnjleider/pen/jZQNbd" target="_blank" slot="activator">
 82 |                 <v-icon large>mdi-codepen</v-icon>
 83 |               </v-btn>
 84 |               <span>Codepen</span>
 85 |             </v-tooltip>
 86 |           </v-flex>
 87 |         </v-layout>
 88 |       </v-container>
 89 |     </v-content>
 90 |   </v-app>
 91 | </template>
 92 | 
 93 | <script>
 94 |   export default {
 95 |     data: () => ({
 96 |       drawer: null,
 97 |       items: [
 98 |         { icon: 'lightbulb_outline', text: 'Notes' },
 99 |         { icon: 'touch_app', text: 'Reminders' },
100 |         { divider: true },
101 |         { heading: 'Labels' },
102 |         { icon: 'add', text: 'Create new label' },
103 |         { divider: true },
104 |         { icon: 'archive', text: 'Archive' },
105 |         { icon: 'delete', text: 'Trash' },
106 |         { divider: true },
107 |         { icon: 'settings', text: 'Settings' },
108 |         { icon: 'chat_bubble', text: 'Trash' },
109 |         { icon: 'help', text: 'Help' },
110 |         { icon: 'phonelink', text: 'App downloads' },
111 |         { icon: 'keyboard', text: 'Keyboard shortcuts' }
112 |       ]
113 |     }),
114 |     props: {
115 |       source: String
116 |     }
117 |   }
118 | </script>
119 | 
120 | <style>
121 |   #keep main .container {
122 |     height: 660px;
123 |   }
124 |   .navigation-drawer__border {
125 |     display: none;
126 |   }
127 |   .text {
128 |     font-weight: 400;
129 |   }
130 | </style>


--------------------------------------------------------------------------------
/src/pages/RealTime.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1 class="main-title">Real Time Page Here</h1>
  4 |      <template>
  5 | 	  <v-layout
  6 | 	    column
  7 | 	    justify-center
  8 | 	  >
  9 | 	    <v-subheader>Today</v-subheader>
 10 | 
 11 | 	    <v-expansion-panel popout>
 12 | 	      <v-expansion-panel-content
 13 | 	        v-for="(message, i) in messages"
 14 | 	        :key="i"
 15 | 	        hide-actions
 16 | 	      >
 17 | 	        <v-layout
 18 | 	          slot="header"
 19 | 	          align-center
 20 | 	          row
 21 | 	          spacer
 22 | 	        >
 23 | 	          <v-flex xs4 sm2 md1>
 24 | 	            <v-avatar
 25 | 	              slot="activator"
 26 | 	              size="36px"
 27 | 	            >
 28 | 	              <img
 29 | 	                v-if="message.avatar"
 30 | 	                src="https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"
 31 | 	                alt="Avatar"
 32 | 	              >
 33 | 	              <v-icon
 34 | 	                v-else
 35 | 	                :color="message.color"
 36 | 	                v-text="message.icon"
 37 | 	              ></v-icon>
 38 | 	            </v-avatar>
 39 | 	          </v-flex>
 40 | 
 41 | 	          <v-flex sm5 md3 hidden-xs-only>
 42 | 	            <strong v-html="message.name"></strong>
 43 | 	            <span
 44 | 	              v-if="message.total"
 45 | 	              class="grey--text"
 46 | 	            >
 47 | 	              &nbsp;({{ message.total }})
 48 | 	            </span>
 49 | 	          </v-flex>
 50 | 
 51 | 	          <v-flex no-wrap xs5 sm3>
 52 | 	            <v-chip
 53 | 	              v-if="message.new"
 54 | 	              :color="`${message.color} lighten-4`"
 55 | 	              class="ml-0"
 56 | 	              label
 57 | 	              small
 58 | 	            >
 59 | 	              {{ message.new }} new
 60 | 	            </v-chip>
 61 | 	            <strong v-html="message.title"></strong>
 62 | 	          </v-flex>
 63 | 
 64 | 	          <v-flex
 65 | 	            v-if="message.excerpt"
 66 | 	            class="grey--text"
 67 | 	            ellipsis
 68 | 	            hidden-sm-and-down
 69 | 	          >
 70 | 	            &mdash;
 71 | 	            {{ message.excerpt }}
 72 | 	          </v-flex>
 73 | 	        </v-layout>
 74 | 
 75 | 	        <v-card>
 76 | 	          <v-divider></v-divider>
 77 | 	          <v-card-text v-text="lorem"></v-card-text>
 78 | 	        </v-card>
 79 | 	      </v-expansion-panel-content>
 80 | 	    </v-expansion-panel>
 81 | 	  </v-layout>
 82 | 	</template>
 83 |   
 84 |   </div>
 85 | </template>
 86 | <script>
 87 |   export default {
 88 |     data: () => ({
 89 |       messages: [
 90 |         {
 91 |           avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460',
 92 |           name: 'John Leider',
 93 |           title: 'Welcome to Vuetify.js!',
 94 |           excerpt: 'Thank you for joining our community...'
 95 |         },
 96 |         {
 97 |           color: 'red',
 98 |           icon: 'people',
 99 |           name: 'Social',
100 |           new: 1,
101 |           total: 3,
102 |           title: 'Twitter'
103 |         },
104 |         {
105 |           color: 'teal',
106 |           icon: 'local_offer',
107 |           name: 'Promos',
108 |           new: 2,
109 |           total: 4,
110 |           title: 'Shop your way',
111 |           exceprt: 'New deals available, Join Today'
112 |         },
113 |         {
114 |           color: 'blue',
115 |           icon: 'local_offer',
116 |           name: 'Promos',
117 |           new: 2,
118 |           total: 4,
119 |           title: 'Shop your way',
120 |           exceprt: 'New deals available, Join Today'
121 |         },
122 |         {
123 |           color: 'orange',
124 |           icon: 'local_offer',
125 |           name: 'Promos',
126 |           new: 2,
127 |           total: 4,
128 |           title: 'Shop your way',
129 |           exceprt: 'New deals available, Join Today'
130 |         }
131 |       ],
132 |       lorem: 'Lorem ipsum dolor sit amet, at aliquam vivendum vel, everti delicatissimi cu eos. Dico iuvaret debitis mel an, et cum zril menandri. Eum in consul legimus accusam. Ea dico abhorreant duo, quo illum minimum incorrupte no, nostro voluptaria sea eu. Suas eligendi ius at, at nemore equidem est. Sed in error hendrerit, in consul constituam cum.'
133 |     })
134 |   }
135 | </script>


--------------------------------------------------------------------------------
/src/pages/Acquistion.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1 class="main-title">Acquistion Page Here</h1>
  4 | 
  5 |     <template>
  6 | 	  <v-container fluid grid-list-md>
  7 | 	    <v-data-iterator
  8 | 	      :items="items"
  9 | 	      :rows-per-page-items="rowsPerPageItems"
 10 | 	      :pagination.sync="pagination"
 11 | 	      content-tag="v-layout"
 12 | 	      row
 13 | 	      wrap
 14 | 	    >
 15 | 	      <v-flex
 16 | 	        slot="item"
 17 | 	        slot-scope="props"
 18 | 	        xs12
 19 | 	        sm6
 20 | 	        md4
 21 | 	        lg3
 22 | 	      >
 23 | 	        <v-card>
 24 | 	          <v-card-title><h4>{{ props.item.name }}</h4></v-card-title>
 25 | 	          <v-divider></v-divider>
 26 | 	          <v-list dense>
 27 | 	            <v-list-tile>
 28 | 	              <v-list-tile-content>Calories:</v-list-tile-content>
 29 | 	              <v-list-tile-content class="align-end">{{ props.item.calories }}</v-list-tile-content>
 30 | 	            </v-list-tile>
 31 | 	            <v-list-tile>
 32 | 	              <v-list-tile-content>Fat:</v-list-tile-content>
 33 | 	              <v-list-tile-content class="align-end">{{ props.item.fat }}</v-list-tile-content>
 34 | 	            </v-list-tile>
 35 | 	            <v-list-tile>
 36 | 	              <v-list-tile-content>Carbs:</v-list-tile-content>
 37 | 	              <v-list-tile-content class="align-end">{{ props.item.carbs }}</v-list-tile-content>
 38 | 	            </v-list-tile>
 39 | 	            <v-list-tile>
 40 | 	              <v-list-tile-content>Protein:</v-list-tile-content>
 41 | 	              <v-list-tile-content class="align-end">{{ props.item.protein }}</v-list-tile-content>
 42 | 	            </v-list-tile>
 43 | 	            <v-list-tile>
 44 | 	              <v-list-tile-content>Sodium:</v-list-tile-content>
 45 | 	              <v-list-tile-content class="align-end">{{ props.item.sodium }}</v-list-tile-content>
 46 | 	            </v-list-tile>
 47 | 	            <v-list-tile>
 48 | 	              <v-list-tile-content>Calcium:</v-list-tile-content>
 49 | 	              <v-list-tile-content class="align-end">{{ props.item.calcium }}</v-list-tile-content>
 50 | 	            </v-list-tile>
 51 | 	            <v-list-tile>
 52 | 	              <v-list-tile-content>Iron:</v-list-tile-content>
 53 | 	              <v-list-tile-content class="align-end">{{ props.item.iron }}</v-list-tile-content>
 54 | 	            </v-list-tile>
 55 | 	          </v-list>
 56 | 	        </v-card>
 57 | 	      </v-flex>
 58 | 	    </v-data-iterator>
 59 | 	  </v-container>
 60 | 	</template>
 61 |   </div>
 62 | 
 63 | </template>
 64 | 
 65 | 
 66 | <script>
 67 |   export default {
 68 |     data: () => ({
 69 |       rowsPerPageItems: [4, 8, 12],
 70 |       pagination: {
 71 |         rowsPerPage: 4
 72 |       },
 73 |       items: [
 74 |         {
 75 |           value: false,
 76 |           name: 'Frozen Yogurt',
 77 |           calories: 159,
 78 |           fat: 6.0,
 79 |           carbs: 24,
 80 |           protein: 4.0,
 81 |           sodium: 87,
 82 |           calcium: '14%',
 83 |           iron: '1%'
 84 |         },
 85 |         {
 86 |           value: false,
 87 |           name: 'Ice cream sandwich',
 88 |           calories: 237,
 89 |           fat: 9.0,
 90 |           carbs: 37,
 91 |           protein: 4.3,
 92 |           sodium: 129,
 93 |           calcium: '8%',
 94 |           iron: '1%'
 95 |         },
 96 |         {
 97 |           value: false,
 98 |           name: 'Eclair',
 99 |           calories: 262,
100 |           fat: 16.0,
101 |           carbs: 23,
102 |           protein: 6.0,
103 |           sodium: 337,
104 |           calcium: '6%',
105 |           iron: '7%'
106 |         },
107 |         {
108 |           value: false,
109 |           name: 'Cupcake',
110 |           calories: 305,
111 |           fat: 3.7,
112 |           carbs: 67,
113 |           protein: 4.3,
114 |           sodium: 413,
115 |           calcium: '3%',
116 |           iron: '8%'
117 |         },
118 |         {
119 |           value: false,
120 |           name: 'Gingerbread',
121 |           calories: 356,
122 |           fat: 16.0,
123 |           carbs: 49,
124 |           protein: 3.9,
125 |           sodium: 327,
126 |           calcium: '7%',
127 |           iron: '16%'
128 |         },
129 |         {
130 |           value: false,
131 |           name: 'Jelly bean',
132 |           calories: 375,
133 |           fat: 0.0,
134 |           carbs: 94,
135 |           protein: 0.0,
136 |           sodium: 50,
137 |           calcium: '0%',
138 |           iron: '0%'
139 |         },
140 |         {
141 |           value: false,
142 |           name: 'Lollipop',
143 |           calories: 392,
144 |           fat: 0.2,
145 |           carbs: 98,
146 |           protein: 0,
147 |           sodium: 38,
148 |           calcium: '0%',
149 |           iron: '2%'
150 |         },
151 |         {
152 |           value: false,
153 |           name: 'Honeycomb',
154 |           calories: 408,
155 |           fat: 3.2,
156 |           carbs: 87,
157 |           protein: 6.5,
158 |           sodium: 562,
159 |           calcium: '0%',
160 |           iron: '45%'
161 |         },
162 |         {
163 |           value: false,
164 |           name: 'Donut',
165 |           calories: 452,
166 |           fat: 25.0,
167 |           carbs: 51,
168 |           protein: 4.9,
169 |           sodium: 326,
170 |           calcium: '2%',
171 |           iron: '22%'
172 |         },
173 |         {
174 |           value: false,
175 |           name: 'KitKat',
176 |           calories: 518,
177 |           fat: 26.0,
178 |           carbs: 65,
179 |           protein: 7,
180 |           sodium: 54,
181 |           calcium: '12%',
182 |           iron: '6%'
183 |         }
184 |       ]
185 |     })
186 |   }
187 | </script>


--------------------------------------------------------------------------------
/src/pages/Discover.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="discover">
  3 |   	<v-layout row>
  4 | 	  <v-flex md12 lg10 offset-lg1>
  5 | 	  	<!-- row 1 -->
  6 | 	  	 <v-layout row>
  7 | 	       <v-flex xs12 xl12 pb-0>
  8 | 	  	   	  <v-card-actions class="pb-0">
  9 | 		    	<h1 class="main-title mb-3">Get more out of Google Analytics</h1>
 10 | 		    	<v-spacer></v-spacer>
 11 | 		    	<v-btn flat color="blue">View More</v-btn>
 12 | 		      </v-card-actions>
 13 | 		    </v-flex>
 14 | 	  	 </v-layout>
 15 | 		  <v-layout row>
 16 | 		    <v-flex 
 17 | 		     xs12 
 18 | 		     sm4
 19 | 		     v-for="card in cards"
 20 | 			 :key="card.title"
 21 | 		    >
 22 | 		      <v-card>
 23 | 		        <v-card-media>
 24 | 			      	<img :src="card.image">
 25 | 			    </v-card-media>
 26 | 
 27 | 		        <v-card-title primary-title>
 28 | 		          <div>
 29 | 		            <h3 class="headline mb-1">{{card.title}}</h3>
 30 | 		            <div class="grey--text text--lighten-1 font-weight-light"> {{text}} </div>
 31 | 		          </div>
 32 | 		        </v-card-title>
 33 | 
 34 | 		        <v-card-actions>
 35 | 		          <v-btn flat color="blue">{{card.btn}}</v-btn>
 36 | 		        </v-card-actions>
 37 | 		      </v-card>
 38 | 		    </v-flex>
 39 | 
 40 | 		  </v-layout>
 41 | 
 42 | 
 43 | 
 44 | 		  <!-- row 2 -->
 45 | 		  <v-layout row>
 46 | 	       <v-flex xs12 xl12 pb-0>
 47 | 	  	   	  <v-card-actions class="pb-0">
 48 | 		    	<h1 class="main-title mb-3">Become an Expert</h1>
 49 | 		    	<v-spacer></v-spacer>
 50 | 		    	<v-btn flat color="blue">View More</v-btn>
 51 | 		      </v-card-actions>
 52 | 		    </v-flex>
 53 | 	  	 </v-layout>
 54 | 		  <v-layout row>
 55 | 		    <v-flex 
 56 | 		     xs12 
 57 | 		     sm4
 58 | 		     v-for="card in cards2"
 59 | 			 :key="card.title"
 60 | 		    >
 61 | 		      <v-card>
 62 | 		        <v-card-media>
 63 | 			      	<img :src="card.image">
 64 | 			    </v-card-media>
 65 | 
 66 | 		        <v-card-title primary-title>
 67 | 		          <div>
 68 | 		            <h3 class="headline mb-1">{{card.title}}</h3>
 69 | 		            <div class="grey--text text--lighten-1 font-weight-light"> {{text}} </div>
 70 | 		          </div>
 71 | 		        </v-card-title>
 72 | 
 73 | 		        <v-card-actions>
 74 | 		          <v-btn flat color="blue">{{card.btn}}</v-btn>
 75 | 		        </v-card-actions>
 76 | 		      </v-card>
 77 | 		    </v-flex>
 78 | 
 79 | 		  </v-layout>
 80 | 
 81 | 
 82 | 
 83 | 		  <!-- row 3 -->
 84 | 		  <v-layout row>
 85 | 	       <v-flex xs12 xl12 pb-0>
 86 | 	  	   	  <v-card-actions class="pb-0">
 87 | 		    	<h1 class="main-title mb-3">Expand your measurement strategy</h1>
 88 | 		    	<v-spacer></v-spacer>
 89 | 		    	<v-btn flat color="blue">View More</v-btn>
 90 | 		      </v-card-actions>
 91 | 		    </v-flex>
 92 | 	  	 </v-layout>
 93 | 		  <v-layout row>
 94 | 		    <v-flex 
 95 | 		     xs12 
 96 | 		     sm4
 97 | 		     v-for="card in cards3"
 98 | 			 :key="card.title"
 99 | 		    >
100 | 		      <v-card>
101 | 		        <v-card-media>
102 | 			      	<img :src="card.image">
103 | 			    </v-card-media>
104 | 
105 | 		        <v-card-title primary-title>
106 | 		          <div>
107 | 		            <h3 class="headline mb-1">{{card.title}}</h3>
108 | 		            <div class="grey--text text--lighten-1 font-weight-light"> {{text}} </div>
109 | 		          </div>
110 | 		        </v-card-title>
111 | 
112 | 		        <v-card-actions>
113 | 		          <v-btn flat color="blue">{{card.btn}}</v-btn>
114 | 		        </v-card-actions>
115 | 		      </v-card>
116 | 		    </v-flex>
117 | 		  </v-layout>
118 | 
119 | 
120 | 		  <!-- row 4 -->
121 | 		  <v-layout row>
122 | 	       <v-flex xs12 xl12 pb-0>
123 | 	  	   	  <v-card-actions class="pb-0">
124 | 		    	<h1 class="main-title mb-3">Tools for developers</h1>
125 | 		    	<v-spacer></v-spacer>
126 | 		    	<v-btn flat color="blue">View More</v-btn>
127 | 		      </v-card-actions>
128 | 		    </v-flex>
129 | 	  	 </v-layout>
130 | 		  <v-layout row>
131 | 		    <v-flex 
132 | 		     xs12 
133 | 		     sm4
134 | 		     v-for="card in cards4"
135 | 			 :key="card.title"
136 | 		    >
137 | 		      <v-card>
138 | 		        <v-card-media>
139 | 			      	<img :src="card.image">
140 | 			    </v-card-media>
141 | 
142 | 		        <v-card-title primary-title>
143 | 		          <div>
144 | 		            <h3 class="headline mb-1">{{card.title}}</h3>
145 | 		            <div class="grey--text text--lighten-1 font-weight-light"> {{text}} </div>
146 | 		          </div>
147 | 		        </v-card-title>
148 | 
149 | 		        <v-card-actions>
150 | 		          <v-btn flat color="blue">{{card.btn}}</v-btn>
151 | 		        </v-card-actions>
152 | 		      </v-card>
153 | 		    </v-flex>
154 | 
155 | 		  </v-layout>
156 | 		 </v-flex>
157 | 	</v-layout>
158 |   </div>
159 | </template>
160 | 
161 | <script>
162 | export default {
163 |   name: 'Discover',
164 |   data () {
165 |     return {
166 |     	rows:[{no:'1'},{no:'2'},{no:'3'}],
167 |     	text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.',
168 |     	cards: [
169 | 	        { image: require('../assets/ga_app.png'), title: 'Google Analytics App', btn:'GO'},
170 | 	        { image: require('../assets/ga_demo.png'), title: 'Google Analytics Demo', btn:'GO'},
171 | 	        { image: require('../assets/custom_alerts.png'), title: 'Custom Alerts', btn:'GO'}
172 | 	      ],
173 | 	    cards2: [
174 | 	        { image: require('../assets/academy.png'), title: 'Analytics Academy', btn:'GO'},
175 | 	        { image: require('../assets/help_center.png'), title: 'Analytics Help Center', btn:'GO'},
176 | 	        { image: require('../assets/blog.png'), title: 'Official Analytics Blog', btn:'GO'}
177 | 	      ],
178 | 	    cards3: [
179 | 	        { image: require('../assets/attribution.png'), title: 'Attribution', btn:'GO'},
180 | 	        { image: require('../assets/data_studio.png'), title: 'Data Studio', btn:'GO'},
181 | 	        { image: require('../assets/optimize.png'), title: 'Optimize', btn:'GO'}
182 | 	      ],
183 | 	    cards4: [
184 | 	        { image: require('../assets/cloud.png'), title: 'Google Cloud Platform', btn:'GO'},
185 | 	        { image: require('../assets/reporting_api.png'), title: 'Reporting API', btn:'GO'},
186 | 	        { image: require('../assets/embed_api.png'), title: 'Embed API', btn:'GO'}
187 | 	      ]
188 |     }
189 |   }
190 | }
191 | </script>


--------------------------------------------------------------------------------
/src/pages/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<v-layout row>
  3 | 	  <v-flex lg12 xl10 offset-xl1>
  4 | 	  	<v-layout>
  5 | 	  		<v-flex xs12 lg7>
  6 | 	    		<h1 class="main-title">Vue Analytics Home</h1>
  7 | 	    		<v-card>
  8 | 				  <div class="tabs-s1">
  9 | 				    <v-tabs
 10 | 				      v-model="active"
 11 | 				      color="white"
 12 | 				      light
 13 | 				      icons-and-text
 14 | 				      slider-color="blue lighten-1"
 15 | 				    >
 16 | 				      <v-tab
 17 | 				        v-for="tab in tabs"
 18 | 				        :key="tab.title"
 19 | 
 20 | 				      >
 21 | 				      	<h3 class="tabs__item__title">{{tab.title}}</h3>
 22 | 				        
 23 | 				        <p class="tabs__item__sub-title">{{tab.subtitle}}</p>
 24 | 				        <span class="tabs__item__conversion-rate"><strong>&darr;</strong> {{tab.percent}}</span>
 25 | 				      </v-tab>
 26 | 				      <v-tab-item
 27 | 				        v-for="tab in tabs"
 28 | 				        :key="tab.url"
 29 | 				      >
 30 | 				        <v-card flat>
 31 | 				          <v-card-text>
 32 | 				          	<img :src="tab.url" style="max-width:600px;">
 33 | 				          </v-card-text>
 34 | 				        </v-card>
 35 | 				      </v-tab-item>
 36 | 				    </v-tabs>
 37 | 				  </div>
 38 | 				  <v-card-actions class="pt-0">
 39 | 				  	<v-select
 40 | 			          :items="items"
 41 | 			          label="Last 7 days"
 42 | 			          single-line
 43 | 			        ></v-select>
 44 | 				  	<v-spacer></v-spacer>
 45 | 			        <v-btn flat >Audience Overview
 46 | 			        	<v-icon dark>keyboard_arrow_right</v-icon>
 47 | 			        </v-btn>
 48 | 			      </v-card-actions>
 49 | 				</v-card>
 50 | 	  		</v-flex>
 51 | 	  		<v-flex xs12 lg5>
 52 | 	    		<h1 class="main-title">Intelligence</h1>
 53 | 	    		<v-card color="blue darken-1" class="white--text current--status">
 54 | 	              <v-container fluid grid-list-lg>
 55 | 	                <v-layout row>
 56 | 	                  <v-flex xs12>
 57 | 	                    <div class="statics">
 58 | 	                      <div class="body-1">Active Users right now</div>
 59 | 	                      <div class="lg-text">8</div>
 60 | 	                    </div>
 61 | 	                    <div class="curr--users">
 62 | 	                      <div class="caption custom-caption">Page views per minute
 63 | 	                      </div>
 64 | 	                      <div class="d-flex caption custom-caption">No data avalible
 65 | 	                      </div>
 66 | 	                    </div>
 67 | 	                    <div class="time-wise">
 68 | 	                      <div class="d-flex caption custom-caption">Top active pages
 69 | 	                      	<v-spacer></v-spacer>
 70 | 	                      	<span class="text-xs-right">Active Users</span>
 71 | 	                      </div>
 72 | 	                      <div class="d-flex body-1 custom-caption">/index.html
 73 | 	                      	<v-spacer></v-spacer>
 74 | 	                      	<span class="text-xs-right">4</span>
 75 | 	                      </div>
 76 | 	                      <div class="d-flex body-1 custom-caption">/about.html
 77 | 	                      	<v-spacer></v-spacer>
 78 | 	                      	<span class="text-xs-right">2</span>
 79 | 	                      </div>
 80 | 	                      <div class="d-flex body-1 custom-caption">/contact.html
 81 | 	                      	<v-spacer></v-spacer>
 82 | 	                      	<span class="text-xs-right">1</span>
 83 | 	                      </div>
 84 | 	                      <div class="d-flex body-1 custom-caption">/projects.html
 85 | 	                      	<v-spacer></v-spacer>
 86 | 	                      	<span class="text-xs-right">1</span>
 87 | 	                      </div>
 88 | 
 89 | 	                    </div>
 90 | 
 91 | 
 92 | 	                  </v-flex>
 93 | 	                </v-layout>
 94 | 	              </v-container>
 95 | 	              <v-card-actions >
 96 | 			        <v-spacer></v-spacer>
 97 | 			        <v-btn flat color="white">Real-Time Reports
 98 | 			        	<v-icon dark>keyboard_arrow_right</v-icon>
 99 | 			        </v-btn>
100 | 			      </v-card-actions>
101 | 	            </v-card>
102 | 	  		</v-flex>
103 | 	  	</v-layout>
104 | 	  </v-flex>
105 | 	</v-layout>
106 | </template>
107 | 
108 | <script>
109 | export default {
110 | 	name: 'Home',
111 | 	data () {
112 | 		return {
113 | 			tabs:[
114 | 				{title: 'Users', subtitle:'20',percent:'12.45%',url:require('../assets/users-report.png')},
115 | 				{title: 'Sessions', subtitle:'14',percent:'33.24%',url:require('../assets/sessions-report.png')},
116 | 				{title: 'Bounce Rate', subtitle:'44%',percent:'12.00%',url:require('../assets/bounce-report.png')},
117 | 				{title: 'Session Duration', subtitle:'3m 28s',percent:'63.24%',url:require('../assets/duration-report.png')}
118 | 			],
119 | 			active: null,
120 | 		    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
121 | 		    items: ['Last 7 days','Last 28 days', 'Last 90 days', 'Last 12 months']
122 | 		}
123 | 	}
124 | }
125 | </script>
126 | <style>
127 | 	.tabs-s1 .tabs__container--icons-and-text{
128 | 		height: 100px;
129 | 	}
130 | 	.tabs-s1 .tabs__slider-wrapper{
131 | 		top:0;
132 | 	}
133 | 	.tabs-s1 .tabs__slider{
134 | 		height: 4px;
135 | 	}
136 | 	.tabs-s1 .tabs__item{
137 | 		display: block;
138 | 		padding-top:20px;
139 | 		text-align: left !important;
140 | 	}
141 | 	.tabs-s1 .tabs__item__title{
142 | 	    font: 400 14px/10px 'Roboto',sans-serif;
143 | 	    letter-spacing: 0;
144 | 	    text-transform: capitalize;
145 | 
146 | 	    margin-bottom: 15px;
147 | 	}
148 | 	.tabs-s1 .tabs__item__sub-title{
149 | 		color: rgba(0,0,0,0.87);
150 | 	    font: 300 26px/20px 'Roboto',sans-serif;
151 | 	    letter-spacing: 0;
152 | 	    margin-bottom: 10px;
153 | 	    text-transform: lowercase;
154 | 	}
155 | 	.tabs-s1 .tabs__item__conversion-rate{
156 | 		color: #db4437;
157 | 	    font: 400 12px/10px 'Roboto',sans-serif;
158 | 	    letter-spacing: .01px;
159 | 	}
160 | 	.current--status .lg-text{
161 | 		color: #fff;
162 | 	    font: 300 50px 'Roboto',sans-serif;
163 | 	    letter-spacing: 0;
164 | 	    margin-top: 13px;
165 | 	    margin-bottom: 30px;
166 | 	}
167 | 	.current--status .custom-caption{
168 | 		border-bottom:1px solid #aaa;
169 | 		color: #eee;
170 | 		font-size: 12px;
171 | 		font-weight: 400;
172 | 		padding-bottom: 8px;
173 | 		padding-top: 8px;
174 | 	}
175 | 	.current--status .curr--users{
176 | 		height: 120px;
177 | 	}
178 | </style>


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-navigation-drawer
  4 |       fixed
  5 |       :clipped="$vuetify.breakpoint.lgAndUp"
  6 |       app
  7 |       v-model="drawer"
  8 |     >
  9 |       <v-list dense>
 10 |       <template v-for="item in items">
 11 |         <v-layout
 12 |         row
 13 |         v-if="item.heading"
 14 |         align-center
 15 |         :key="item.heading"
 16 |         >
 17 |           <v-flex xs6>
 18 |             <v-subheader v-if="item.heading">
 19 |             {{ item.heading }}
 20 |             </v-subheader>
 21 |           </v-flex>
 22 |         </v-layout>
 23 | 
 24 |         <v-layout 
 25 |           row
 26 |           v-else-if="item.search"
 27 |           align-center
 28 |           :key="item.search"
 29 |         >
 30 |           <v-text-field
 31 |             flat
 32 |             solo
 33 |             prepend-icon="search"
 34 |             :placeholder="item.search"
 35 |             class="input-search"
 36 |           ></v-text-field>
 37 |         </v-layout>
 38 | 
 39 |         <v-list-group
 40 |         v-else-if="item.children"
 41 |         v-model="item.model"
 42 |         :key="item.text"
 43 |         :prepend-icon="item.model ? item.icon : item['icon-alt']"
 44 |         append-icon=""
 45 |         >
 46 |           <v-list-tile slot="activator">
 47 |             <v-list-tile-content>
 48 |             <v-list-tile-title >
 49 |               {{ item.text }}
 50 |             </v-list-tile-title>
 51 |             </v-list-tile-content>
 52 |           </v-list-tile>
 53 |           <v-list-tile
 54 |             v-for="(child, i) in item.children"
 55 |             :key="i"
 56 |             @click=""
 57 |           >
 58 |             <v-list-tile-action v-if="child.icon">
 59 |               <v-icon v-bind:class="{'ml-5':child.icon,'mr-3':child.icon}">{{ child.icon }}</v-icon>
 60 |             </v-list-tile-action>
 61 |             <v-list-tile-content>
 62 |               <v-list-tile-title 
 63 |                 v-bind:class="{'ml-5':!child.icon}"
 64 |               >
 65 |                 {{ child.text }}
 66 |               </v-list-tile-title>
 67 |             </v-list-tile-content>
 68 |           </v-list-tile>
 69 |         </v-list-group>
 70 |         <v-list-tile v-else router :to="item.path" @click="" :key="item.text">
 71 |           <v-list-tile-action>
 72 |             <v-icon>{{ item.icon }}</v-icon>
 73 |           </v-list-tile-action>
 74 |           <v-list-tile-content>
 75 |             <v-list-tile-title>
 76 |             {{ item.text }}
 77 |             </v-list-tile-title>
 78 |           </v-list-tile-content>
 79 |         </v-list-tile>
 80 |       </template>
 81 |       </v-list>
 82 |     </v-navigation-drawer>
 83 | 
 84 |     <v-toolbar
 85 |       color="primary"
 86 |       dark
 87 |       flat
 88 |       app
 89 |       :clipped-left="$vuetify.breakpoint.lgAndUp"
 90 |       fixed
 91 |       class="border-bottom"
 92 |     >
 93 |       <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
 94 |         <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
 95 |         <span class="hidden-sm-and-down">Vue Analytics</span>
 96 |       </v-toolbar-title>
 97 |       <v-spacer></v-spacer>
 98 |       <v-btn icon>
 99 |         <v-badge overlap color="orange">
100 |           <span slot="badge">2</span>
101 |           <v-icon>notifications</v-icon>
102 |         </v-badge>
103 |       </v-btn>
104 |       <!-- <v-btn icon>
105 |         <v-icon>notifications</v-icon>
106 |       </v-btn> -->
107 |       <v-btn icon>
108 |         <v-icon>more_vert</v-icon>
109 |       </v-btn>
110 |       <v-btn icon large>
111 |       <v-avatar size="32px" tile>
112 |         <img
113 |         src="../assets/avatar.png"
114 |         alt="Avatar"
115 |         >
116 |       </v-avatar>
117 |       </v-btn>
118 |     </v-toolbar>
119 |   </div>
120 | </template>
121 | 
122 | <script>
123 |   export default {
124 |     data: () => ({
125 |       drawer: null,
126 |       items: [
127 |         { search: 'Search reports and help' },
128 |         { icon: 'home', text: 'Home', path:'/home'},
129 |         { 
130 |           icon: 'playlist_add', 
131 |           'icon-alt': 'playlist_add',
132 |           text: 'Customization',
133 |           model: false,
134 |           children: [
135 |             { text: 'Dashboard'},
136 |             { text: 'Custom Reports' },
137 |             { text: 'Saved Reports' },
138 |             { text: 'Custom Alerts' }
139 |           ]
140 |         },
141 |         { heading: 'Reports' },
142 |         { icon: 'access_time', text: 'Real-Time', path:'/real-time'},
143 |         { icon: 'person', text: 'Audience', path:'/audience'},
144 |         { icon: 'device_hub', text: 'Acquistion', path:'/acquistion'},
145 |         { icon: 'view_quilt', text: 'Behaviour', path:'/behaviour'},
146 |         { icon: 'assistant_photo', text: 'Conversions', path:'/conversions'},
147 |         { heading: 'Settings' },
148 |         { icon: 'lightbulb_outline', text: 'Discover', path:'/'},
149 |         {
150 |           icon: 'keyboard_arrow_up',
151 |           'icon-alt': 'keyboard_arrow_down',
152 |           text: 'More',
153 |           model: false,
154 |           children: [
155 |           {icon: 'content_copy', text: 'Import' },
156 |           {icon: 'publish', text: 'Export' },
157 |           {icon: 'print', text: 'Print' },
158 |           {icon: 'undo', text: 'Undo changes' },
159 |           {icon: 'help_outline', text: 'Help' }
160 |           ]
161 |         }
162 |       ]
163 |     })
164 |   }
165 | </script>
166 | 
167 | <style>
168 |   .navigation-drawer .list__tile__action, .list__group__header .list__group__header__prepend-icon{
169 |     min-width: 45px;
170 |   }
171 |   .list__group__header .list__group__header__prepend-icon{
172 |     padding-right: 0px;
173 |   }
174 |   .navigation-drawer .list__tile__title{
175 |     text-transform: uppercase;
176 |     font-size: 13px;
177 |     color: rgba(0,0,0,0.54);
178 |     font-weight: 500;
179 |     letter-spacing: -0.06px;
180 |   }
181 |   .navigation-drawer .list__group__items .list__tile__title{
182 |     text-transform: capitalize;
183 |     font-size: 13px;
184 |     font-weight: 400;
185 |     color: rgba(0,0,0,0.54);
186 |   }
187 |   .input-search input[type="text"]{
188 |     font-size: 13px;
189 |   }
190 |   .input-search.input-group--solo .input-group__input{
191 |     padding-top:12px;
192 |     padding-bottom: 12px;
193 |     border-bottom: 1px solid rgba(0,0,0,.12);
194 |   }
195 |   .input-search .input-group__prepend-icon{
196 |     color: #777 !important;
197 |     font-size: 22px;
198 |   }
199 |   .input-search .input-group__prepend-icon:hover{
200 |     cursor: pointer;
201 |   }
202 |   .input-search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
203 |     color: #777;
204 |   }
205 |   .input-search input::-moz-placeholder { /* Firefox 19+ */
206 |     color: #777;
207 |   }
208 |   .input-search input:-ms-input-placeholder { /* IE 10+ */
209 |     color: #777;
210 |   }
211 | </style>


--------------------------------------------------------------------------------
/src/components/GoogleContacts.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app id="inspire">
  3 |     <v-navigation-drawer
  4 |       fixed
  5 |       :clipped="$vuetify.breakpoint.lgAndUp"
  6 |       app
  7 |       v-model="drawer"
  8 |     >
  9 |       <v-list dense>
 10 |         <template v-for="item in items">
 11 |           <v-layout
 12 |             row
 13 |             v-if="item.heading"
 14 |             align-center
 15 |             :key="item.heading"
 16 |           >
 17 |             <v-flex xs6>
 18 |               <v-subheader v-if="item.heading">
 19 |                 {{ item.heading }}
 20 |               </v-subheader>
 21 |             </v-flex>
 22 |             <v-flex xs6 class="text-xs-center">
 23 |               <a href="#!" class="body-2 black--text">EDIT</a>
 24 |             </v-flex>
 25 |           </v-layout>
 26 |           <v-list-group
 27 |             v-else-if="item.children"
 28 |             v-model="item.model"
 29 |             :key="item.text"
 30 |             :prepend-icon="item.model ? item.icon : item['icon-alt']"
 31 |             append-icon=""
 32 |           >
 33 |             <v-list-tile slot="activator">
 34 |               <v-list-tile-content>
 35 |                 <v-list-tile-title>
 36 |                   {{ item.text }}
 37 |                 </v-list-tile-title>
 38 |               </v-list-tile-content>
 39 |             </v-list-tile>
 40 |             <v-list-tile
 41 |               v-for="(child, i) in item.children"
 42 |               :key="i"
 43 |               @click=""
 44 |             >
 45 |               <v-list-tile-action v-if="child.icon">
 46 |                 <v-icon>{{ child.icon }}</v-icon>
 47 |               </v-list-tile-action>
 48 |               <v-list-tile-content>
 49 |                 <v-list-tile-title>
 50 |                   {{ child.text }}
 51 |                 </v-list-tile-title>
 52 |               </v-list-tile-content>
 53 |             </v-list-tile>
 54 |           </v-list-group>
 55 |           <v-list-tile v-else @click="" :key="item.text">
 56 |             <v-list-tile-action>
 57 |               <v-icon>{{ item.icon }}</v-icon>
 58 |             </v-list-tile-action>
 59 |             <v-list-tile-content>
 60 |               <v-list-tile-title>
 61 |                 {{ item.text }}
 62 |               </v-list-tile-title>
 63 |             </v-list-tile-content>
 64 |           </v-list-tile>
 65 |         </template>
 66 |       </v-list>
 67 |     </v-navigation-drawer>
 68 |     <v-toolbar
 69 |       color="blue darken-3"
 70 |       dark
 71 |       app
 72 |       :clipped-left="$vuetify.breakpoint.lgAndUp"
 73 |       fixed
 74 |     >
 75 |       <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
 76 |         <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
 77 |         <span class="hidden-sm-and-down">Google Contacts</span>
 78 |       </v-toolbar-title>
 79 |       <v-text-field
 80 |         flat
 81 |         solo-inverted
 82 |         prepend-icon="search"
 83 |         label="Search"
 84 |         class="hidden-sm-and-down"
 85 |       ></v-text-field>
 86 |       <v-spacer></v-spacer>
 87 |       <v-btn icon>
 88 |         <v-icon>apps</v-icon>
 89 |       </v-btn>
 90 |       <v-btn icon>
 91 |         <v-icon>notifications</v-icon>
 92 |       </v-btn>
 93 |       <v-btn icon large>
 94 |         <v-avatar size="32px" tile>
 95 |           <img
 96 |             src="https://vuetifyjs.com/static/doc-images/logo.svg"
 97 |             alt="Vuetify"
 98 |           >
 99 |         </v-avatar>
100 |       </v-btn>
101 |     </v-toolbar>
102 |     <v-content>
103 |       <v-container fluid fill-height>
104 |         <v-layout justify-center align-center>
105 |           <v-tooltip right>
106 |             <v-btn
107 |               icon
108 |               large
109 |               :href="source"
110 |               target="_blank"
111 |               slot="activator"
112 |             >
113 |               <v-icon large>code</v-icon>
114 |             </v-btn>
115 |             <span>Source</span>
116 |           </v-tooltip>
117 |           <v-tooltip right>
118 |             <v-btn icon large href="https://codepen.io/johnjleider/pen/EQOYVV" target="_blank" slot="activator">
119 |               <v-icon large>mdi-codepen</v-icon>
120 |             </v-btn>
121 |             <span>Codepen</span>
122 |           </v-tooltip>
123 |         </v-layout>
124 |       </v-container>
125 |     </v-content>
126 |     <v-btn
127 |       fab
128 |       bottom
129 |       right
130 |       color="pink"
131 |       dark
132 |       fixed
133 |       @click.stop="dialog = !dialog"
134 |     >
135 |       <v-icon>add</v-icon>
136 |     </v-btn>
137 |     <v-dialog v-model="dialog" width="800px">
138 |       <v-card>
139 |         <v-card-title
140 |           class="grey lighten-4 py-4 title"
141 |         >
142 |           Create contact
143 |         </v-card-title>
144 |         <v-container grid-list-sm class="pa-4">
145 |           <v-layout row wrap>
146 |             <v-flex xs12 align-center justify-space-between>
147 |               <v-layout align-center>
148 |                 <v-avatar size="40px" class="mr-3">
149 |                   <img
150 |                     src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
151 |                     alt=""
152 |                   >
153 |                 </v-avatar>
154 |                 <v-text-field
155 |                   placeholder="Name"
156 |                 ></v-text-field>
157 |               </v-layout>
158 |             </v-flex>
159 |             <v-flex xs6>
160 |               <v-text-field
161 |                 prepend-icon="business"
162 |                 placeholder="Company"
163 |               ></v-text-field>
164 |             </v-flex>
165 |             <v-flex xs6>
166 |               <v-text-field
167 |                 placeholder="Job title"
168 |               ></v-text-field>
169 |             </v-flex>
170 |             <v-flex xs12>
171 |               <v-text-field
172 |                 prepend-icon="mail"
173 |                 placeholder="Email"
174 |               ></v-text-field>
175 |             </v-flex>
176 |             <v-flex xs12>
177 |               <v-text-field
178 |                 type="tel"
179 |                 prepend-icon="phone"
180 |                 placeholder="(000) 000 - 0000"
181 |                 mask="phone"
182 |               ></v-text-field>
183 |             </v-flex>
184 |             <v-flex xs12>
185 |               <v-text-field
186 |                 prepend-icon="notes"
187 |                 placeholder="Notes"
188 |               ></v-text-field>
189 |             </v-flex>
190 |           </v-layout>
191 |         </v-container>
192 |         <v-card-actions>
193 |           <v-btn flat color="primary">More</v-btn>
194 |           <v-spacer></v-spacer>
195 |           <v-btn flat color="primary" @click="dialog = false">Cancel</v-btn>
196 |           <v-btn flat @click="dialog = false">Save</v-btn>
197 |         </v-card-actions>
198 |       </v-card>
199 |     </v-dialog>
200 |   </v-app>
201 | </template>
202 | 
203 | <script>
204 |   export default {
205 |     data: () => ({
206 |       dialog: false,
207 |       drawer: null,
208 |       items: [
209 |         { icon: 'contacts', text: 'Contacts' },
210 |         { icon: 'history', text: 'Frequently contacted' },
211 |         { icon: 'content_copy', text: 'Duplicates' },
212 |         {
213 |           icon: 'keyboard_arrow_up',
214 |           'icon-alt': 'keyboard_arrow_down',
215 |           text: 'Labels',
216 |           model: true,
217 |           children: [
218 |             { icon: 'add', text: 'Create label' }
219 |           ]
220 |         },
221 |         {
222 |           icon: 'keyboard_arrow_up',
223 |           'icon-alt': 'keyboard_arrow_down',
224 |           text: 'More',
225 |           model: false,
226 |           children: [
227 |             { text: 'Import' },
228 |             { text: 'Export' },
229 |             { text: 'Print' },
230 |             { text: 'Undo changes' },
231 |             { text: 'Other contacts' }
232 |           ]
233 |         },
234 |         { icon: 'settings', text: 'Settings' },
235 |         { icon: 'chat_bubble', text: 'Send feedback' },
236 |         { icon: 'help', text: 'Help' },
237 |         { icon: 'phonelink', text: 'App downloads' },
238 |         { icon: 'keyboard', text: 'Go to the old version' }
239 |       ]
240 |     }),
241 |     props: {
242 |       source: String
243 |     }
244 |   }
245 | </script>


--------------------------------------------------------------------------------