feat: 优化 site 模式在 iPad 等设备上的阅读体验

[helsonxiao]

Description

目前 site 模式的侧边栏无法收起（过宽），且 toc 区域过窄，在 iPad 等设备上阅读时，有效阅读区域很不合理，希望优化布局方式与显示效果。

Solution

我可以提 PR，但需要确定后再改（外部人员改 UI 一来一回会比较慢），如果 dumi 团队有空的话希望帮忙直接优化。下面是 dumi 与 docusaurus 的显示对比。

docusaurus

dumi

在目前主题布局的实现下，内容区域和 toc 的宽度没法根据屏幕宽度做合理的伸缩，CSS 调整起来非常麻烦，效果也一般。希望 dumi 更多关注下“阅读体验”。

如果可能的话，增加翻页和多层级目录等功能，虽然说可以通过重写 layout 等组件自定义实现一些功能，但还是希望这些基础功能可以自带。

[PeachScript]

感谢建议，iPad 的阅读体验确实没有验证过

回到具体解决方案：

1. iPad 宽度下内容区域较小，建议解法：iPad 下将 toc 强制渲染在左侧菜单内比收起侧边菜单更合适？这样在扩大内容区域的同时 toc 和菜单的功能性都能保留
2. 左侧菜单宽度定制，建议解法：dumi 有内置 Less 变量，可以通过 theme 传入变量控制宽度，但目前没有响应式规则，可以加上，比如 iPad 下侧边菜单为标准 PC 的 80% 宽之类的

我可以提 PR，但需要确定后再改（外部人员改 UI 一来一回会比较慢），如果 dumi 团队有空的话希望帮忙直接优化

欢迎 PR，dumi 是开源项目，所有 Contributors 就是 dumi 团队 :)

[helsonxiao]

1. iPad 宽度下内容区域较小，建议解法：iPad 下将 toc 强制渲染在左侧菜单内比收起侧边菜单更合适？这样在扩大内容区域的同时 toc 和菜单的功能性都能保留
2. 左侧菜单宽度定制，建议解法：dumi 有内置 Less 变量，可以通过 theme 传入变量控制宽度，但目前没有响应式规则，可以加上，比如 iPad 下侧边菜单为标准 PC 的 80% 宽之类的

我觉得这个解决方案挺好的，我可能要最快下周开始处理。