side_menu/src/SideMenu.vue

<template>
	<div id="side-menu">
		<div class="side-menu-header">
			<button class="side-menu-opener"></button>

			<div v-if="logo" class="side-menu-logo">
				<img v-bind:src="logo">
			</div>
		</div>

		<ul class="side-menu-apps-list">
			<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'is-active': app.active}">
				<a v-bind:href="app.href">
				 	<span class="side-menu-app-icon" v-html="app.icon"></span>

					{{ 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
		var links = document.querySelectorAll('#appmenu a')

		this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
			.getPropertyValue('background-image')
			.replace('url("', '')
			.replace('")', '')

		for (let element of links) {
			let href = element.getAttribute('href')

			if (href !== '#') {
				that.apps.push({
					href: href,
					name: element.querySelector('span').innerHTML,
					icon: element.querySelector('svg').outerHTML,
					active: element.classList.contains('active')
				})
			}
		}
	}
}
</script>