MainScene.brs

sub init()
  ' Setup the Activation Screen
  m.activation = createObject("roSGNode", "ActivationView")
  m.activation.ObserveField("activationSuccess", "MainScene_OnActivationSuccess")

  ' Setup the main Grid
  m.grid = CreateObject("roSGNode", "GridView")
  m.grid.SetFields({
    style: "standard"
    posterShape: "16x9"
  })

  ' Fetch data for the grid
  content = CreateObject("roSGNode", "ContentNode")
  content.AddFields({
    HandlerConfigGrid: {
      name: "RootHandler"
    }
  })

  ' Attach the retrieved data to the grid
  m.grid.content = content

  ' Get a handle on the Navbar
  m.navbar = m.top.findNode("navbar")
end sub

sub Show(args as object)
  print "Show MainScene"

  ' Lets set some overall Theme settings
  scene = m.top.getScene()
  scene.theme = {
    global: {
      OverhangVisible: false
    }
  }

  ' Hide the Navbar and display the intro screens
  m.navbar.visible = false
  m.top.ComponentController.CallFunc("show", {
    view: m.activation
  })

  m.top.signalBeacon("AppLaunchComplete")
end sub

sub MainScene_OnActivationSuccess(event as object)
  ?"MainScene_OnActivationSuccess"
  ShowHomeScreen()
end sub

sub ShowHomeScreen()
  m.navbar.visible = true
  m.navbar.setFocus(true)
  m.top.ComponentController.CallFunc("show", {
    view: m.grid
  })
end sub

MainScene.xml

<?xml version="1.0" encoding="UTF-8"?>
<component name="MainScene" extends="BaseScene">
  <!-- importing main handler -->
  <script type="text/brightscript" uri="pkg:/components/screens/MainScene.brs" />
  <script type="text/brightscript" uri="pkg:/components/controllers/DetailsViewLogic.brs" />
  <interface>
    <field id="currentVideo" type="node" />
  </interface>
  <children>
    <Navbar translation="[0, 175]"/>
  </children>
</component>

Navbar.xml

<?xml version="1.0" encoding="UTF-8"?>
<component name="Navbar" extends="SGDEXComponent" xsi:noNamespaceSchemaLocation="https://devtools.web.roku.com/schema/RokuSceneGraph.xsd">
  <script type="text/brightscript" uri="Navbar.brs" />
  <children>
    <MarkupList 
      id="navbar"
      itemComponentName="NavbarItem"
      itemSize="[200,50]"
      itemSpacings="[0, 10]"
    >
      <ContentNode role="content" >
        <ContentNode title="Search" url="pkg:/images/icons/magnifying-glass.png" />
        <ContentNode title="Home" url="pkg:/images/icons/house.png" />
        <ContentNode title="Collections" url="pkg:/images/icons/folder.png" />
        <ContentNode title="On Air" url="pkg:/images/icons/monitor.png" />
        <ContentNode title="Join" url="pkg:/images/icons/avatar.png" />
        <ContentNode title="Settings" url="pkg:/images/icons/settings.png" />
      </ContentNode>
    </MarkupList>
  </children>
</component>

NavbarItem.brs

sub init()
  m.top.id = "NavbarItem"
  m.itemicon = m.top.findNode("itemIcon")
  m.itemlabel = m.top.findNode("itemLabel")
  'm.itemcursor = m.top.findNode("itemcursor")
  'm.itemposter = m.top.findNode("itemPoster")
end sub

sub ShowContent()
  itemcontent = m.top.itemContent
  m.itemicon.uri = itemcontent.url
  m.itemlabel.text = itemcontent.title
  'm.itemposter.uri = itemcontent.HDPosterUrl
end sub

sub ShowFocus()
  'm.itemcursor.opacity = m.top.focusPercent
  'm.itemposter.opacity = m.top.focusPercent
end sub

NavbarItem.xml

<?xml version="1.0" encoding="UTF-8"?>
<component name="NavbarItem" extends = "Group" >
  <script type="text/brightscript" uri="NavbarItem.brs" />
  <interface>
    <field id = "itemContent" type = "node" onChange = "showcontent" />
    <field id = "focusPercent" type = "float" onChange = "showfocus" />
  </interface>  
  <children>
    <Poster
      id="itemIcon"
      translation="[ 10, 4 ]"
      width="35"
      height="35" 
    />
    <Label
      id="itemLabel"
      translation="[ 55, 10 ]" 
    /> 
  </children>
</component>