NativeScript/e2e/dev-tools-drawer/app/app-root/app-root.xml

<!--
RadSideDrawer is a UI component part of the Progress NativeScript UI set of components.
Learn more about the RadSideDrawer UI component and how it can be customized in this documentation article:
https://docs.nativescript.org/ui/professional-ui-components/SideDrawer/getting-started
-->
<nsDrawer:RadSideDrawer id="sideDrawer" xmlns:nsDrawer="nativescript-ui-sidedrawer" loaded="onLoaded">
    <nsDrawer:RadSideDrawer.drawerTransition>
        <nsDrawer:SlideInOnTopTransition/>
    </nsDrawer:RadSideDrawer.drawerTransition>

    <nsDrawer:RadSideDrawer.drawerContent>
        <GridLayout rows="auto, *" class="sidedrawer sidedrawer-left">
            <StackLayout class="sidedrawer-header">
                <Label class="sidedrawer-header-image fa" text="&#xf2bd;" />
                <Label class="sidedrawer-header-brand" text="User Name" />
                <Label class="footnote" text="username@mail.com" />
            </StackLayout>

            <ScrollView row="1" class="sidedrawer-content">
                <StackLayout>
                    <GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'Home' ? ' selected': '') }}"
                        route="home/home-page" title="Home" tap="onNavigationItemTap">
                        <Label row="0" col="0" text="&#xf015;" class="fa" />
                        <Label row="0" col="1" text="Home" class="p-r-10" />
                    </GridLayout>

                    <GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'Browse' ? ' selected': '') }}"
                        route="browse/browse-page" title="Browse" tap="onNavigationItemTap">
                        <Label row="0" col="0" text="&#xf1ea;" class="fa" />
                        <Label row="0" col="1" text="Browse" class="p-r-10" />
                    </GridLayout>

                    <GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'Search' ? ' selected': '') }}"
                        route="search/search-page" title="Search" tap="onNavigationItemTap">
                        <Label row="0" col="0" text="&#xf002;" class="fa" />
                        <Label row="0" col="1" text="Search" class="p-r-10" />
                    </GridLayout>

                    <GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'Featured' ? ' selected': '') }}"
                        route="featured/featured-page" title="Featured" tap="onNavigationItemTap">
                        <Label row="0" col="0" text="&#xf005;" class="fa" />
                        <Label row="0" col="1" text="Featured" class="p-r-10" />
                    </GridLayout>

                    <StackLayout class="hr-light"></StackLayout>

                    <GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'Settings' ? ' selected': '') }}"
                        route="settings/settings-page" title="Settings" tap="onNavigationItemTap">
                        <Label row="0" col="0" text="&#xf013;" class="fa" />
                        <Label row="0" col="1" text="Settings" class="p-r-10" />
                    </GridLayout>
                </StackLayout>
            </ScrollView>
        </GridLayout>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.mainContent>
        <Frame defaultPage="home/home-page"></Frame>
    </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>