php - 当用户单击折叠侧边栏按钮时，仅在侧边栏上显示图标

Question

目前我的侧边栏在展开视图上的工作方式如下图所示： 展开的侧边栏

这就是我折叠侧边栏时发生的情况： 折叠侧边栏

现在我想要的是显示侧边栏菜单（如果有的话），如下图所示（作为参考）： 期望的折叠侧边栏视图示例

我一直在玩css，但没有发生任何事情，这告诉我我可能会使用一些php代码，但我对此知之甚少，所以我在这里寻求任何人的帮助。

这是我的侧边栏的代码

{if $THEME_CONFIG.display_sidebar}
    <!--Start Page Container and Responsive Sidebar -->
    <div id='sidebar_container' class="container-fluid sidebar_container">

        <a id="buttontoggle" class="buttontoggle"><span></span></a>

        <div {if $smarty.cookies.sidebartoggle|default:'' == 'collapsed'}style="display:none"{/if}
             class="sidebar">

                <div id="actionMenuSidebar" class="actionMenuSidebar">
                    {foreach from=$moduleTopMenu item=module key=name name=moduleList}
                        {if $name == $MODULE_TAB}
                            <ul>
                                {if isset($shortcutTopMenu.$name) && is_array($shortcutTopMenu)
                                    && count($shortcutTopMenu.$name) > 0}
                                    <h2 class="recent_h3">{$APP.LBL_LINK_ACTIONS}</h2>
                                    {foreach from=$shortcutTopMenu.$name item=item}
                                        {if $item.URL == "-"}
                                            <li><a></a><span>&nbsp;</span></li>
                                        {else}
                                            <li class="actionmenulinks" role="presentation">
                                                <a href="{$item.URL}" data-action-name="{$item.MODULE_NAME}">
                                                    <div class="side-bar-action-icon">
                                                        <span class="suitepicon suitepicon-action-{$item.MODULE_NAME|lower|replace:'_':'-'}"></span>
                                                    </div>
                                                    <div class="actionmenulink">{$item.LABEL}</div>
                                                </a>
                                            </li>
                                        {/if}
                                    {/foreach}
                                {/if}
                            </ul>
                        {/if}
                    {/foreach}
                </div>

                <div id="recentlyViewedSidebar" class="recentlyViewedSidebar">
                    {if is_array($recentRecords) && count($recentRecords) > 0}
                    <h2 class="recent_h3">{$APP.LBL_LAST_VIEWED}</h2>
                    {/if}
                    <ul class="nav nav-pills nav-stacked">
                        {foreach from=$recentRecords item=item name=lastViewed}
                            {if $item.module_name != 'Emails' && $item.module_name != 'InboundEmail' && $item.module_name != 'EmailAddresses'}<!--Check to ensure that recently viewed emails or email addresses are not displayed in the recently viewed panel.-->
                                {if $smarty.foreach.lastViewed.index < 5}
                                    <div class="recently_viewed_link_container_sidebar">
                                        <li class="recentlinks" role="presentation">
                                            <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">
                                                <span class="suitepicon suitepicon-module-{$item.module_name|lower|replace:'_':'-'}"></span>
                                                <span>{$item.item_summary_short}</span>
                                            </a>
                                            <a href="{sugar_link module=$item.module_name action='EditView' record=$item.item_id link_only=1}" class="recent-links-edit"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                        </li>
                                    </div>
                                {/if}
                            {/if}
                        {/foreach}
                    </ul>
                </div>
                 <div id="favoritesSidebar" class="favoritesSidebar">
                {if is_array($favoriteRecords) && count($favoriteRecords) > 0}
                    <h2 class="recent_h3">{$APP.LBL_FAVORITES}</h2>
                {/if}
                    <ul class="nav nav-pills nav-stacked">
                        {foreach from=$favoriteRecords item=item name=lastViewed}
                            {if $smarty.foreach.lastViewed.index < 5}
                            <div class="recently_viewed_link_container_sidebar">
                                <li class="recentlinks" role="presentation">
                                    <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">
                                        <span class="suitepicon suitepicon-module-{$item.module_name|lower|replace:'_':'-'}"></span>
                                        <span aria-hidden="true">{$item.item_summary_short}</span>
                                    </a>
                                    <a href="{sugar_link module=$item.module_name action='EditView' record=$item.id link_only=1}" class="favorite-links-edit"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                </li>
                            </div>
                            {/if}
                        {/foreach}
                    </ul>
                </div>
</div>
</div>

我希望侧边栏在折叠时为 50px 宽并隐藏侧边栏中的所有文本并仅显示具有相同固定大小的图标并仅在用户单击展开图标时再次展开，

标签： phpcsssidebar