vue---element实现收缩展开的侧边导航栏

需求描述：

如下图，可收缩、可展开的侧边导航栏，当收缩时，鼠标悬停在一级菜单时，出现二级菜单。

                   

解决方法：

设置标志【isCollapse】来控制展开和收缩图标的显示，当【isCollapse=true】时，侧标导航栏收缩，且标题“通讯录管理”不显示。当【isCollapse=false】时，侧标导航栏展开，且标题“通讯录管理”显示。

在展开和收缩图标上绑定点击事件【@click="isCollapse=true"】【@click="isCollapse=false"】

 
        
        
        通讯录管理
      
      
        
        
      

注意，收缩图标采用固定定位

.shrinkBtn {
        position: fixed;
        left: -18px;
        top: 38px;
        color: #151d41;
        margin-left: 100px;
        transform: rotate(180deg);
      }

完整代码：