How to Side Navigation Menu Expand and Collapse

1. Paste Below Code you page level execute when page loads section

(function($) {
    
$(window).on('theme42ready', function() {
    /* Make sure that the navigation menu is collapsed on page load */
    if ($('.t-PageBody').hasClass('js-navExpanded')) {
        $('#t_Button_navControl').click();
    }

    /* Expand on mouse over, collapse on mouse out */
    $('.apex-side-nav .t-Body-nav').hover(
        function(){
            //only expand if the side menu is collapsed
            $('.t-PageBody:not(.js-navExpanded) #t_Button_navControl').click();
        },
        function() {
            $('#t_Button_navControl').click();
        }
    );
});

})(apex.jQuery);



above for auto expand and collapse

2. Below CSS code are used to show title on hover on icon


   /* menu collapse show hover*/
   
    .js-navCollapsed .t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content.is-hover .a-TreeView-label {
visibility: visible;
left: 48px;
padding: 0 16px;
width: auto; 
background-color: #0459a1; /* This would be your primary color */
}

.apex-side-nav.js-navCollapsed .t-Body-nav
, .apex-side-nav.js-navCollapsed .t-Body-nav .t-TreeNav {
    z-index: 1100; /* Make it appear on top of the page content */
}