Html ECSS中sidenav的可扩展迷你版

我想在图像中创建一个sidenav（在“mini variant”下进行了描述），但在（HTML、CSS和）eCSS中创建一个sidenav。怎样才能做到呢

迷你抽屉：

---

扩展抽屉：

实现它有什么运气吗？因为这似乎是一个很好的UI，而不是完全封闭的侧导航。请分享。