using Nav with shiny.router

[zhangguy]

Hi,
I'm trying to create a navigation sidebar (adapted from the tutorial: https://appsilon.com/shiny-fluent-tutorial/)
One would use the make_router function to create links to the navigation items. Something like this:

main.R

box::use(
  shiny[div, moduleServer, NS, renderUI, tags, uiOutput, renderText, h2, h3],
  shiny.fluent[fluentPage, Stack],
  shiny.router[make_router, route]
)

box::use(
  app/view/page1,
  app/view/page2,
  app/view/layout
)

router <- make_router(
  route("page1", page1$ui('app-p1')),
  route("page2", page2$ui('app-p2'))
)

#' @export
ui <- function(id) {
  ns <- NS(id)
  fluentPage(
    layout$layout(router$ui),
    tags$head(
      tags$link(href = "style.css", rel = "stylesheet", type = "text/css")
    )
  )
}

#' @export
server <- function(id) {
  moduleServer(id, function(input, output, session) {
    router$server(input, output, session)
    page1$server('p1')
    page2$server('p2')
  })
}

app/view/page1.R

box::use(
    shiny[moduleServer, textOutput, renderText, NS, div, reactive, uiOutput, p],
    shiny.fluent[TextField.shinyInput, Stack, Label]
)

box::use(
    app/view/utils
)

#' @export
ui <- function(id){
    ns <- NS(id)
    card1 <- utils$makeCard(
        "page1 input",
        Stack(TextField.shinyInput(ns("page1input"), value = "default value"))
    )

    card2 <- utils$makeCard(
        "you typed",
        Stack(textOutput(ns("page1print")))
    )
    
    page <- utils$makePage(
        "title",
        "subtitle",
        Stack(card1, card2)
    )
}

#' @export
server <- function(id) {
    moduleServer(id, function(input, output, session){
        output$page1print <- renderText({sprintf("Input from above: %s", input$page1input)})
        # output$page1print <- renderText("output text")
        print("I'm run")
    })
}

app/view/page2.R

box::use(
    shiny[moduleServer, NS],
    shiny.fluent[Stack],
    plotly[renderPlotly, plot_ly, plotlyOutput]
)

box::use(
    app/view/utils
)

#' @export
ui <- function(id) {
    ns <- NS(id)
    page <- utils$makePage(
        "title",
        "subtitle",
        utils$makeCard(
            "page2 figure",
            plotlyOutput(ns('fig'))
        )
    )
}

#' @export
server <- function(id) {
    moduleServer(id, function(input, output, session){
        output$fig <- renderPlotly({
            plot_ly(data = rhino::rhinos, x = ~Species, type = "bar")
        })
    })
}

app/view/layout.R

box::use(
    shiny[tagList, img, div],
    shiny.fluent[Text, CommandBar, CommandBarItem, Stack, Nav],
)


#' @export
header <- tagList(
    img(src = "test.svg", class = "logo"),
    div(Text(variant = "xLarge", "test", class = "title")),
    div(Text(variant = "xLarge", "Data dashboard for the test"))
)

#' @export
footer <- Stack(
  horizontal = TRUE,
  horizontalAlign = 'space-between',
  tokens = list(childrenGap = 20),
  Text(variant = "medium", "Built by xxx", block=TRUE)
)

#' @export
link_groups <- list(
  list(
    links = list(
      list(
        name = "page1",
        key = "page1",
        url = "#!/page1",
        icon = "AnalyticsReport"
      ),
      list(
        name = "page2",
        key = 'page2',
        url = '#!/page2',
        icon = 'AnalyticsReport'
      )
    )
  )
)

navigation <- Nav(
  groups = link_groups,
  initialSelectedKey = 'page1',
  styles = list(
    root = list(
      height = '100%',
      width = '100%',
      boxSizing = 'border-box',
      overflowY = 'auto'
    )
  )
)

#' @export
layout <- function(mainUI){
  div(class = "grid-container",
      div(class = "header", header),
      div(class = "sidenav", navigation),
      div(class = "main", mainUI),
      div(class = "footer", footer)
  )
}

app/view/utils.R

box::use(
    glue[glue],
    shiny[tagList, div, span],
    shiny.fluent[Stack, Text]
)

#' @export
makeCard <- function(title, content, size = 12, style = "") {
  div(
    class = glue("card ms-depth-8 ms-sm{size} ms-xl{size}"),
    style = style,
    Stack(
      tokens = list(childrenGap = 5),
      Text(variant = "large", title, block = TRUE),
      content
    )
  )
}

#' @export
makePage <- function (title, subtitle, contents) {
  tagList(div(
    class = "page-title",
    span(title, class = "ms-fontSize-32 ms-fontWeight-semibold", style =
           "color: #323130"),
    span(subtitle, class = "ms-fontSize-14 ms-fontWeight-regular", style =
           "color: #605E5C; margin: 14px;")
  ),
  contents)
}

www/style.css

.grid-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 54px 1fr 30px;
    grid-template-areas: "header header" "sidenav main" "footer footer";
    height: 100vh;
  }
  
  .header {
    grid-area: header;
    background-color: #fff;
    padding: 6px 0px 6px 10px;
    display: flex;
  }
  
  .main {
    grid-area: main;
    background-color: #faf9f8;
    padding-left: 40px;
    padding-right: 32px;
    max-width: calc(100vw - 250px);
    max-height: calc(100vh - 100px);
    overflow: auto;
  }
  
  .footer {
    grid-area: footer;
    background-color: #f3f2f1;
    padding: 10px 10px;
  }
  
  .sidenav {
    grid-area: sidenav;
    background-color: #fff;
    padding: 25px;
  }
  .body {
    background-color: rgba(225, 223, 221, 0.2);
    min-height: 611px;
    margin: 0;
  }
  
  .page-title {
    padding: 20px 0px;
  }
  
  .card {
    background: #fff;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 2px;
    background-clip: padding-box;
  }

  .title {
    padding: 0px 14px 0px 14px;
    color: #737373;
    margin: 6px 0px 6px 10px;
    border-left: 1px solid darkgray;
    width: 220px;
  }
  
  .logo {
    height: 30px;
  }

The make_router function is deprecated, and the shiny.router docs recommended to use router_ui. Is there a way I can use router_ui to create Nav navigation sidebars like the one above? Seems that the router object is needed by layout/Nav.

Thanks!