Оптимизировать sidebar?

Question

[pro100blich]

Имеется sidebar на Bootstrape.
Помогите сделать чтобы когда нажимаешь "Cкрыть меню(блок)", checkbox тоже менял форму и аналогично в обратную сторон.

<span id="collapse-icon" class="fa fa-2x mr-3"></span>

заменить на

<input type="checkbox" class="custom-control-input" id="customSwitch1">

Как сделать анимацию чтобы сворачивался ну не прям резко, а плавно sidebar?

HTML

<div id="sidebar-container" class="sidebar-expanded d-none d-md-block "id="sticky-sidebar">
        <ul class="list-group sidenav sticky-top">
            <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
                <small>MAIN MENU</small>
            </li>
           <a href="#" class="bg-dark list-group-item list-group-item-action ">
                <div class="d-flex w-100 justify-content-start align-items-center  ">
                    <span class="fa fa-dashboard fa-fw mr-3 "></span>
                    <span class="menu-collapsed  icon-sidbar5">test</span>
                </div>
            </a>
    
            <a href="#submenu2" data-toggle="collapse" aria-expanded="false" class="bg-dark list-group-item list-group-item-action flex-column align-items-start ">
                <div class="d-flex w-100 justify-content-start align-items-center ">
                    <span class="fa fa-user fa-fw mr-3"></span>
                    <span class="menu-collapsed">test</span>
                    <span class="submenu-icon ml-auto"></span>
                </div>
            </a>
            <div id='submenu2' class="collapse sidebar-submenu">
                <a href="#" class="list-group-item list-group-item-action bg-dark text-white">
                    <span class="menu-collapsed">test1</span>
                </a>
                <a href="#" class="list-group-item list-group-item-action bg-dark text-white">
                    <span class="menu-collapsed">test1</span>
                </a>
            </div>
            <a href="#" class="bg-dark list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-start align-items-center">
                    <span class="fa fa-tasks fa-fw mr-3 "></span>
                    <span class="menu-collapsed">test</span>
                </div>
            </a>
             <a href="#" class="bg-dark list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-start align-items-center">
                    <span class="fa fa-tasks fa-fw mr-3"></span>
                    <span class="menu-collapsed">test</span>
                </div>
            </a>

            <a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
              <div class="d-flex w-100 justify-content-start align-items-center">
                    <span id="collapse-icon" class="fa fa-2x mr-3"></span>
                    <span id="collapse-text" class="menu-collapsed">Скрыть меню</span>
                </div>
            </a>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1"></label>
</div>
 </ul>
    </div>

CSS

#body-row {
    margin-left:0;
    margin-right:0;
}
#sidebar-container {
    min-height: 100vh;   
    background-color: #333;
    padding: 0;
}

/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    width: 230px;
}
.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: white;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}
.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    background-color: #333;
    height: 35px;
}
.sidebar-separator {
    background-color: #333;
    height: 25px;
}
.logo-separator {
    background-color: #333;    
    height: 60px;
}

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

JS

// Hide submenus
$('#body-row .collapse').collapse('hide'); 

// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left'); 

// Collapse click
$('[data-toggle=sidebar-colapse]').click(function() {
    SidebarCollapse();
});

function SidebarCollapse () {
    $('.menu-collapsed').toggleClass('d-none');
    $('.sidebar-submenu').toggleClass('d-none');
    $('.submenu-icon').toggleClass('d-none');
    $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
    
    // Treating d-flex/d-none on separators with title
    var SeparatorTitle = $('.sidebar-separator-title');
    if ( SeparatorTitle.hasClass('d-flex') ) {
        SeparatorTitle.removeClass('d-flex');
    } else {
        SeparatorTitle.addClass('d-flex');
    }
    
    // Collapse/Expand icon
    $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}

Comments

[xdevelx]

#sidebar-container .list-group .sidebar-submenu a - когда видишь такие селекторы, дальше вникать в суть проблемы и не хочется.
toggleClass('d-none') display: none не анимируется, зато анимируется width, height, opacity, transform и другие.
У jQuery есть методы slideToggle(), fadeToggle(), toggle()

[Alex]

Когда вижу много кода, который автор не удосужился засунуть в песочницу — даже не читаю суть вопроса :)