Fix #6, pass a prop to the sidebar component disabling the mobile breakpoint (hackish templating on that prop, though).

Author: avivace

src/components/Blockly.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<v-app id="inspire">
-			<sidebar></sidebar>
+			<sidebar mobileDrawAnim=0></sidebar>
 			<v-toolbar color="indigo" dark fixed app>
 				<v-toolbar-side-icon @click.stop="toggleSidebar()"></v-toolbar-side-icon>
 				<v-toolbar-title>
@@ -278,7 +278,6 @@ export default {
 		}
 	},
 	mounted() {
-
 		let axios = this.$axios
 		this.status = null
 		this.pollStatus();

src/components/Sidebar.vue

@@ -1,7 +1,98 @@
 <template>
 	<div>
-		<v-navigation-drawer fixed v-model="drawer" app>
-			<v-list dense>
+
+
+
+			<template v-if="mobileDrawAnim == '1'">
+				<v-navigation-drawer fixed v-model="drawer" app>
+					<v-list dense>
+				<v-list-tile to="/">
+					<v-list-tile-action>
+						<v-icon large>home</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title class="navEntry">Home</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+				<!--
+				<v-list-tile to="/help">
+					<v-list-tile-action>
+						<v-icon large>help</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title class="navEntry">Aiuto</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+			-->
+				<br>
+				<v-divider>
+				</v-divider>
+				<br>
+				<!--
+				<v-list-tile to="/activity">
+					<v-list-tile-action>
+						<v-icon>open_in_new</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title>Apri Attività</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+				<v-list-tile to="/new">
+					<v-list-tile-action>
+						<v-icon>add</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title>Nuova Attività</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+				-->
+				<v-list-tile to="/program">
+					<v-list-tile-action>
+						<v-icon large>flip_to_front</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title class="navEntry">Programma</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+				<v-list-tile to="/control">
+					<v-list-tile-action>
+						<v-icon large>games</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title class="navEntry">Controlla</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+				<v-list-tile to="/settings">
+					<v-list-tile-action>
+						<v-icon large>settings</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title class="navEntry">Impostazioni</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+				<v-list-tile to="/gallery">
+					<v-list-tile-action>
+						<v-icon large>photo_library</v-icon>
+					</v-list-tile-action>
+					<v-list-tile-content>
+						<v-list-tile-title class="navEntry">Galleria</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+				<br>
+				<div style="position: absolute; bottom: 1%;" class="gray--text text-xs-center">
+					<v-divider></v-divider>
+					<v-btn v-for="el in socials" :key="el.icon" class="mx-3 gray--text" icon :href="el.link" target="_blank">
+						<v-icon size="24px">{{ el.icon }}</v-icon>
+					</v-btn>
+					<br>
+					&copy;2018 — <strong>UNIMIB</strong><!-- — <router-link to="/credits"><a>Credits</a></router-link>-->
+				</div>
+			</v-list>
+		</v-navigation-drawer>
+			</template>
+			<template v-else>
+				<v-navigation-drawer fixed v-model="drawer" app :mobile-break-point="0">
+					<v-list dense>
 				<v-list-tile to="/">
 					<v-list-tile-action>
 						<v-icon large>home</v-icon>
@@ -85,11 +176,16 @@
 				</div>
 			</v-list>
 		</v-navigation-drawer>
+			</template>
+
+
+
 	</div>
 </template>
 <script>
 export default {
 	data() {
+
 		return {
 			socials: [
 				{ icon: 'fab fa-facebook', link: 'https://facebook.com/coderbot' },
@@ -99,6 +195,12 @@ export default {
 			],
 		}
 	},
+	props: {
+		mobileDrawAnim: {
+			type: String,
+			default: "1",
+		}
+	},
 	computed: {
 		drawer: {
 			get() {