如何使 Fluent UI Nav 水平折叠

Question

我开始使用基于 Microsoft 的 Fluent UI 的 shiny.fluent R 包来构建应用程序，但我坚持制作导航组件 点击折叠（第一个链接，导航栏图标）和小屏幕尺寸

这是来自 shiny.fluent 示例的示例代码：

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) {
  }
)

我想要的视觉输出是：

请帮我解决这个问题，我仍然无法在网上找到任何可用的解决方案

Answer 1

我通过在悬停时使用过渡而不是展开按钮来实现这一点。检查我在风格上所做的改变。不过，嵌套菜单会成为这种方法的问题。

    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%'
                      }
                   }
        )
     )