dd

<template>
    <Page>
        <ActionBar title="Zorgdoc" class="action-bar">
            <ActionItem @tap="check" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
        </ActionBar>
        <GridLayout rows="*">
            <RadSideDrawer ref="drawer" id="sideDrawer" drawerLocation="Bottom">
                <StackLayout ~drawerContent backgroundColor="white">
                    <StackLayout height="56" style="text-align: center; vertical-align: center;">
                        <Label text="Zorgdoc logo?" />
                    </StackLayout>
                    <StackLayout>
                        <Label class="text" text="Register an account" padding="10" @onTap="execute()" />
                        <Label class="text" text="Configure a Pincode" padding="10" @onTap="$router.push('/second')" />
                        <Label class="text" text="Login with Password" padding="10" @onTap="execute()" />
                        <Label class="text" text="Help" padding="10" @onTap="execute()" />
                        <Label class="text" text="About" padding="10" @onTap="execute()" />
                    </StackLayout>
                </StackLayout>
                <StackLayout ~mainContent>
                    <Label text="De rest van de XML komt hier" textWrap="true" fontSize="13" padding="10" />
                </StackLayout>
            </RadSideDrawer>
        </GridLayout>
    </Page>
</template>

<script>
    require("nativescript-vue").registerElement("RadSideDrawer", () => require("nativescript-ui-sidedrawer").RadSideDrawer);

export default {
    methods: {
        check() {
            if (this.$refs.drawer.nativeView.getIsOpen()) {
                this.$refs.drawer.nativeView.closeDrawer();
            } else {
                this.$refs.drawer.nativeView.showDrawer();
            }
        },
        execute() {
            console.log("Bzzzz navigating")
        }
    },

    data() {
        return {

        };
    },
}

</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/transitions
https://v1-3-1.nativescript-vue.org/en/docs/routing/vue-router/
https://www.nativescript.org/blog/a-deep-dive-into-telerik-ui-for-nativescripts-sidedrawer
https://play.nativescript.org/?template=play-vue&id=qjlovP ( werkt niet , wel als je de router zooi weg gaat halen )