Why aren't the dropdowns displaying in this menu?

The code is a refactoring (sort of) of an existing codepen to incorporate BEM naming. The codepen can be found at: https://codepen.io/tutsplus/pen/bGVPVrY.  As it stands, the menu seems to work except the submenu items are not displaying. Experts' help in debugging this issue would be wonderful?
Also, since this is my first venture into namespacing/BEM notation,  any thoughts, comments, opinions or advice would be appreciated.
HTML

  <header class="l-header">
        <div class="c-banner">
          <div class="c-banner__logo">
            <a  href="./index.htm"><img src="./_img/graphics/logos/serena-logo-lg.svg" 
                srcset="./_img/graphics/logos/serena-logo-sm.svg 360w,
                        ./_img/graphics/logos/serena-logo-md.svg 576w,
                        ./_img/graphics/logos/serena-logo-lg.svg 992w"
                sizes="(min-width:144.0rem) 15vw,
                        (min-width: 76.8rem) 14vw,
                        (min-width: 0) 40vw" 
              alt="Serena Construction Logo">
            </a>
          </div>
          <div class="c-banner__button js-button">
            <a href="#"><ion-icon name="menu-sharp"></ion-icon></a>
          </div>
        </div>

        <nav>
          <div class="c-navbar">
            <div class= "c-navbar__items">
              <div class="c-navbar__items--link has-submenu">
                <a tabindex="1">PROPERTIES</a>
                <div class="c-navbar__subitems">
                    <div class="c-navbar__subitems--link">
                      <a href="./properties/kirkland.htm">KIRKLAND</a>
                    </div>
                    <div class="c-navbar__subitems--link">
                     <a href="./properties/bellevue.htm">BELLEVUE</a>
                    </div>
                </div>
              </div>
              <div class="c-navbar__items--link">
                <a href="./gallery.htm" tabindex="2">GALLERY</a>
              </div>
              <div class="c-navbar__items--link has-submenu">
                <a tabindex="3" >ABOUT</a>
                <div class="c-navbar__subitems">
                  <div class="c-navbar__subitems--link">
                    <a href="./serena.htm">SERENA</a>
                  </div>
                  <div class="c-navbar__subitems--link">
                    <a href="./team.htm">TEAM</a>
                  </div>
                  <div class="c-navbar__subitems--link">
                    <a href="./testimomials.htm">TESTIMONIALS</a>
                  </div>
                </div>
              </div>
              <div class="c-navbar__items--link"><a href="./news.htm" tabindex="4">NEWS</a>
              </div>
              <div class="c-navbar__items--link"><a href="./contact.htm" tabindex="5">CONTACT</a>
              </div>
            </div> 
         </div>
        </nav>
      </header>

Select allOpen in new window

SCSS

.l-header {
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 50vw;
    padding-bottom: 1rem;
    background-color: $brand-white;
}

.c-banner {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    height: auto;                    //auto;
    padding: 2rem;
    background: $brand-white;
    border-bottom: .4rem $brand-gold solid;

    &__logo {
        width: calc(15vw + .1rem);
    }

    &__button {
        text-decoration: none;
        
        & a ion-icon {
            font-size: 5rem;
            color: $black-black;
        }
    }
}



.c-navbar {
    display: block;
    width: 33vw;                            //100vw;
    height: 100vh;                  
    background: #000;               

    &__items {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        padding: 0 4rem;
        font-family: $font-family-base;
        font-size: calc(#{$font-size-base} * .875);
        font-weight: 300;
        
        &--link {
            display: none;
            width: 100%;
            text-align: left;
            text-decoration: none;
            color: $brand-white;
            padding: 2.5rem 0;
        
            & a {
                display: block;
                color: $brand-white;
                text-decoration: none;
            }

            & a:hover {
                display: block;
                color: $brand-gold;
            }

            & a:active {                                // not needed
                display: block;
                color: $cool-grey;
            }

            & .has-submenu {

                & > a::after {
                    font-family: "Ionicons";
                    font-size: 1.2rem;
                    line-height: 1.6rem;
                    font-weight: 900;
                    content: "caret-down";
                    color: white;
                    padding-left: .5rem;
                }
             }
        } 
    }

    &__subitems {
        margin: 0;
        padding: 0;
        font-family: $font-family-base;
        font-size: calc(#{$font-size-base} * .875);
        font-weight: 300;
           text-align: left;
           text-decoration: none;
       
    
        &--link a {
            display: none;
            outline: 1px red solid;                        
            padding: 1rem 1.5rem;
            color: $brand-gold;

            &:hover {
                color: green;
            }
        }
    }
}
    

// show menu items
.active .c-navbar__items--link {
    display: block;
}

// show submenu items
.submenu-active .c-navbar__subitems--link {
    display: block;
}

Select allOpen in new window

JS

/* js-toggleNav
** ***************************************************************** */
const button = document.querySelector(".js-button");
const menu = document.querySelector(".c-navbar__items");
const items = document.querySelectorAll(".c-navbar__items--link");  //returns node list

// Toggle mobile menu 
function toggleMenu() {
    if (menu.classList.contains("active")) {
        menu.classList.remove("active");
        button.querySelector("a").innerHTML = "<ion-icon name='menu'></ion-icon>";
    } else {
        menu.classList.add("active");
        button.querySelector("a").innerHTML = "<ion-icon name='close-sharp'></ion-icon>";
    }
}


// Activate Submenu 
function toggleItem() {
  if (this.classList.contains("submenu-active")) {

    let listA = this.classList;
    if(listA) {
      console.log(listA);
    }else{
      console.log("listA is null");
    }

    this.classList.remove("submenu-active");
  } else if (menu.querySelector(".submenu-active")) {
    menu.querySelector(".submenu-active").classList.remove("submenu-active");
    this.classList.add("submenu-active");
  } else {
    this.classList.add("submenu-active");
  }
}

// Close Submenu From Anywhere 
function closeSubmenu(e) {
  let isClickInside = menu.contains(e.target);
  if (!isClickInside && menu.querySelector(".submenu-active")) {
    menu.querySelector(".submenu-active").classList.remove("submenu-active");
  }
}

// Event Listeners 
button.addEventListener("click", toggleMenu, false);
for (let item of items) {
  if (item.querySelector(".c-navbar__subitems")) {
    item.addEventListener("click", toggleItem, false);
  }
  item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);

Select allOpen in new window