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
        }
    },
    methods: {
        retrieveApps() {
            this.apps = [];
            const links = document.querySelectorAll('#appmenu a');

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

                if (href !== '#') {
                    this.apps.push({
                        href: href,
                        name: element.querySelector('span').innerHTML,
                        icon: element.querySelector('svg').outerHTML,
                        active: element.classList.contains('active')
                    });
                }
            }
        },
        retrieveLogo() {
            this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
                .getPropertyValue('background-image')
                .replace('url("', '')
                .replace('")', '')
        },
    },
    created() {
        this.retrieveApps();
        this.retrieveLogo();

        const menu = document.querySelector('#appmenu')
        const config = {attributes: true, childList: true, subtree: true};
        const observer = new MutationObserver(this.retrieveApps);
        observer.observe(menu, config);
    }
}
</script>