How to use shiny.fluent to achieve functionalities along similar lines as semantic.dashboard?

[AlexPars]

Package semantic.dashboard provides a very useful modular setup through functions dashboardHeader, dashboardSidebar, dashboardBody

Is there a way to use shiny.fluent functions to construct a header, sidebar and body for a Shiny app, along the same lines as the 3 functions (from package semantic.dashboard) mentioned above?

[jakubsob]

Hello @AlexPars!

shiny.fluent doesn't have counterparts of those functions, but you can recreate such layout using CSS grid. It's slightly less convenient, but it's much more robust and allows to create more complicated layouts as well. See the following example:

library(shiny)
library(shiny.fluent)

ui <- fluentPage(
  tags$style(HTML('
    .grid-container {
      display: grid;
      grid-template-columns: 320px 1fr;
      grid-template-rows: 60px 1fr;
      grid-template-areas:
        "header header"
        "sidebar body";
      height: 100vh;
    }

    .header {
      grid-area: header;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-color: #fff;
      padding: 6px 0px 6px 10px;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: #fff;
      padding: 25px;
      position: fixed;
      top: 60px;
    }

    .body {
      grid-area: body;
      background-color: #faf9f8;
      padding: 25px;
      max-width: calc(100vw - 320px);
      max-height: calc(100vh - 60px);
      overflow: auto;
    } 
  ')),
  div(
    class = "grid-container",
    div(
      class = "header",
      h1("Header")
    ),
    div(
      class = "sidebar",
      h2("Sidebar")
    ),
    div(
      class = "body", 
      h2("body")
    )
  )
)

server <- function(input, output, session) { }

shinyApp(ui, server)

You need to create a container with display: grid and specify grid columns and rows. Cells in the grid can have classes assigned using grid-template-areas, which then you can style any way you want. Then placing elements in divs header, sidebar and body works in similar way as dashboardHeader, dashboardSidebar and dashboardBody would.

In case you are interested in collapsible sidebar functionality, see the following example:

library(shiny)
library(shiny.fluent)

ui <- fluentPage(
  tags$head(
    tags$script(HTML("
    $(function() {
      $('#toggleSidebar').on('click', function () {
        const sidebarLeft = $('.sidebar').css('left');
        const newLeft = sidebarLeft == '0px' ? '-320px' : '0px';
        const newMargin = sidebarLeft == '0px' ? '0px' : '320px';
        $('.sidebar').css('left', newLeft);
        $('.body').css('margin-left', newMargin);
      });
    });
  "))
  ),
  tags$style(HTML('
    .grid-container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 60px 1fr;
      grid-template-areas:
        "header"
        "body";
      height: 100vh;
    }

    .header {
      grid-area: header;
      display: flex;
      flex-direction: row;
      gap: 30px;
      align-items: center;
      background-color: #fff;
      padding: 6px 0px 6px 10px;
    }

    .sidebar {
      background-color: #fff;
      padding: 25px;
      position: fixed;
      top: 60px;
      left: 0px;
      transition: 0.5s;
    }

    .body {
      grid-area: body;
      background-color: #faf9f8;
      padding: 25px;
      margin-left: 320px;
      max-width: 100%;
      max-height: calc(100vh - 60px);
      overflow: auto;
      transition: 0.5s;
    } 
  ')),
  div(
    class = "grid-container",
    div(
      class = "header",
      h1("Header"),
      PrimaryButton.shinyInput("toggleSidebar", text = "Menu")
    ),
    div(
      class = "sidebar",
      h2("Sidebar")
    ),
    div(
      class = "body", 
      h2("body")
    )
  )
)

server <- function(input, output, session) { }

shinyApp(ui, server)

It requires a bit of Javascript to make things work as well as some adjustments in CSS.

CSS and Javascript are included inside R code, to make examples more compact, but you can extract them to separate files.

Are those examples sufficient for you to recreate mentioned layout? If you have any more questions just let me know.

[jjfantini]

How would you split the javascript scripts into another file with golem, you could use golem::add_js_file(), but how would you then link the action to the button?

[jakubsob]

Hi @jjfantini,

in that case you could just extract the JS code:

 $('#toggleSidebar').on('click', function () {
  const sidebarLeft = $('.sidebar').css('left');
  const newLeft = sidebarLeft == '0px' ? '-320px' : '0px';
  const newMargin = sidebarLeft == '0px' ? '0px' : '320px';
  $('.sidebar').css('left', newLeft);
  $('.body').css('margin-left', newMargin);
});

to the newly created JS file:

$( document ).ready(function() {
   $('#toggleSidebar').on('click', function () {
    const sidebarLeft = $('.sidebar').css('left');
    const newLeft = sidebarLeft == '0px' ? '-320px' : '0px';
    const newMargin = sidebarLeft == '0px' ? '0px' : '320px';
    $('.sidebar').css('left', newLeft);
    $('.body').css('margin-left', newMargin);
  });
});

[NicoBarti]

This is great Jakubsob, thanks!