Spookie/assets/js/components/TheSidebar.vue

<template>
	<div
		id="main-menu"
		class="container-fluid col sidenav-left box text-start"
	>
		<ul>
			<li
				v-for="link in links"
				:key="link.url"
			>
				<AppLink
					:to="link.url"
					:fa="link.fa"
				>
					{{ link.name }}
				</AppLink>
			</li>
		</ul>
	</div>
</template>

<script>

export default {
	name: 'TheSidebar',
	data: () => ({
		links: [
			{
				name: 'Projects',
				url: 'Projects',
				fa: 'fa-file-code-o',
			},
			{
				name: 'Blog',
				url: 'Blog',
				fa: 'fa-file-text-o',
			},
			{
				name: 'Gitea',
				url: 'https://git.24unix.net',
				fa: 'fa-gitea',
			},
			{
				name: 'NextCloud',
				url: 'https://cloud.24unix.net',
				fa: 'fa-nextcloud',
			},
			{
				name: 'Pastebin',
				url: 'https://pastebin.24unix.net',
				fa: 'fa-paste',
			},
			{
				name: 'YOURLS',
				url: 'https://y.24unix.net',
				fa: 'fa-link',
				external: true
			}
		]
	})
}
</script>