Angular 2材料设计可折叠Sidenav没有背景覆盖

Question

我想创建一个sidenav，它在鼠标悬停时展开悬停并折叠，仅显示图标。我正在使用md-sidenav，但我认为使用md-sidenav是不可能的，因为它覆盖背景并且完全关闭在外面点击

<md-sidenav-container style="position:absolute;top:0;">
    <md-sidenav #sidenav class="sidenav">
        <md-nav-list>
            <a style="margin-left:25%">
                <img src="../Content/Images/angular2-logo-red.png" height="150" width="150"/>
            </a>
            <a md-list-item>
                <md-icon md-list-icon>Home</md-icon>
                <span md-line>Home</span>
                <span md-line class="secondary">Home</span>
            </a>
            <a md-list-item>
                <md-icon md-list-icon>list</md-icon>
                <span md-line>Categories</span>
                <span md-line class="secondary">Categories</span>
            </a>
            <a md-list-item>
                <md-icon md-list-icon>bookmark</md-icon>
                <span md-line>Tags</span>
                <span md-line class="secondary">Tags</span>
            </a>
            <a md-list-item>
                <md-icon md-list-icon>question_answer</md-icon>
                <span md-line>Questions</span>
                <span md-line class="secondary">Questions</span>
            </a>
        </md-nav-list>
    </md-sidenav>

我希望看到同样的东西 this Picture

怎么可能？