Hoem

<template>
	<Page class="page">
		<ActionBar class="action-bar"
			flat="true"
			title="Home">
			<android>
				<NavigationButton
                	icon="res://ic_menu_black_24dp"
					@tap="showSideMenu"
					text="Menu"></NavigationButton>
				
					<!-- android.systemIcon="res://ic_settings_applications_black_24dp" -->
				<ActionItem 
					android.position="actionBar"
					text="Settings"
					@tap="gotoSettingsPage"></ActionItem>
				
					<!-- android.systemIcon="res://ic_notifications_none_black_24dp" -->
				<ActionItem 
					android.position="actionBar"
					text="Notifications"
					@tap="gotoNotificationsPage"></ActionItem>
			</android>

			<ActionItem 
				icon="res://ic_settings_black_24dp"
				android.position="actionBar"
				@tap="gotoSettingsPage"></ActionItem>
			
			<ActionItem 
				icon="res://ic_notifications_none_black_24dp"
				android.position="actionBar"
				@tap="gotoNotificationsPage"></ActionItem>
			
		</ActionBar>

		<SideDrawer>
			<DockLayout stretchLastChild="true">
				<!-- <Button dock="bottom" class="btn btn-primary" @tap="$router.push('/emergency')">Emergency</Button> -->
				
				<StackLayout class="main-content"
					verticalAlign="middle"
					horizontalAlign="center"
					dock="top">
					<StackLayout class="btn btn-primary main-btn"
						@tap="$router.push('/choose-category')">
						<Image 
							height="100%"
							src="res://ic_arrow_upward_white_48dp"
							width="100%" />
							<!-- stretch="none" -->
					</StackLayout>

					<Label text="Get Help"></Label>
				</StackLayout>
			</DockLayout>
		</SideDrawer>
  	</Page>
</template>

<script>
	export default {
		data () {
			return {};
		},

		methods: {
			gotoSettingsPage () {
				console.log("Going to Settings Page!");
			},

			gotoNotificationsPage () {
				console.log("Going to notifications Page!");
			},

			showSideMenu () {
				console.log("Showing Side Menu!");
			}
		}
	}
</script>

<style>

Page.page {
	background-color	: #F4F4F4;
}

ActionBar.action-bar {
	background-color	: #F4F4F4;
}

DockLayout {
	margin-bottom		: 50;
}

StackLayout.main-content Label {
	font-size			: 40;
	text-align			: center;
}

Button.btn,
StackLayout.btn {
	background-color	: #B70000;
	border-color		: #7A0000;
	border-radius		: 30;
	text-transform		: none; 
	width				: 250;
}

StackLayout.btn.main-btn {
	border-radius		: 40;
	height				: 160;
	width				: 160;
	text-align			: center;
}

StackLayout.main-content Label {
	font-size			: 25;
	margin-left			: 0;
	padding-left		: 0;
}

</style>

SideDrawer.vue

<template>

    <RadSideDrawer ref="drawer">
        <StackLayout ~drawerContent ref="drawerContent">
            <Label text="Sidebar" />
        </StackLayout>

        <StackLayout ~mainContent ref="mainContent">
            <slot></slot>
        </StackLayout>
    </RadSideDrawer>

</template>

<script>
    export default {
        data () {
            return {};
        },

        mounted () {
            const drawerView = this.$refs.drawer.nativeView;
            drawerView.mainContent = this.$refs.mainContent.nativeView;
            drawerView.drawerContent = this.$refs.drawerContent.nativeView;
        }
    }
</script>

<style></style>