材料設計lite sidenav onhide只顯示圖標

我想做一個sidenav，當切換時，它不會完全隱藏sidenav，並會顯示代表每個標籤的圖標。材料設計lite sidenav onhide只顯示圖標

我的代碼是在這裏..

header .mdl-layout__drawer { 
 
    border-right: 0; 
 
} 
 
header .mdl-layout__drawer .mdl-layout-title { 
 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); 
 
} 
 
header .search input { 
 
    border-bottom: 0; 
 
} 
 
header .search label { 
 
    color: rgba(255, 255, 255, 0.6); 
 
} 
 
header .user_img { 
 
    border-radius: 24px; 
 
    width: 40px; 
 
} 
 

 
.sidenav { 
 
    background-color: #fff; 
 
    border-right: 0; 
 
} 
 
.sidenav .mdl-layout-title { 
 
    box-shadow: rgba(0, 0, 0, 0.13725) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.11765) 0px 1px 5px 0px; 
 
} 
 
.sidenav .mdl-navigation__link.active { 
 
    color: #2196F3; 
 
} 
 
.sidenav .mdl-navigation__link span { 
 
    padding-left: 16px; 
 
} 
 

 
.mdl-layout__content { 
 
    background-color: #e0e0e0; 
 
} 
 

 
.account_action .inner { 
 
    background-color: #fff; 
 
    font-size: 20px; 
 
} 
 
.account_action .inner .material-icon { 
 
    color: #2196F3; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css" rel="stylesheet"/> 
 
<link href="https://code.getmdl.io/1.2.1/material.blue-light_blue.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 

 
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer mdl-layout--fixed-header has-drawer"> 
 
    <header class="mdl-layout__header"> 
 
    <div class="mdl-layout__header-row"> 
 
     <span class="mdl-layout-title"> 
 
     <div class="mdl-textfield mdl-js-textfield search"> 
 
     <input class="mdl-textfield__input" type="text" id="search"> 
 
     <label class="mdl-textfield__label" for="search">Search</label> 
 
     </div> 
 
     </span> 
 
     <div class="mdl-layout-spacer"></div> 
 
     <!-- Right aligned menu below button --> 
 
     <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon"> 
 
     <i class="material-icons">arrow_drop_down</i> 
 
     </button> 
 

 
     <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right"> 
 
     <li class="mdl-menu__item">Some Action</li> 
 
     <li class="mdl-menu__item">Another Action</li> 
 
     <li disabled class="mdl-menu__item">Disabled Action</li> 
 
     <li class="mdl-menu__item">Yet Another Action</li> 
 
     </ul> 
 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/326334/profile/profile-80_2.jpg" alt="user_image" class="user_img"/> 
 
    </div> 
 
    </header> 
 
    <div class="mdl-layout__drawer sidenav"> 
 
    <span class="mdl-layout-title mdl-color--blue-500 mdl-color-text--blue-grey-50">Title</span> 
 
    <nav class="mdl-navigation"> 
 
     <a class="mdl-navigation__link" href=""><i class="material-icons">dashboard</i><span>DASHBOARD</span></a> 
 
     <a class="mdl-navigation__link" href=""><i class="material-icons">description</i><span>FORMS</span></a> 
 
     <a class="mdl-navigation__link active" href=""><i class="material-icons">account_box</i><span>MY ACCOUNT</span></a> 
 
    </nav> 
 
    </div> 
 
    <main class="mdl-layout__content"> 
 
    <div class="page-content"> 
 
     <div class="mdl-grid account_action"> 
 
     <div class="mdl-cell mdl-cell--4-col"><div class="inner"><i class="material-icons">person_add</i></div></div> 
 
     <div class="mdl-cell mdl-cell--4-col"><div class="inner"><i class="material-icons">group_add</i></div></div> 
 
     <div class="mdl-cell mdl-cell--4-col"><div class="inner"><i class="material-icons">color_lens</i></div></div> 
 
     </div> 
 
    </div> 
 
    </main> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>

的問題：我想sidenav要像給圖像中的sidenav這是一個sidenav沒有完全隱藏，並將顯示圖標表示每個鏈接。

是否可以在材料設計sidenav上做到這一點？