@nativescript/template-drawer-navigation-ng/src/app/app.component.html

Side navigation template

<RadSideDrawer [drawerTransition]="sideDrawerTransition">
  <GridLayout tkDrawerContent rows="auto, *" class="nt-drawer__content">
    <StackLayout row="0" class="nt-drawer__header">
      <Image class="nt-drawer__header-image fas t-36" src="font://&#xf2bd;"></Image>
      <Label class="nt-drawer__header-brand" text="User Name"></Label>
      <Label class="nt-drawer__header-footnote" text="username@mail.com"></Label>
    </StackLayout>

    <ScrollView row="1" class="nt-drawer__body">
      <StackLayout>
        <GridLayout
          columns="auto, *"
          class="nt-drawer__list-item"
          [class.-selected]="isComponentSelected('/home')"
          (tap)="onNavItemTap('/home')"
        >
          <Label col="0" text="&#xf015;" class="nt-icon fas"></Label>
          <Label col="1" text="Home" class="p-r-10"></Label>
        </GridLayout>

        <GridLayout
          columns="auto, *"
          class="nt-drawer__list-item"
          [class.-selected]="isComponentSelected('/browse')"
          (tap)="onNavItemTap('/browse')"
        >
          <Label col="0" text="&#xf1ea;" class="nt-icon far"></Label>
          <Label col="1" text="Browse" class="p-r-10"></Label>
        </GridLayout>

        <GridLayout
          columns="auto, *"
          class="nt-drawer__list-item"
          [class.-selected]="isComponentSelected('/search')"
          (tap)="onNavItemTap('/search')"
        >
          <Label col="0" text="&#xf002;" class="nt-icon fas"></Label>
          <Label col="1" text="Search" class="p-r-10"></Label>
        </GridLayout>

        <GridLayout
          columns="auto, *"
          class="nt-drawer__list-item"
          [class.-selected]="isComponentSelected('/featured')"
          (tap)="onNavItemTap('/featured')"
        >
          <Label col="0" text="&#xf005;" class="nt-icon fas"></Label>
          <Label col="1" text="Featured" class="p-r-10"></Label>
        </GridLayout>

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

        <GridLayout
          columns="auto, *"
          class="nt-drawer__list-item"
          [class.-selected]="isComponentSelected('/settings')"
          (tap)="onNavItemTap('/settings')"
        >
          <Label col="0" text="&#xf013;" class="nt-icon fas"></Label>
          <Label col="1" text="Settings" class="p-r-10"></Label>
        </GridLayout>
      </StackLayout>
    </ScrollView>
  </GridLayout>

  <GridLayout tkMainContent>
    <page-router-outlet></page-router-outlet>
  </GridLayout>
</RadSideDrawer>