侧边栏折叠为图标时导航栏文本溢出

导航栏如下:

<nav id="sidebar" [ngClass]="{active: barActive}">
        <div id="toogleIcon" (click)="onDismiss()">
            <img id="closeIcon" *ngIf="barActive" class="" src="../assets/img/icons/1.svg">
            <span id="menuIcon">
                <img *ngIf="!barActive" class="" src="../assets/img/icons/2.svg">
            </span>
        </div>

        <ul class="list-unstyled components">
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/clients">
                    <img class="navItemsSvg" src="../assets/img/icons/A.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">A</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/users">
                    <img class="navItemsSvg" src="../assets/img/icons/B.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">B</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/houses">
                    <img class="navItemsSvg" src="../assets/img/icons/C.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">C</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/devices">
                    <img class="navItemsSvg" src="../assets/img/icons/D.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">D</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/administration">
                    <img class="navItemsSvg" src="../assets/img/icons/F.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">F</span>
                </a>
            </li>
        </ul>
    </nav>
    <div id="barPlaceholder"></div>

你可以在这里看到:

http://jsfiddle.net/36mjqc5v/

这似乎是css属性的问题。但我不确定是什么原因造成的。