trendplays/resources/js/panel/panel.vue

<template>
<sidebar :active="active"></sidebar>
<transition name="fade" mode="out-in">
<div v-if="active === ''" id="main">
	<section class="welcome-pane"><h3>Welcome, {{user.name}}!</h3></section>
	<section class="credits-pane"><img src="../../images/wallet2.svg" alt="wallet" class="icon"/><p>Credits: ${{user.credits}}</p></section>
	<section class="alerts-pane"><h4>News and Announcements</h4>
	<p>We've just launched. Thanks for joining us.</p>
	</section>
	<section class="recent-pane"><h4>Recent Activity</h4>Recent activity showing last 5 completed orders </section>
</div>
<div v-else-if="active === '#orders'" id="main">
	<div class="actions"><a href="#orders/new">New</a></div>
	<section class="pending-pane">
	<h4>Pending Orders</h4>
	</section>
</div>
</transition>
</template>

<script>
import Sidebar from './sidebar.vue'

export default {
	components: {
		Sidebar,
	},
	data() {
	return {active: window.location.hash, user: '',
	token: ''}},
}
</script>