tabs/pill Title ayarlama(CSS)

Arkadaşlar böyle açılır kapanır bir menüm var
Seçtiğimde active classı atanıyor ancak ben hangi <li> tıklarsam onun adını title kısmında yazdırsın istiyorum nasıl yapabilirim?
"Menü" kısmına seçtiğim <li> adını yazdırcam

<li class="nav-item pcno prenav-head"  id="showmenu">
                                        <a class="nav-link active">
                                            <ion-icon name="grid-outline" class="prenav-icon"></ion-icon>
                                            <span class="prenav-text">Menü</span>
                                        </a>
                                    </li>

<ul  class="nav nav-tabs social-menu-tabs mobileno prenav" id="social-menu-tabs" role="tablist">

                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active" id="index-tab" data-bs-toggle="tab" href="#index" role="tab" aria-controls="index" aria-selected="true">
                                            <svg class="olymp-home-icon">
                                                <use xlink:href="#olymp-home-icon"></use>
                                            </svg>
                                            Home
                                        <div class="ripple-container"></div></a>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="about-tab" data-bs-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">
                                            <svg class="olymp-info-icon">
                                                <use xlink:href="#olymp-info-icon"></use>
                                            </svg>
                                            About
                                        <div class="ripple-container"></div></a>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="statistics-tab" data-bs-toggle="tab" href="#statistics" role="tab" aria-controls="statistics" aria-selected="false">
                                            <svg class="olymp-stats-icon">
                                                <use xlink:href="#olymp-stats-icon"></use>
                                            </svg>
                                            Statistics
                                        </a>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="events-tab" data-bs-toggle="tab" href="#events" role="tab" aria-controls="events" aria-selected="false">
                                            <svg class="olymp-thunder-icon">
                                                <use xlink:href="#olymp-thunder-icon"></use>
                                            </svg>
                                            Events
                                        </a>
                                    </li>

                                </ul>
<script>
$(document).ready(function() {

        $('#showmenu').click(function() {
    
                $('.social-menu-tabs').slideToggle("fast");
        });
  });
    </script>

$('li.nav-item .nav-link').click(function(){
console.log($('.prenav-text').text())
var menuTitle = $('.prenav-text').text();
var degistir = $(this).attr('title')
$('.prenav-text').text(degisicek);

});

Teşekkürler deneyeceğim

@S4MEDYA; bir değişiklik yok yine aynı