How to make Fluent UI Nav collapse horizontally

Question

I am starting to use shiny.fluent R package which based on Microsoft's Fluent UI to build an app, but I stuck at making Nav component collapse on click (the 1st link, Navbar icon) & on small screen size

Here is the sample code from shiny.fluent 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(
    links = list(
      list(key = "toggle_hide", icon = "GlobalNavButton"),
      list(
        name = "Home",
        expandAriaLabel = "Expand Home section",
        collapseAriaLabel = "Collapse Home section",
        links = list(
          list(
            name = "Activity",
            url = "http://msn.com",
            key = "key1",
            target = "_blank"
          ),
          list(
            name = "MSN",
            url = "http://msn.com",
            disabled = TRUE,
            key = "key2",
            target = "_blank"
          )
        ),
        isExpanded = TRUE
      ),
      list(
        name = "Documents",
        url = "http://example.com",
        key = "key3",
        isExpanded = TRUE
      ),
      list(
        name = "Pages",
        url = "http://msn.com",
        key = "key4"
      ),
      list(
        name = "Notebook",
        url = "http://msn.com",
        key = "key5",
        disabled = TRUE
      ),
      list(
        name = "Communication and Media",
        url = "http://msn.com",
        key = "key6"
      ),
      list(
        name = "News",
        url = "http://cnn.com",
        icon = "News",
        key = "key7",
        target = "_blank",
        iconProps = list(
          iconName = "News",
          styles = list(
            root = list(
              fontSize = 20,
              color = "#106ebe"
            )
          )
        )
      )
    )
  )
)

shinyApp(
  ui = withReact(
    Nav(
      groups = link_groups,
      selectedKey = "key1",
      styles = navigation_styles
    )
  ),
  server = function(input, output) {
  }
)

My desire visual output is:

Please help me on this issue, I still cannot found any available solutions online

score 2 · Accepted Answer · answered Jun 22 '21 at 11:12

2

I achieved this by using transition on hover instead of a expand button. Check the change I made in style. The nested menu is going to be a problem with this method though.

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


        //TRYOUT THE CODE BELOW
        transition: 'width 0.3s ease-in-out',
        selectors: {
                     ':hover':{
                         width: '100%'
                      }
                   }
        )
     )

answered Jun 22 '21 at 11:12

Avinash L

167
2
15

I used some JS to update CSS, but your answer is much simpler, thanks a lot – jonekeat Jun 23 '21 at 15:59
I tried you code as well but it does not ín my case. I think my issue is that the Navbar is positioned in a grid-contained. Could that be causing this issue? Thank you! – BlackPearl Feb 21 '22 at 21:00

How to make Fluent UI Nav collapse horizontally

1 Answers1