Navigation Drawer/ Side Drawer for NativeScript
Published on July 15, 2016
Navigation Drawer/ Side Drawer is a very common component we need in most of our mobile applications. Side Drawer something we use to go from one page to another.
I felt that implementing the Side Drawer for NativeScript is little difficult at first compared to other frameworks like Ionic.
In Ionic framework, there is a build in <ion-menu> angular directive which is very easy to implement.
In this post, we will discuss how to implement SideDraw for our NativeScript application.
We will implement something like this.
If you want to see the source code of this version go here.
If you want to test that the app on your dev you can download it from here or QR scan the follow
One keynote is that In order to implement Side Drawer, we also have to learn little about <ActionBar> and <NavigationButton> components. We have to create our own custom ActionBar to have Side Drawer.
Let’s not create an application from Scratch instead, let’s use the GitUser application we created earlier. If you want to catch the series from the beginning Go to Part1 or if you just watch to know the final coding go to Part5.
Get GitUsers App.
Let’s clone our GitUsers v0.1 in our local machine. To do so
git clone https://github.com/dimpu/NativeScript-GitUser.git GitUser
cd GitUsers
git checkout tags/v1.0
npm i
```
We tagged our initial version as **v0.1** So we checking out the tag **v1.0**
`npm i` will install all necessary node module for our application.
## Adding NativeScript Teleric UI
Telerik has already created a UI library for NativeScript. Which is available in both Free and Pro Version.
Free have
1. SideDraw
2. ListView
Components
Pro version comes with 30 days trail which has other components like charts, date with more features.
For us, FreeVersion is more than enough.
Ok, First add the NativScript Telerik UI to our project.
```shell
tns plugin add nativescript-telerik-ui
```
Incase if you want to try the pro version
```shell
tns plugin add nativescript-telerik-ui-pro
```
This will add the library and registered it for use.
> **Big Note**: If you are building the application from the previous tutorial or If you already have `android` folder inside `platforms` folder first remove it and then run `tns platform add android` command to add the android platform again so that all java files for `nativescript-telerik-ui` will get build.
## Modifying GitUsers structure.
We are about to make our application complex. So, I think it's the right time to properly structure our application.
Previously since it's a very tiny application we put everything on `app` component.
Let's create a new folder `components`. We will build everything as an angular2 component.
I have created a list component and move all the git users listing code from app.component to list.component inside the components folder.
We will not discuss that code here. If you want to see how it was done go and check out [Part 5](/build-your-first-mobile-app-with-the-nativescript-and-angular2-part-5).
## Codeing ActionBar
By default, nativeScript creates an ActionBar for each and every page. But If you want to customize it you should use '<ActionBar>' components.
Let's start with `app.component.html`
```html
<ActionBar title="GitUsers">
</ActionBar>
```
This code is equivalent to default ActionBar. From now can start modifying is as we want.
Now we want a menu drawer icon left the side of the title.
```html
<ActionBar title="GitUsers">
<NavigationButton icon="res://ic_drawer" (tap)="openDrawer()">
</NavigationButton>
</ActionBar>
```
We added a new resource icon `ic_drawer.png` to our project.
? Also we telling menu icon to call `openDrawer()` when it is tapped.
>You can find inside `App_Resourse` folder
## Telerik RadSideDrawer
To implement Side draw we will use the `RadSideDrawer` directive which we added before as a plugin.
```html
<RadSideDrawer #drawer>
<template drawerSide>
<!-- Page goes here -->
</template>
<template drawerMain>
<!-- Main content goes here->
</template>
</RadSideDrawer>
```
Before we see compleate `app.component.html` code we should add a few more things to our `app.component.ts`. go to our `app.component.ts` file.
## Implmenting RadSideDrawerComponent
In Order to work with the `SideDrawer directives` it is very important that we need to import `RadSideDrawerComponent` and `SideDrawerType`. We should add `ViewChild` for `RadSideDrawerComponent`.
```ts
import { Component, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import { userListComponent } from './components/list/list.component';
@Component({
selector: "my-app",
directives: [userListComponent],
templateUrl: "app.component.html"
})
export class AppComponent {
@ViewChild(RadSideDrawerComponent)
public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
public pages:Array<Object>;
constructor (
private _changeDetectionRef: ChangeDetectorRef) {
// List all pages here
this.pages = [
{name:"Home"},
{name:"About"},
{name:"Contact"}
];
}
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectionRef.detectChanges();
}
public openDrawer() {
this.drawer.toggleDrawerState();
}
}
```
Here we have created the `drawer` object which is used to control the SideDrawer.
We also implemented the `openDrawer` function which we added to our `<NavigationButton >`.
Also, we imported our `userListComponent` which we will use inside the main content.
Now, Let's see our final code of `app.component.html`.
```html
<ActionBar title="GitUsers">
<NavigationButton icon="res://ic_drawer" text="Go Back" (tap)="openDrawer()"></NavigationButton>
</ActionBar>
<RadSideDrawer #drawer>
<template drawerSide>
<StackLayout class="p bgc-white">
<ListView [items]="pages" row="1">
<template let-item="item" let-i="index">
<StackLayout>
<Label text="{{item.name}}" class="page-name" ></Label>
</StackLayout>
</template>
</ListView>
</StackLayout>
</template>
<template drawerMain>
<StackLayout class="m">
<user-list></user-list>
</StackLayout>
</template>
</RadSideDrawer>
```
Inside templates, we added what ever template stucture we want.
Ok, Finally let's add few sties to `app.component.css` file.
```language-css
.p {
padding: 10px;
}
.m {
padding: 10px;
}
.bgc-white {
background-color: #fff;
}
.page-name {
padding: 13px 8px;
font-size: 16px;
color: #000;
}
ActionBar {
background-color: #3C5AFD;
color: white;
}
RadSideDrawer {
padding: 0;
margin: 0;
}
```
Please note previously we had our user list component CSS here but we moved it inside the components folder.
That's it we are done. In next post, we will see some other useful NativeScript concepts.