鼠标悬停时sidenav将打开，鼠标悬停时以及鼠标悬停时sidenav应仅显示图标

Question

我想创建一个带有一些带有图标的菜单列表的sidenav，当鼠标悬停时，sidenav将打开，当鼠标悬停时，sidenav将关闭；当鼠标悬停时，它应显示菜单列表的图标，因此不应完全关闭sidenav。

    <mat-drawer-container class="example-container" fullscreen>
    <mat-drawer #drawer class="example-sidenav" mode="side">
    <button mat-raised-button><mat-icon>dashboard</mat-icon>Dash 
    board</button><br><br>
    <button mat-raised-button><mat-icon>settings</mat-icon>settings</button> 
    <br><br>
    <button mat-raised-button><mat-icon>dashboard</mat-icon>Dash 
    board</button><br><br>
    <button mat-raised-button><mat-icon>dashboard</mat-icon>Dash 
    board</button><br><br>
    <button mat-raised-button><mat-icon>dashboard</mat-icon>Dash 
    board</button><br><br> 
    <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
    </mat-drawer>

    <div class="example-sidenav-content">
    <button type="button" mat-button (click)="drawer.toggle()">
      Toggle sidenav
    </button>
    </div>

    </mat-drawer-container>

以下代码是CSS代码：

    .example-container {
     width: 500px;
     height: 400px;
      border: 1px solid rgba(0, 0, 0, 0.5);
    }

    .example-sidenav-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin-top: -170px;
    margin-left: -170px;
    }

    .example-sidenav {
    padding: 20px;
    }

以下是ts文件代码：

    import {Component} from '@angular/core';

    @Component({
    selector: 'sidenav-autosize-example',
    templateUrl: 'sidenav-autosize-example.html',
    styleUrls: ['sidenav-autosize-example.css'],
    })
    export class SidenavAutosizeExample {
    showFiller = false;

[

在这里，当我单击侧导航内容内部的切换按钮时，侧导航将打开，如果我再次单击则完全关闭。但是我想要的是第一件事，它应该只关闭一半并且只显示图标，当我将鼠标悬停时它应该打开，而当我移除鼠标时它应该关闭。