Add sidebarUserPanel

[osenan]

Add component similar to shinydashboard::sidebarUserPanel using shiny.semantic components.

The sidebarUserPanel is a UI component from shinydashboard that creates visualization of an user trough an image - modified with boostrap - and some content, name for the user name and subtitle that allows for a subtitle that can contain html content.

This app shows an example of the sidebarUserPanel.

library(shiny)
library(shinydashboard)

header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebarUserPanel("User Name",
                   subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
                   # Image file should be in www/ subdir
                   #image = paste image name here
  sidebarSearchForm(label = "Enter a number", "searchText", "searchButton"),
  sidebarMenu(
    # Setting id makes input$tabs give the tabName of currently-selected tab
    id = "tabs",
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
             badgeColor = "green"),
    menuItem("Charts", icon = icon("bar-chart-o"),
             menuSubItem("Sub-item 1", tabName = "subitem1"),
             menuSubItem("Sub-item 2", tabName = "subitem2")
    )
  )
)

body <- dashboardBody(
  tabItems(
    tabItem("dashboard",
            div(p("Dashboard tab content"))
    ),
    tabItem("widgets",
            "Widgets tab content"
    ),
    tabItem("subitem1",
            "Sub-item 1 tab content"
    ),
    tabItem("subitem2",
            "Sub-item 2 tab content"
    )
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body),
  server = function(input, output) { }
)

For better visualization of the sidebarUserPanel please create a www folder in your app root directory and paste a user image there. Then refer in the image argument to the image name there, without the need of including the www path.

The function for semantic.dashboard should allow for at least similar arguments (image, name and subtitle and use Fomantic UI css instead of Boostrap.

[osenan]

WIP branch sidebar_user_panel contains a first iteration fo semantic.dashboard sidebar_user_panel

Right now the function allows for an image, title and subtitle. It is using Fomantic UI css to format the user image circularly. An addition to this function is that the user can control the size of the image with the argument image_size using different Fomantic UI image sizes. Additionally, there is a modification sidebar_menu for correctly allowing the sidebar_user_panel to have html content.

This is an example app with the new function (assuming you are working with siderbar_user_panel branch:

devtools::load_all("../semantic.dashboard")
library(shiny)

header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebar_user_panel("User Name",
                   subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
                   # Image file should be in www/ subdir
                   image = "lucaturilli.jpeg", image_size = "mini"
  ),
  sidebarMenu(
    # Setting id makes input$tabs give the tabName of currently-selected tab
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets"),
    menuItem("Charts", icon = icon("bar-chart-o"),
             menuSubItem("Sub-item 1", tabName = "subitem1"),
             menuSubItem("Sub-item 2", tabName = "subitem2")
    )
  )
)

body <- dashboardBody(
  tabItems(
    tabItem("dashboard",
            div(p("Dashboard tab content"))
    ),
    tabItem("widgets",
            "Widgets tab content"
    ),
    tabItem("subitem1",
            "Sub-item 1 tab content"
    ),
    tabItem("subitem2",
            "Sub-item 2 tab content"
    )
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body),
  server = function(input, output) { }
)

Again, it is recommended for developing to create a www subfolder and fill the image parameter to visualize how the user image is styled.

The next step would be to improve the styling so that the new sidebar_user_panel has correct margin from the border of the sidebar. After this is done, we need to add documentation, examples and modify the NAMESPACE.