在角度8中做出响应性的导航

Question

因此，我正在尝试以无材料的角度用英语制作一个响应性的导航，具有与https://angular.io中相同的'响应度'。 在我的项目中，我将顶部导航和侧面导航作为新组件，并将它们与页面内容一起放入我的app.component中，但是我不知道这种分离是否是更好的方法，因为我面临的问题似乎更多就像在组件通信中一样。

在全屏模式下，它可以完美运行，但是我希望它在屏幕宽度达到700像素或更小时关闭sidenav。但是我在执行此操作时遇到了麻烦。

这是我的github存储库：https://github.com/wallysoncarvalho/mygymcoach-web

Answer 1

您可以使用简单的CSS来做到这一点。另一方面，对于旧的浏览器，如果没有网格，则无法更改网站上元素的顺序。

在角度的CDK中有MediaMatcher。它在JS中执行CSS媒体匹配工作。您可以订阅它，并更改移动视图。

这不是材料的一部分。您只需要@ angular / cdk，并且仅会使用的一部分，因此捆绑包的尺寸将保持较低。

Answer 2

您可以尝试这样的事情：

https://codepen.io/mildrenben/pen/GJgMvQ

这是唯一没有JS库的CSS

可能会有一个更新，以进行边距填充以使其完全响应，但是此链接是开始实施仅响应式CSS sidenav的良好基础。

h1 {
    width: 100%;
    color: white;
    background: #16a085;
    padding: 50px 0 50px 60px;
    font-size: 24px;
}