<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" 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>
