side_menu/src/SideMenu.vue

<!--
@license GNU AGPL version 3 or any later version

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<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, 'active': app.active}">
                <a v-bind:href="app.href" v-bind:title="app.name">
                     <span class="side-menu-app-icon" v-html="app.icon"></span>
                     <span class="side-menu-app-text" v-html="app.name"></span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
import trim from 'trim'

export default {
    name: 'SideMenu',
    data() {
        return {
            apps: [],
            logo: null,
            forceLightIcon: false,
        }
    },
    methods: {
        retrieveApps() {
            this.apps = []
            const links = document.querySelectorAll('#appmenu a')

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

                if (!parent) {
                    continue
                }

                var dataId = parent.getAttribute('data-id')
                dataId = dataId !== null ? dataId : ''

                if (this.ignoreExternalSites && dataId.indexOf('external_index') !== -1) {
                    continue
                }

                if (href !== '#') {
                    let svg = element.querySelector('svg').outerHTML

                    svg = svg
                        .replace(/(height|width)="20"/, '')
                        .replace('id="invertMenuMain', 'id="invertSideMenu')
                        .replace('url(#invertMenuMain', 'url(#invertSideMenu')

                    if (this.forceLightIcon) {
                        svg = svg.replace(/filter="url[^"]+"/, '')
                    }

                    this.apps.push({
                        href: href,
                        name: trim(element.querySelector('span').innerHTML),
                        icon: svg,
                        active: element.classList.contains('active')
                    });
                }
            }

            (function(apps) {
                window.setTimeout(function() {
                    jQuery('body').trigger('side-menu.apps', [apps])
                }, 1000)
            })(this.apps)
        },
        retrieveLogo() {
            const ncLogo = document.querySelector('#nextcloud .logo')

            if (ncLogo) {
                const url = window.getComputedStyle(ncLogo, null)
                    .getPropertyValue('background-image')
                    .replace('url("', '')
                    .replace('")', '')

                if (url && url !== 'none') {
                    this.logo = url
                }
            }
        },
    },
    mounted() {
        this.retrieveApps()
        this.retrieveLogo()
        this.forceLightIcon = document.querySelector('#side-menu-container').getAttribute('data-forcelighticon') == 1;
        this.ignoreExternalSites = document.querySelector('#side-menu-container').getAttribute('data-externalsitesintopmenu') == 1;

        const menu = document.querySelector('#appmenu')

        if (menu) {
            const config = {attributes: true, childList: true, subtree: true}
            const observer = new MutationObserver(this.retrieveApps)
            observer.observe(menu, config)
        }
    }
}
</script>