7

If you are familiar with the shiny website, you'll notice that when you press the button to collapse the sidebar, it's showing bigger icons (but not completely hiding the sidebar.

Do you know how is this possible to code this?

I heard that the package shinyBS could be useful or bootstrap things, but I don't understand what it is.

Before collapsing: 

<body id="app" class="app ng-scope buffer-pinterest" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

enter image description here

And this (see highlighted text): enter image description here

After collapsing: 

<body id="app" class="app ng-scope buffer-pinterest nav-collapsed-min" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

enter image description here

M. Beausoleil
  • 3,141
  • 6
  • 29
  • 61

3 Answers3

9

You can accomplish that with a little help of two great libraries: shinydashboard (obtaining navbar based on AdminLTE bootstrap theme) and shinyjs (including neccessary class to the template). Working code below:

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu(menuItem('Test', icon = icon('phone'), tabName = 'sampletabname'))),
  dashboardBody(h3('Test app'),
                useShinyjs())
)

server <- function(input, output) {
  runjs('
        var el2 = document.querySelector(".skin-blue");
        el2.className = "skin-blue sidebar-mini";
        ')
}

shinyApp(ui, server)

EDIT: To solve the problem mentioned in the comment I play with visibility: hidden css style. New content of server part of the app (rest remains unchanged):

  runjs({'
        var el2 = document.querySelector(".skin-blue");
        el2.className = "skin-blue sidebar-mini";
        var clicker = document.querySelector(".sidebar-toggle");
        clicker.id = "switchState";
    '})

  onclick('switchState', runjs({'
        var title = document.querySelector(".logo")
        if (title.style.visibility == "hidden") {
          title.style.visibility = "visible";
        } else {
          title.style.visibility = "hidden";
        }
  '}))
jniedzwiecki
  • 196
  • 4
  • Awesome! Can the button (the one you clic on it to collapse the sidebar) stay in place? Right now, it's moving with the bar. This renders a chopped title. But not for the shinyapps.io website. – M. Beausoleil Dec 29 '16 at 17:12
  • 1
    I solved this by toggling the visibility of the title (clicking on sidebar collapse makes it invisible - style.visibility = "hidden" - and clicking it again makes it visible again. It might be suboptimal solution, but at least it works :D – jniedzwiecki Dec 29 '16 at 21:53
  • Thanks a lot, as an extra super bonus, can the sidebar collapse, but not the header? – M. Beausoleil Dec 30 '16 at 06:33
  • I don't want to hide the title. I don't want it to collapse. Is this possible. How do you get this information about the `.sidebar-toggle` etc.? – M. Beausoleil Jan 13 '17 at 20:49
  • `.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { display: block; margin-left: -15px; margin-right: -15px; font-size: 18px }` or `.main-header .logo .logo-mini {display: none}`? – M. Beausoleil Jan 13 '17 at 21:02
  • I have no idea whether collapsing of the title is possible. In general, since shinydashboard library is a port of [AdminLTE](https://almsaeedstudio.com/themes/AdminLTE/index2.html) bootstrap theme, you might find an anwser there. – jniedzwiecki Jan 17 '17 at 08:33
  • This was a great answer that helped me a lot! Thanks! – Andrew May 03 '17 at 13:12
  • Hi @M.Beausoleil, did you find an answer to non collapsible title? Thanks! – Aleharu Apr 25 '18 at 20:26
  • Not that satisfy my comment I posted earlier. Do you have an answer? – M. Beausoleil Apr 26 '18 at 18:48
  • 1
    I was struggling with understanding where .skin-blue comes from. Apparently this is changed when using a different theme (in my case black) so I had to change that. But asides from that, everything worked fine, thank you! – Adrian Jan 25 '22 at 16:09
2

Or you can insert that code in the javascript file e.g. sidebar.js inside the www folder (placed on the same level as server.R and ui.R)

$( document ).ready(function() {
  $(".skin-blue").addClass("sidebar-mini");
  $(".sidebar-toggle").click(function() {
    $(".logo").toggleClass("hidden");
  });
});

Then you need to load it in the page head, namely on top of your dashboardBody:

dashboardBody(
      tags$head(
        tags$script(src = "sidebar.js")
      ),
...

And you can not care about shinyjs

M.Dubel
  • 126
  • 1
  • 9
0

I've created collapsing sidebar using pure CSS and Bootstrap 4.

See below working snippet:

You can also check here on codepen: https://codepen.io/imharshm/pen/ZEePyyR

in codepen example, I've used SCSS.

.sidebar-wrapper {
  background: #fff;
  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.08);
  width: 60px;
  height: 100vh;
  position: absolute;
  top: 0;
  transition: all 0.35s ease;
  overflow: hidden auto;
  z-index: 9;
}

.sidebar-wrapper:hover,
.sidebar-wrapper.show {
  width: 300px;
}

@media (max-width: 599px) {
  .sidebar-wrapper {
    width: 0;
  }
}

.sidebar-wrapper #sidebar-container {
  width: 300px;
  height: 100%;
  position: absolute;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item {
  border: 0;
  border-left: 5px solid transparent;
  border-radius: 0 !important;
  color: #0c0c0c;
  padding: 0.5rem 0;
  padding-right: 0.5rem;
  min-height: 45px;
  border-top-color: rgba(206, 212, 218, 0.36) !important;
  border-bottom-color: rgba(206, 212, 218, 0.36) !important;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item.selected {
  border-left: 5px solid #196bd6;
  color: #196bd6;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item.brand-name {
  color: #1dc8cd;
  background: #26262d;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown button {
  border: 1px solid #ddd d;
  border-radius: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown .dropdown-menu {
  padding: 0;
  width: 200px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .change-workspace-dropdown .dropdown-menu .dropdown-item .handler-icon {
  font-size: 20px;
  margin-right: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .edit-workspace {
  color: #296bd6;
  font-size: 10px;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .plan-info {
  background: rgba(41, 107, 214, 0.09);
  border-radius: 15px;
  color: #296bd6;
  font-size: 10px;
  padding: 0.125rem 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .menu-icon {
  font-size: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 45px;
  width: 55px;
  padding-right: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .menu-collapsed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.5rem;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item .submenu-icon {
  display: inline-block;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
  content: "\f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
}

.sidebar-wrapper #sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
  content: "\f0d8";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}

.sidebar-wrapper #sidebar-container .list-group .sidebar-submenu {
  font-size: 0.9rem;
}

.sidebar-wrapper #sidebar-container .list-group .sidebar-submenu .list-group-item {
  height: 45px;
  padding-left: 30px;
}

.cursor-pointer {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="sidebar-wrapper">
  <div id="sidebar-container">
    <div class="h-100 d-flex flex-column">
      <ul class="list-group">
        <a href="#" class="list-group-item list-group-item-action brand-name">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <img class="menu-icon" src="https://imharshm.github.io/logo.png" />
            <div class="menu-collapsed">
              <span>IMHARSHM </span>
            </div>
          </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-briefcase"></span>
            <div class="menu-collapsed">
              <span>Switch Workspace <span class="edit-workspace ml-2">Edit</span></span>
              <div class="change-workspace-dropdown">
                <button class="dropdown-toggle" data-toggle="dropdown">
                  Change workspace
                </button>
                <ul class="dropdown-menu" id="linked-handles">
                  <li class="dropdown-item" href="#"> <span class="handler-icon fa fa-facebook-square"></span>
                    <span>Handler 1</span></li>

                  <li class="dropdown-item" href="#"><span class="handler-icon fa fa-instagram"></span><span>Handler 1</span></li>
                </ul>
              </div>
            </div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action analysis-list-item border-top">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-pencil"></span>
            <div class="menu-collapsed"><span>Improve Post</span> <span class="small">Optimise your
                Instagram Posts</span></div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action competitor-list-item">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-line-chart"></span>
            <div class="menu-collapsed"><span>Content Analysis</span> <span class="small">Analyse your
                competitor's strategy</span></div>
          </div>
        </a>
      </ul>

      <ul class="list-group mt-auto">
        <a href="#" class="list-group-item list-group-item-action border-top" data-backdrop="static" data-toggle="modal" data-target="#newWorkspaceModal">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-plus-square"></span>
            <div class="menu-collapsed"><span>New Workspace</span> <span class="small">Use a new Instagram
                Account</span></div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action pricing-list-item border-top">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-usd"></span>
            <div class="menu-collapsed">
              <span>Plan Details <span class="plan-info">Trial plan: 7 days left</span></span> <span class="small">Manage your subscriptions</span>
            </div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-smile-o"></span>
            <div class="menu-collapsed"><span>Apply Offer Code</span> <span class="small">Redeem your
                discount codes</span></div>
          </div>
        </a>

        <a href="#" class="list-group-item list-group-item-action border-top">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-question"></span>
            <div class="menu-collapsed"><span>Help</span> <span class="small">Let us help you use for better</span></div>
          </div>
        </a>

        <a class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-start align-items-center">
            <span class="menu-icon fa fa-user"></span>
            <div class="menu-collapsed"><span class="topbar-username">Profile</span> <span class="g-signout cursor-pointer small">Logout</span></div>
            <span class="submenu-icon ml-auto"></span>
          </div>
        </a>
      </ul>
    </div>
  </div>
</div>
imharshm
  • 17
  • 5