init

src/SideMenu.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import SideMenu from './SideMenu.vue'
+
+Vue.prototype.t = t
+Vue.prototype.OC = OC
+
+const View = Vue.extend(SideMenu)
+const sideMenu = new View({
+})
+
+const mountSideMenuComponent = () => {
+	const sideMenuContainer = document.querySelector('#side-menu')
+
+	if (sideMenuContainer) {
+        sideMenu.$mount('#side-menu')
+	} else {
+		window.setTimeout(mountSideMenuComponent, 50)
+	}
+}
+
+mountSideMenuComponent()

src/SideMenu.vue

@@ -0,0 +1,49 @@
+<template>
+	<div id="side-menu">
+		<button class="side-menu-opener"></button>
+
+		<div v-if="logo" class="side-menu-logo">
+			<img v-bind:src="logo">
+		</div>
+
+		<ul class="side-menu-apps-list">
+			<li v-for="app in apps" class="side-menu-app">
+				<a v-bind:href="app.href">
+					<img v-bind:src="app.icon" v-bind:alt="app.name" class="side-menu-app-icon">
+
+					{{ app.name }}
+				</a>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+export default {
+	name: 'SideMenu',
+	data() {
+		return {
+			apps: [],
+			logo: null
+		}
+	},
+	created() {
+		let that = this
+
+		axios.get(generateUrl('apps/side_menu/side_menu/api/apps'))
+			.then(response => {
+				this.apps = response.data
+			})
+
+		this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
+			.getPropertyValue('background-image')
+			.replace('url("', '')
+			.replace('")', '')
+
+		console.log(this.logo)
+	}
+}
+</script>

src/main.js

@@ -0,0 +1,10 @@
+const sideMenuContainer = $('<div id="side-menu">')
+const sideMenuOpener = $('<button class="side-menu-opener"></button>')
+
+$('body').append(sideMenuContainer);
+
+sideMenuOpener.insertBefore('#nextcloud');
+
+$('body').on('click', '.side-menu-opener', () => {
+    $('#side-menu').toggleClass('is-active');
+})