свернутого sidenav в угловом 2 с материалом 2

Question

Я занимаюсь разработкой SideNav использованием Угловое 2 и материал 2,

Он смотрит в открытом состоянии, как показано ниже,

Но Закрыть state скрыть весь навигатор, вместо этого хочу только скрыть текст меню, но не значок.

Посмотрите на мой код,

<md-toolbar color="primary"> 
 
    <button md-icon-button (click)="start.toggle()"> 
 
     <md-icon>menu</md-icon> 
 
    </button>Test Project 
 
    <button md-icon-button (click)="logout()"> 
 
     <md-icon>exit_to_app</md-icon> 
 
    </button> 
 
</md-toolbar> 
 

 
<md-sidenav-layout class="left-navigation"> 
 
    <md-sidenav #start mode="side" opened="true"> 
 
    <md-nav-list> 
 
     <a [routerLink]="view.link" md-list-item *ngFor="let view of views" (click)="sidenav.close()"> 
 
     <md-icon md-list-icon>{{view.icon}}</md-icon> 
 
     <span md-line>{{view.name}}</span> 
 
     </a> 
 
    </md-nav-list> 
 
    </md-sidenav> 
 
    <div class="demo-sidenav-content"> 
 
    <router-outlet></router-outlet> 
 
    </div> 
 
</md-sidenav-layout>

Answer 1

Если бы ту же задачу, и это, как я решить:

md-sidenav-container { 
    min-width: 60px; 
} 

md-sidenav { 
    transform: translate3d(0, 0, 0); 
} 

md-sidenav.mat-sidenav-closed { 
    visibility: visible; 
} 

UPDATE: Решение выше, имеет побочный эффект - Navbar никогда не богатство государства «открыто» & «закрыто», если срабатывает хотя бы один раз. Он имеет промежуточные состояния «открытие» & «закрытие».

Чтобы получить его работать и анимации завершенные используется более Hacky решение:

md-sidenav-container { 
    background-color: transparent; 
    min-width: 60px; 
} 

md-sidenav { 
    width: 230px; 
    background-color: transparent; 
} 

.mat-sidenav-closed md-nav-list, 
.mat-sidenav-closing md-nav-list { 
    margin-left: 230px; 
    width: 230px; 
    visibility: visible; 
} 

:host >>> .mat-sidenav-focus-trap>.cdk-focus-trap-content { 
    overflow-y: visible; 
} 

Единственное различие по внешнему виду это поведение анимации. Но для меня это еще приятнее :)

Answer 2

Вы можете последовать примеру plunker я связан в этом мерзавца вопрос здесь: click

Это похоже на то, что вам нужно, но значки находятся на другой стороне сиденава, поэтому вам понадобится больше анимации, чтобы сохранить эту структуру.

Но я уверен, что это даст вам представление о том, как свернуть сиденав, оставив часть его все еще видимой.