<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/three-r-shiny-tricks-to-make-your-shiny-app-shines-23-semi-collapsible-sidebar/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://antoineguillot.wordpress.com/2017/02/21/three-r-shiny-tricks-to-make-your-shiny-app-shines-23-semi-collapsible-sidebar/"> R – Enhance Data</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<h3>EDIT:</h3>
<p>Actually there is a much easier way to do so, by just adding the code below to the UI:<br>
<em>tags$script(HTML(“$(‘body’).addClass(‘sidebar-mini’);”))</em></p>
<p>Thanks at @_pvictorr for suggesting it!</p>
<h3>Original post:</h3>
<p>In this tutorials sequence, we are going to see three tricks to do the following in a Shiny app:</p>
<ol>
<li><a target="_blank" rel="nofollow" href="https://antoineguillot.wordpress.com/2017/02/15/three-r-shiny-tricks-to-make-your-shiny-app-shines-13/">Add Next and Previous buttons to navigate in a tabBox</a></li>
<li>Build a non completely collapsible sidebar to keep the icon visible on collapse</li>
<li>Add button on a datatable output to delete/modify/ do an action on a given row.</li>
</ol>
<p>Today, we are going to see ho to build a semi-collapsible sidebar.</p>
<h3>2.Semi-collapsible sidebar</h3>
<p>We are trying to build a semi-collapsible side which only show the icon instead of completely hiding the sidebar when clicking on the collapse button. You can see an animated example below:</p>
<p><img data-image-description="" data-orig-file="https://i1.wp.com/antoineguillot.files.wordpress.com/2017/02/exemplearrowshiny1.gif?w=456&amp;ssl=1" data-orig-size="454,350" data-image-title="exemplearrowshiny" class="wp-image-1047" data-comments-opened="1" data-recalc-dims="1" data-attachment-id="1047" data-permalink="https://antoineguillot.wordpress.com/2017/02/21/three-r-shiny-tricks-to-make-your-shiny-app-shines-23-semi-collapsible-sidebar/exemplearrowshiny-2/" alt="ExempleArrowShiny.gif" data-medium-file="https://i1.wp.com/antoineguillot.files.wordpress.com/2017/02/exemplearrowshiny1.gif?w=456&amp;ssl=1?w=300" data-large-file="https://i1.wp.com/antoineguillot.files.wordpress.com/2017/02/exemplearrowshiny1.gif?w=456&amp;ssl=1?w=454" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" src="https://i1.wp.com/antoineguillot.files.wordpress.com/2017/02/exemplearrowshiny1.gif?w=456&ssl=1"></p>
<h4><strong>a. What you need to build this:</strong></h4>
<p>As in the previous tutorial you only need R with its package Shiny and Shiny Dashboard. We’ll use R, some javascript and some CSS to manage to do this.</p>
<h4><strong>b. It all starts with a Dashboard</strong></h4>
<p>We just need a classic Shiny app, with an ui.R file containing a dashboard and a server.R file.</p>
<ol>
<li>The sidebar menu will be put in the server since we want to be able to hide it when clicking on the collapse button (and we want to be able to remove text from it when hiding it). In addition to this, putting it in the server can be useful if you want to change the sidebar dynamically in your server.</li>
<li>We are linking the application with a CSS file to change the way the sidebar appearance change on collapse.</li>
</ol>
<p><em>ui.R file</em></p>
<pre>
library(shiny)
library(shinydashboard)

dashboardPage(
 dashboardHeader(title=&quot;Semi-collapsible Sidebar&quot;),
###point 1.
 dashboardSidebar(sidebarMenuOutput(&quot;Semi_collapsible_sidebar&quot;)),
###point 2.
 dashboardBody(tags$head(tags$link(rel = &quot;stylesheet&quot;,
type = &quot;text/css&quot;, href = &quot;style.css&quot;)))
)
</pre>
<p> </p>
<p><em>server.R file</em></p>
<pre>
library(shiny)
library(shinydashboard)
shinyServer(function(input,output){

 output$Semi_collapsible_sidebar=renderMenu({

 sidebarMenu(
    menuItem(&quot;Dashboard&quot;, tabName = &quot;dashboard&quot;, icon = icon(&quot;dashboard&quot;)),
    menuItem(&quot;Widgets&quot;, icon = icon(&quot;th&quot;), tabName = &quot;widgets&quot;,
      badgeLabel = &quot;new&quot;,
      badgeColor = &quot;green&quot;),
    menuItem(&quot;Charts&quot;, icon = icon(&quot;bar-chart-o&quot;),
    menuSubItem(&quot;Sub-item 1&quot;, tabName = &quot;subitem1&quot;),
    menuSubItem(&quot;Sub-item 2&quot;, tabName = &quot;subitem2&quot;)
 ))

})
</pre>
<p> </p>
<h4><strong>c. Creating the CSS file:</strong></h4>
<p>The semi-collapsed bar needs:</p>
<ul>
<li>To show only the icons from the uncollapsed sidebar.</li>
<li>To be narrower to free space.</li>
</ul>
<p>When performing the collapse action, Shiny is translating the sidebar by its width in piwel to the left (which hides it).<br>
To achieve the semi-collapsed sidebar, the new CSS will overwrite the previous translation to no translation and change the sidebar width to 40px (this is the icon width).</p>
<p>To do this, create a www/ folder in your working directory and put the following style.css file in it.</p>
<pre>.sidebar-collapse .left-side, .sidebar-collapse .main-sidebar{ 
 transform: translate(0,0);
 width: 40px;
}
</pre>
<p>Start your app again, the sidebar is semi-collapsing ! However the text is still there and the new label is going over the icon. We need to hide all of these on collapse !</p>
<h4><strong>d. Hiding the text and badge on collapse:</strong></h4>
<p>To hide the text on collapse, Shiny needs to know that the sidebar is collapsed. To do so, we will add a Shiny Input that will respond to a click on the collapse button.</p>
<pre>
tags$script(&quot;$(document).on('click', '.sidebar-toggle',
function () {
Shiny.onInputChange('SideBar_col_react', Math.random())
});&quot;)
</pre>
<p>‘.sidebar-toggle’ is the button class.Hence,if the button is clicked, a random number is generated and assigned to <em>input$SideBar_col_react</em>.<br>
The script above need to be added in the ui.R after the <em>DashboardSidebar()</em>.</p>
<pre>
vals=reactiveValues()
vals$collapsed=FALSE
observeEvent(input$SideBar_col_react,
{ vals$collapsed=!vals$collapsed }
) </pre>
<p>Now, we need to observe this input and to decide whether or not the sidebar is collapsed. So we will create a reactive value with a collapsed attribute which will be <em>True</em> is the sidebar is collapsed, and<em> False</em> otherwise. To do so, you can add the previous script before <em>output$Semi_collapsible_sidebar.</em></p>
<p>Now that the server know whether or not the sidebar is collapsed. The sidebar will change according to this value using this code:</p>
<pre>
output$Semi_collapsible_sidebar=renderMenu({
 if (vals$collapsed)
   sidebarMenu(
    menuItem(NULL, tabName = &quot;dashboard&quot;, icon = icon(&quot;dashboard&quot;)),
    menuItem(NULL, icon = icon(&quot;th&quot;), tabName = &quot;widgets&quot;),
    menuItem(NULL, icon = icon(&quot;bar-chart-o&quot;),
    menuSubItem(span(class=&quot;collapsed_text&quot;,&quot;Sub-item 1&quot;), tabName = &quot;subitem1&quot;),
    menuSubItem(span(class=&quot;collapsed_text&quot;,&quot;Sub-item 2&quot;), tabName = &quot;subitem2&quot;)
 ))
 else
   sidebarMenu(
    menuItem(&quot;Dashboard&quot;, tabName = &quot;dashboard&quot;, icon = icon(&quot;dashboard&quot;)),
    menuItem(&quot;Widgets&quot;, icon = icon(&quot;th&quot;), tabName = &quot;widgets&quot;, badgeLabel = &quot;new&quot;,
    badgeColor = &quot;green&quot;),
    menuItem(&quot;Charts&quot;, icon = icon(&quot;bar-chart-o&quot;),
    menuSubItem(&quot;Sub-item 1&quot;, tabName = &quot;subitem1&quot;),
    menuSubItem(&quot;Sub-item 2&quot;, tabName = &quot;subitem2&quot;)
  ))
 })
})
</pre>
<p>Basically, if <em>vals$collapsed</em> is <em>true</em>, the labels will be set to <em>NULL</em> and the badge will be hidden. Otherwise, the sidebar will be showed as previously.</p>
<h4><strong>e. Why can’t I uncollapse the menuSubItem ?</strong></h4>
<p>To be frank, I don’t know (If anyone has a clue, please comment) . There is a way to be able to collapse it back using this .</p>
<pre>
tags$script(&quot;$(document).on('click', '.treeview.active', function () {
 $(this).removeClass('active');
 $(this).find( 'ul' ).removeClass('menu-open');
 $(this).find( 'ul' ).css('display', 'none');
});&quot;)),
</pre>
<p>When the menu-item is active, it is getting the class <em>active</em>. So, when clicking on such an element, the script removes all the attribute linked to the menu-item being open and hide it using the CSS display option.</p>
<h4><strong>f. Improving the aspect</strong></h4>
<p>Right now the collapse is not smooth and when hovering the text in the menu items, it is whitish (over white) which is not great. To improve it, we will just modify the CSS to this:</p>
<pre>.sidebar-collapse .left-side, .sidebar-collapse .main-sidebar{ 
 transform: translate(0,0);
 width: 40px;
 transition: transform 1s, width 1s;
}

.collapsed_text { 
 color: black;
}

.main-sidebar, .left-side
{
 transition: transform 1s, width 1s;
}
</pre>
<p> </p>
<p>The .collapsed_text is a custom class we created at step c.</p>
<h4><strong>g. Comments</strong></h4>
<p>I think all of this could also be done using js and css only.<br>
However, handling the collapse on the server side allow us to do more advanced things like hiding/showing the sidebar programmatically, changing what the server display depending on the sidebar status and even showing different semi-collapsed/not-collapsed sidebar (Which can be useful from a UI/UX point of view).</p>
<p><strong>You can find the code <a target="_blank" rel="nofollow" href="https://gitlab.com/ant-guillot/SemiCollapsibleSidebar">HERE</a>.</strong></p>
<p>Thanks for reading the tutorial,<br>
Antoine</p>
<p>You can follow me on Twitter:</p>
<p><a data-text-color="#111111" target="_blank" class="twitter-follow-button" data-link-color="#0093c2" rel="nofollow" href="https://twitter.com/AntGuilllot" data-show-count="false">Follow @AntGuilllot</a></p>
<p> </p>
<p> <a target="_blank" rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/antoineguillot.wordpress.com/1041/"><img alt="" src="http://feeds.wordpress.com/1.0/comments/antoineguillot.wordpress.com/1041/" border="0"></a> <img alt="" src="https://i1.wp.com/pixel.wp.com/b.gif?resize=1%2C1&ssl=1" border="0" data-recalc-dims="1"></p>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://antoineguillot.wordpress.com/2017/02/21/three-r-shiny-tricks-to-make-your-shiny-app-shines-23-semi-collapsible-sidebar/"> R – Enhance Data</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/-M-fIHWEfh4"></a></div>