I need to make a clean Responsive Navigation

Question

Following the HTML code for the same

<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
<div class="menu-btn__burger"></div>
</button>
<div class="menu-main-menu-container">
  <ul id="primary-menu" class="menu">
    <li class="menu-item "><a href="home/">Home</a></li>
    <li class="menu-item" ><a href="about">About <span class=\"plus-minus\">+</span></a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="basics/">Basic</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children"><a href="products" aria-current="page">Products <span class="plus-minus">+</span></a>
      <ul class="sub-menu">
        <li  class="menu-item"><a href="Product-1">Product-1</a></li>
        <li  class="menu-item "><a href="Product-2">Product-2</a></li>
        <li  class="menu-item "><a href="Product-3">Product-3</a></li>
        <li  class="menu-item "><a href="Product-4">Product-4</a></li>
        <li  class="menu-item "><a href="Product-5">Product-5</a></li>
        <li  class="menu-item "><a href="Product-6">Product-6</a></li>
      </ul>
    </li>
    <li  class="menu-item"><a href="contact-us/">Contact Us</a></li>
  </ul>
</div>

Following is the code in the Navigation JS

/**
 * File navigation.js.
 *
 * Handles toggling the navigation menu for small screens and enables TAB key
 * navigation support for dropdown menus.
 */
( function() {
    const siteNavigation = document.getElementById( 'site-navigation' );

    // Return early if the navigation doesn't exist.
    if ( ! siteNavigation ) {
        return;
    }

    const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];

    // Return early if the button doesn't exist.
    if ( 'undefined' === typeof button ) {
        return;
    }

    const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ];

    // Hide menu toggle button if menu is empty and return early.
    if ( 'undefined' === typeof menu ) {
        button.style.display = 'none';
        return;
    }

    if ( ! menu.classList.contains( 'nav-menu' ) ) {
        menu.classList.add( 'nav-menu' );
    }

    // Toggle the .toggled class and the aria-expanded value each time the button is clicked.
    button.addEventListener( 'click', function() {
        siteNavigation.classList.toggle( 'toggled' );

        if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
            button.setAttribute( 'aria-expanded', 'false' );
        } else {
            button.setAttribute( 'aria-expanded', 'true' );
        }
    } );

    // Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
    document.addEventListener( 'click', function( event ) {
        const isClickInside = siteNavigation.contains( event.target );

        if ( ! isClickInside ) {
            siteNavigation.classList.remove( 'toggled' );
            button.setAttribute( 'aria-expanded', 'false' );
        }
    } );

    // Get all the link elements within the menu.
    const links = menu.getElementsByTagName( 'a' );

    // Get all the link elements with children within the menu.
    const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

    // Toggle focus each time a menu link is focused or blurred.
    for ( const link of links ) {
        link.addEventListener( 'focus', toggleFocus, true );
        link.addEventListener( 'blur', toggleFocus, true );
    }

    // Toggle focus each time a menu link with children receive a touch event.
    for ( const link of linksWithChildren ) {
        link.addEventListener( 'touchstart', toggleFocus, false );
    }

    /**
     * Sets or removes .focus class on an element.
     */
    function toggleFocus() {
        if ( event.type === 'focus' || event.type === 'blur' ) {
            let self = this;
            // Move up through the ancestors of the current link until we hit .nav-menu.
            while ( ! self.classList.contains( 'nav-menu' ) ) {
                // On li elements toggle the class .focus.
                if ( 'li' === self.tagName.toLowerCase() ) {
                    self.classList.toggle( 'focus' );
                }
                self = self.parentNode;
            }
        }

        if ( event.type === 'touchstart' ) {
            const menuItem = this.parentNode;
            event.preventDefault();
            for ( const link of menuItem.parentNode.children ) {
                if ( menuItem !== link ) {
                    link.classList.remove( 'focus' );
                }
            }
            menuItem.classList.toggle( 'focus' );
        }
    }
}() );

This is by Underscores.me Also and addition to the code in the Customizer.js to add this "+" Dynamically.

The issue is in the mobile menu the parent link is not clickable. I want the to make the parent menu clickable in the mobile menu and the "+" to make the sub menu visible or display the sub-menu.. and also the "+" to change to "-"

I tried to modify the Navigation.js but use to issue me errors. Please help me with the same