JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul class="menu responsive-menu">
    {if $cfg.show_home}
        
    {/if}
 {assign var="last_level" value=0}   
    {foreach key=key item=item from=$items}
        {if $item.NSLevel == $last_level}</li>{/if}
        {math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
        {section name=foo start=0 loop=$tail step=1}
            </li></ul>
        {/section}
        {if $item.NSLevel <= 1}
            <li class="{if $item.id==23}raspolozhenie {/if}{if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}current{/if}">
        {/if}
        {if $item.NSLevel <= 1}
<a href="{$item.link}" target="{$item.target}" class="{$item.iconurl}" title="{$item.title|escape:'html'}">{$item.title}</a>
        {else}
            {if $item.NSLevel > $last_level}<ul>{/if}
                <li {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight))}class="current"{/if}>
<a href="{$item.link}" target="{$item.target}" class="{$item.iconurl}" title="{$item.title|escape:'html'}">{$item.title}</a>
        {/if}
        {assign var="last_level" value=$item.NSLevel}
    
    {/foreach}
        </li></ul>
</nav>

JavaScript

(function($){
    
    //plugin's default options
    var settings = {
        prependTo: 'nav',                //insert at top of page by default
        switchWidth: 768,                //width at which to switch to select, and back again
        topOptionText: 'Выберите пункт меню:'    //default "unselected" state
    },
    
    menuCount = 0,                        //used as a unique index for each menu if no ID exists
    uniqueLinks = [];                    //used to store unique list items for combining lists
    //go to page
    function goTo(url){document.location.href = url;}
    
    //does menu exist?
    function menuExists(){return ($('.mnav').length) ? true : false;}
    //validate selector's matched list(s)
    function isList($this){
        var pass = true;
        $this.each(function(){
            if(!$(this).is('ul') && !$(this).is('ol')){
                pass=false;
            }
        });
        return pass;
    }//isList()
    //function to decide if mobile or not
    function isMobile(){return ($(document).width() < settings.switchWidth);}
    
    //function to get text value of element, but not it's children
    function getText($item){return $.trim($item.clone().children('ul, ol').remove().end().text());}
    
    //function to check if URL is unique
    function isUrlUnique(url){return ($.inArray(url, uniqueLinks) === -1) ? true : false;}
    //function to create options in the select menu
    function createOption($item, $container, text){
        //if no text param is passed, use list item's text, otherwise use settings.groupPageText
        var $selected, $disabled, $sel_text;
        
        if ($item.hasClass('current')) $selected='selected';
        if ($item.hasClass('disabled')) {
            if ($('.current').length) $disabled='disabled';
            else $disabled='selected';
        }
        
        $sel_text=$.trim(getText($item));
        $sel_text = $sel_text.replace('›', '');
        if ($item.parent('ul...