title: show only icons on sidebar when user clicks on collapse sidebar button
body: <p>Currently my sidebar is working like this on expanded view as shown in picture below:
  <a href="https://i.stack.imgur.com/P6Vuq.png" rel="nofollow noreferrer">expanded sidebar</a></p>
  
  <p>and this is what happens when i collapse the sidebar :
  <a href="https://i.stack.imgur.com/PsHbb.png" rel="nofollow noreferrer">collapsed sidebar</a></p>
  
  <p>now what i want is to display sidebar menus (if any) as shown in this picture (as reference) below:
  <a href="https://i.stack.imgur.com/00wYj.png" rel="nofollow noreferrer">desired collapsed sidebar view example</a></p>
  
  <p>I've been playing with css but nothing is happening which tells me that i might use some php code but i don't have much knowledge about that so here i am looking for any help from anyone.</p>
  
  <p>here is the code of my sidebar</p>
  
  <pre><code>{if $THEME_CONFIG.display_sidebar}
      &lt;!--Start Page Container and Responsive Sidebar --&gt;
      &lt;div id='sidebar_container' class="container-fluid sidebar_container"&gt;
  
          &lt;a id="buttontoggle" class="buttontoggle"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
  
          &lt;div {if $smarty.cookies.sidebartoggle|default:'' == 'collapsed'}style="display:none"{/if}
               class="sidebar"&gt;
  
                  &lt;div id="actionMenuSidebar" class="actionMenuSidebar"&gt;
                      {foreach from=$moduleTopMenu item=module key=name name=moduleList}
                          {if $name == $MODULE_TAB}
                              &lt;ul&gt;
                                  {if isset($shortcutTopMenu.$name) &amp;&amp; is_array($shortcutTopMenu)
                                      &amp;&amp; count($shortcutTopMenu.$name) &gt; 0}
                                      &lt;h2 class="recent_h3"&gt;{$APP.LBL_LINK_ACTIONS}&lt;/h2&gt;
                                      {foreach from=$shortcutTopMenu.$name item=item}
                                          {if $item.URL == "-"}
                                              &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
                                          {else}
                                              &lt;li class="actionmenulinks" role="presentation"&gt;
                                                  &lt;a href="{$item.URL}" data-action-name="{$item.MODULE_NAME}"&gt;
                                                      &lt;div class="side-bar-action-icon"&gt;
                                                          &lt;span class="suitepicon suitepicon-action-{$item.MODULE_NAME|lower|replace:'_':'-'}"&gt;&lt;/span&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="actionmenulink"&gt;{$item.LABEL}&lt;/div&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                          {/if}
                                      {/foreach}
                                  {/if}
                              &lt;/ul&gt;
                          {/if}
                      {/foreach}
                  &lt;/div&gt;
  
                  &lt;div id="recentlyViewedSidebar" class="recentlyViewedSidebar"&gt;
                      {if is_array($recentRecords) &amp;&amp; count($recentRecords) &gt; 0}
                      &lt;h2 class="recent_h3"&gt;{$APP.LBL_LAST_VIEWED}&lt;/h2&gt;
                      {/if}
                      &lt;ul class="nav nav-pills nav-stacked"&gt;
                          {foreach from=$recentRecords item=item name=lastViewed}
                              {if $item.module_name != 'Emails' &amp;&amp; $item.module_name != 'InboundEmail' &amp;&amp; $item.module_name != 'EmailAddresses'}&lt;!--Check to ensure that recently viewed emails or email addresses are not displayed in the recently viewed panel.--&gt;
                                  {if $smarty.foreach.lastViewed.index &lt; 5}
                                      &lt;div class="recently_viewed_link_container_sidebar"&gt;
                                          &lt;li class="recentlinks" role="presentation"&gt;
                                              &lt;a title="{$item.module_name}"
                                                 accessKey="{$smarty.foreach.lastViewed.iteration}"
                                                 href="{sugar_link module=$item.module_name action='DetailView' record=$item.item_id link_only=1}"
                                                 class="recent-links-detail"&gt;
                                                  &lt;span class="suitepicon suitepicon-module-{$item.module_name|lower|replace:'_':'-'}"&gt;&lt;/span&gt;
                                                  &lt;span&gt;{$item.item_summary_short}&lt;/span&gt;
                                              &lt;/a&gt;
                                              &lt;a href="{sugar_link module=$item.module_name action='EditView' record=$item.item_id link_only=1}" class="recent-links-edit"&gt;&lt;span class="glyphicon glyphicon-pencil" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
                                          &lt;/li&gt;
                                      &lt;/div&gt;
                                  {/if}
                              {/if}
                          {/foreach}
                      &lt;/ul&gt;
                  &lt;/div&gt;
                   &lt;div id="favoritesSidebar" class="favoritesSidebar"&gt;
                  {if is_array($favoriteRecords) &amp;&amp; count($favoriteRecords) &gt; 0}
                      &lt;h2 class="recent_h3"&gt;{$APP.LBL_FAVORITES}&lt;/h2&gt;
                  {/if}
                      &lt;ul class="nav nav-pills nav-stacked"&gt;
                          {foreach from=$favoriteRecords item=item name=lastViewed}
                              {if $smarty.foreach.lastViewed.index &lt; 5}
                              &lt;div class="recently_viewed_link_container_sidebar"&gt;
                                  &lt;li class="recentlinks" role="presentation"&gt;
                                      &lt;a title="{$item.module_name}" accessKey="{$smarty.foreach.lastViewed.iteration}" href="{sugar_link module=$item.module_name action='DetailView' record=$item.id link_only=1}" class="favorite-links-detail"&gt;
                                          &lt;span class="suitepicon suitepicon-module-{$item.module_name|lower|replace:'_':'-'}"&gt;&lt;/span&gt;
                                          &lt;span aria-hidden="true"&gt;{$item.item_summary_short}&lt;/span&gt;
                                      &lt;/a&gt;
                                      &lt;a href="{sugar_link module=$item.module_name action='EditView' record=$item.id link_only=1}" class="favorite-links-edit"&gt;&lt;span class="glyphicon glyphicon-pencil" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/div&gt;
                              {/if}
                          {/foreach}
                      &lt;/ul&gt;
                  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>I want sidebar to be 50px wide on collapse and hide all text in sidebar and display only icons with same fixed size and expande again when and only if user clicks on expand icon,</p>