device-epd/app/src/App.vue

<template>
    <v-app style="background: #e2e2e2">
		<template v-if="isLoading">
            <v-overlay :absolute="true" :value="true">
                <v-progress-circular indeterminate size="64"></v-progress-circular>
            </v-overlay>
        </template>

		<template v-else>
			<v-navigation-drawer
				v-model="drawer"
				app
			>
				<!-- https://cdn.vuetifyjs.com/images/parallax/material.jpg -->
				<v-img :aspect-ratio="16/9" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAoAAAAGACAIAAACyR0TpAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nOzdf1gcV70/8DXb7Wa72Wy3BJFQSimlFJFGRKQUEVOKiDQipYRyubmURm6MEbmRhxsp8uXBNOZGTFPk8sRcHi43N0WMyMUY04gp0kiRIlKkSClSSpFukZDNdrPZbjebyXz/GB2ns79mdmd3Zpf36x92l5lzPrNnzpydH+ccmQwAAAAAAAAAAAAAwC8+QpKk83985CNc1qdW57iwIAlyzNG77fJlc5g5OqbgKmXv1vIuDPd5eUzTTWqiJ8g3Lz/9CwCAu4/4eDQR9mBEH4JdJehxAR8D83pzmCs6JuKq5fNuLe/CcJ+XxzTdRO51gm5SEGq/4vJzhNevIq9/xAAAsGzwcf2PfOQjgre+Xi8gFlZrwWzkmP919TmvtbwLw31eHtN0xCp3L4JkreJ1gnSyjgu7+Q7dpOxxLV6FAgDgirsGmD6okQyOCwh1GHLflvvjWreb+HltmpvI3bR83q3lXRhcfic53V6OP7BcXVJ23GFk3LbL9+J2n5er7fLHjxgAAKf+1gA7bY2cthaiXILz5cqwq58OMtenMiRJ+nKW4120/viF4SpBx3+xzrx55eKq9RU2QQCAEHML9cf9wY71qz/AfDkcczzLoQ76jpvp+C8/RStu6yv7+5Z6EQP9M4X1LQmeoFNOf1d5kSkAQODdInYAXDk9SRUwQUEEaetL8SUAp79UBE/Q6WLUC5w0A0DQ8fUhrAD4yIfRHwqbrO8JujqzlDlcj3W89st3Lb5heJGOP/iyXYHJy81agQweANYDfzXArm6+SoHjzV1WnF4cZD2eWTq9tendWt6F4TEdXoXl9Bvz+BCWzPV2cUmQL+++QzdreZcgAIBTHm7UeTygfygtZw/18L176ipBLiHxWoyVHbNVpu9fcsnIaeSO67pqffmu5V0YHvNiLuA+SKerOAbpKkHmf92s4nQt73DJy9UC0ryQAADgkjRPfME9wUsNuwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACATCYXOwAAAPBGRkZGVlaW0Wg0m81ixwLewIwuAABBRqlUPv/8848//rhMJvvggw+++c1vdnR0+C+vT33qU/fdd9+WLVs2btx47dq1995776233nr11VctFoufMgUAAJAchUJx9uxZ5pzrBEFUVVUJnlFxcfG5c+dsNhvpDEEQIyMjVVVVKpVK8KwBAACkRaFQnDlzxmlzWFFRIVQuqampU1NTTttdR0tLS8XFxUJlDQAAIDlyubyvr89VQ0gQRFlZme+5lJSUWK1Wjq0vrbm52fesAQAAJEcul/f29rpvBe12u48no1lZWY7XnBcXF0+cOLF///7du3fX1NS0t7fPzs465l5dXS3UxgIAAEiCXC7v6enhciZqs9l27NjhXS4KhWJ+fp6Z2tramquz6ry8vIWFBebCZrM5KirKh60EAACQmFOnTnFpfSlWqzUvL8+LXEpKSpjpmEympKQkN8tHRkYuLS0xVzlw4IC3mwgAACAxXV1d3Ftfug3OycnxMaOGhgaPq5SWljJXGR4e9moTAQAAJKajo4Nv60uxWCxZWVm88hobG2OmkJCQ4HEVlUrFvGe8vLzs7YYCAABIRmNjo2PLajAYBgcHWR867ZtkNBrj4uK4Z8d6tEqpVHJZa3l5mV7FarV6u63r0QaxAwAAAOf+9V//lfXJlStXHnnkkddee431+dNPP/3ss8+yPrz99tv/5V/+hXt2V69eZb7dvHkzl7U2btxIv758+TL37AANMACARF2/fp359vLlyw8//PDk5KTThWtra5977jnWhzdv3uSe3dtvv818e//993tcJTw8/I477nCVAriHBhgAQKJ++MMf0q8vX778yCOPTE1NuVl+//79zPPgq1ev/s///A/37F566SXmW8fzb0c7d+7csOEf7chPf/pT7tkBAABIV3FxcWdnZ0tLC7OL7bFjx1i3e5n9hUpKSk6dOtXW1sbrBrBMJtNqtWazmU7TbrcXFBS4WT4qKmplZYV5c1qr1fLdQAAAgKDhvgH2RW1tLTNZs9nsamithISEmZkZ5sKFhYWCxAAAACBR/muAZc4G/Th58mRkZCRzmcrKSua5MkEQ+/fvFyoAAAAAifJrAyyTydrb21npWyyWI0eORERE5OfnT0xMsM6Sy8vLBcydolarNRqN4MkCAAB4z98NsEwmO3DggOOcSHa7nfXJyMhIfHw892STkpIGBgYsFoterz906JBcLmctEBsb29HRsba2RqVvNBr7+/uzs7MF3TgAAACvBKABlslkiYmJo6OjpAtra2t8T3wTEhJMJhMzke7ubuYC27dvt1gsTrOrra0VdOMAAAD4C0wDHB0d3dnZ6aoBJgiiu7s7JiaGe4L9/f0kSba1tWm12pSUFGoypczMTOq/Op2OOvE1GAzNzc2FhYWFhYV1dXX0o165ubmCbyMAAAAP/m6A5XJ5Y2Oj4yVoR1ar9cCBA45Xkp0ym81Go5FemJrIobGxkXpLjbtpNptZ17QVCsXAwABJkv39/QJuoxRgIA4AAPiHmJiY3//+99/97neZY0z+7Gc/+9SnPvXYY4/99re/ZS68cePG//iP//jd737HcSZg5shczBE8ZDLZY489JpPJnn322fn5eebndrv929/+9uuvv/6rX/3Ki80BAAAQjP/OgJOSkpiTK5AkOTs7y5pVKT09fWhoiBXA8vJycnKy+8SpGSPa2tp0Op3jJWjqCS/6LQAAgOT4qQHW6XSs1re7u1ulUjldeNeuXawnqvR6fXh4uJv0ExMTWav09PRQ/9JoNNQnfEfvAgAACBw/NcC9vb3MNLu6utwvHx8fT53F0gYGBtyvkpycfOHCBavVurKycvjwYYVCQX2u1WqpFHg91QUAABBQ/miAMzIyWFeeucwHHBsbazQamSt696zy+myA8RAWAADInnzySebb733vezabzeNai4uLzzzzDPMTXjMQr3O3iB2AB5GRkXffffedf7dp06bbbrtt498xl7x58+a1a9euXbt26dKl11577aWXXlpeXhYrbACA4PLZz36Wfn3z5s1f/vKXHFd8/vnnv//979OPND/44IPCBxeiJNcAK5XKhx9++KGHHvrUpz716U9/+qMf/ah36TzzzDN09zIAAHDv7rvvpl9fuXLFaDRyXHF1dfXKlStbtmyh3m7dulXw2EKVVBpgtVr92GOPfeUrX/niF7942223iR0OAMD6csst/2gOPvjgA17rXr9+Xehw1gXxG+D4+Pivf/3rTz311ObNm8WOBQBgnbp06dKdd95Jvd6yZYtcLicIgsuKSqWSeanyr3/9qxe50wN0sEbnCG1ibmpsbOzp06ffeOONf/u3f0PrCwAgonfeeYd+vXHjxs997nMcV3zkkUeYZ89vvfWWF7mbzWbqNPqOO+7wYvUgJU4DrNFojh49+sYbb+zcuXNd/d4BAPDd1atXWZ9cuXLFxzRffPFF5ttvf/vbHFd8+umnmW+5P73F8uqrr8o+/CwYLSoqqq+vr7Cw0LuU4R8yMzNZfbf94eDBg2JvKEhaWFhYTExMcnJyRkZGXl5eoQsYlwckKC0tjSAI+nA3PDzse5opKSmso2h9fb3HtVpaWpirWK1WjoNCO6qpqSFJUq/XazQa1r9OnjxJkmRfX593KcPfNDY2Ok7p7A9ogIEpPDy8uLi4sbGxu7t7fHzcbDZz3JHsdjt+d4MEFRYWjo6OLiwsnDp1KiIiQpA0e3p6WPt/V1eXqwY1Li6Oml6QqampyevcVSrV4uIiSZIzMzO5ublqtVqj0aSmpp46dYpKHMNEe08ul3d1dfnSpvKCBhg0Gs2OHTuOHTs2PT3ty77U29sr9qYABEJUVBRrLGiSJO12+9DQ0JEjR2pqanbv3l1TU9PS0jI8PMw8BacMDg5yGTzLjaSkJL1e71gHCYKoq6sTajPXHaV
					<v-row align="end" class="lightbox white--text pa-2 fill-height">
					<v-col>
						<!--<div class="subheading">update in 2min</div>-->
						<!--<div class="body-1">heyfromjonathan@gmail.com</div>-->
					</v-col>
					</v-row>
				</v-img>

				<v-list-item>
					<v-list-item-content>
						<v-list-item-title class="title">
							paperdash.io
						</v-list-item-title>
						<v-list-item-subtitle>
							display
						</v-list-item-subtitle>
					</v-list-item-content>
				</v-list-item>

				<v-divider></v-divider>

				<v-list>
					<v-list-item
						v-for="(link, i) in items"
						:key="i"
						:to="link.to"
						active-class="primary white--text"
						>
						<v-list-item-action>
							<v-icon v-text="link.icon" />
						</v-list-item-action>

						<v-list-item-title v-text="link.title" />
					</v-list-item>
				</v-list>
			</v-navigation-drawer>

			<v-content>
				<v-container fluid fill-height class="align-start">
					<router-view></router-view>
				</v-container>
			</v-content>
		</template>
    </v-app>
</template>

<script>
    export default {
        name: 'App',
        data: () => ({
			isLoading: false,
            drawer: true,
            items: [
                {title: 'Dashboard', icon: '$dashboard', to: '/'},
                {title: 'Settings', icon: '$settings', to: '/settings'},
                {title: 'Wifi', icon: '$wifi', to: '/wifi'},
                {title: 'Sandbox', icon: '$sandbox', to: '/sandbox'},
            ],
		}),
		created () {
			this.$vuetify.icons.values.dashboard = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/dashboard/baseline.svg')}
			this.$vuetify.icons.values.settings = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/settings/baseline.svg')}
			this.$vuetify.icons.values.wifi = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/wifi/baseline.svg')}
			this.$vuetify.icons.values.sandbox = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/brush/baseline.svg')}	// gesture, brush, palette,
		},
    };
</script>

<style scoped>
  .lightbox {
    box-shadow: 0 0 20px inset rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
  }
</style>