How to click at element in my side menu

Question

I've trying click at my element which it is on a side menu, after the click, the system opens a new window, which is like a frame. But, using Xpath, protractor clicks at the element (I can see it because the element turns yellow when the mouse is houver) but the windown doesn't open. I think protractor is click at the wrong place.

How can fix it?

the HTML:

<ul style="margin:10px 0 0 0; padding: 0">
            <li class="menu-content-item ng-star-inserted" title="Principal">
                <a class="ng-star-inserted">
                    <i class="" data-first="P"></i>
                    <span class="sidebar-title-menu"> Principal </span>
                    <i class="zmdi zmdi-chevron-right"></i>
                </a>
            </li>
        </ul>

I already tried:

browser.driver.manage().window().maximize();

and

const menuPrincipal = element(by.css('div[title=Principal]'));

I'm using protractor helper so my code is like this:

   async entraNoMeucomOLink() {
        try {
            const menuPrincipal = element(by.xpath('/html/body/application/pjmt-layout/div[1]/pjmt-bar/div/pjmt-menu-vertical/div[1]/div/ul/li/a/');
            protractorHelper.waitForElementVisibility(menuPrincipal, 'MENU PRINCIPAL NAO ESTA VISIVEL', 5000);
            browser.actions().mouseMove(elemento).click().perform();(menuPrincipal)
        }

The element is like this :

Answer 1

It's not clear what you want. I change your code. Try this one and give feedback, please)

  async entraNoMeucomOLink() {
     const menuPrincipal = $('.sidebar-title-menu');
     protractorHelper.waitForElementVisibility(menuPrincipal, 'MENU PRINCIPAL NAO ESTA VISIVEL', 5000);
     await menuPrincipal.click();
  }