How to use onRenderGroupHeader with Nav?

[zilch42]

I am wondering how to use the onRenderGroupHeader parameter with Nav?

The Microsoft Fluent UI documentation has an example of custom header groups that do not collapse and have a different style, applied using onRenderGroupHeader. https://developer.microsoft.com/en-us/fluentui#/controls/web/nav

Screenshot of the result below

Is it possible to do the same thing with shiny.fluent? Below is a basic example of the Nav with my attempt at using onRenderGroupHeader commented out (because it doesn't work).

library(shiny)
library(shiny.fluent)

navigation_styles <- list(
  root = list(
    height = "100%",
    width = "30%",
    boxSizing = "border-box",
    border = "1px solid #eee",
    overflowY = "auto"
  )
)

link_groups <- list(
  list(name = 'Pages', 
    links = list( 
      list(name = 'Activity'),
      list(name = 'News'))),
  list(name = 'More Pages',
       links = list(
      list(name = 'Settings'),
      list(name = 'Notes')
    )
  )
)

shinyApp(
  ui = fluidPage(
    Nav(
      groups = link_groups,
      selectedKey = "key1",
      styles = navigation_styles, 
      # onRenderGroupHeader = JS("group => function() {
      #                          return <h3>{group.name}</h3>;
      #                          }")
    )
  ),
  server = function(input, output) {
 })

[jakubsob]

Hi @zilch42,

The onRenderHroupHeader argument must be a function returning a React component, in your example it returns a function. To render HTML elements using this approach we can't use JSX as it won't be rendered. We need to explicitly use React.createElement, it's first argument takes the type of HTML tag, second is it's props (herer it's null), the third one are children. Please take a look at the example:

library(shiny)
library(shiny.fluent)

navigation_styles <- list(
  root = list(
    height = "100%",
    width = "30%",
    boxSizing = "border-box",
    border = "1px solid #eee",
    overflowY = "auto"
  )
)

link_groups <- list(
  list(
    name = "Pages",
    links = list(
      list(name = "Activity"),
      list(name = "News")
    )
  ),
  list(
    name = "More Pages",
    links = list(
      list(name = "Settings"),
      list(name = "Notes")
    )
  )
)

shinyApp(
  ui = fluidPage(
    Nav(
      groups = link_groups,
      selectedKey = "key1",
      styles = navigation_styles,
      onRenderGroupHeader = JS("group => React.createElement('h3', null, group.name)")
    )
  ),
  server = function(input, output) {
  }
)

Hope this helps

[zilch42]

perfect thank you