CODEWITHSUNDEEP
angular
Wall-E
Wall-E

Reputation: 527

Make a responsive sidenav in angular 8

So, i'm trying to make a responsive sidenav IN ANGULAR, WITHOUT MATERIAL, with the same 'responsivity' that we can find in https://angular.io. In my project i make the top nav and side nav as new components and put them in my app.component along with the page content, but i dont know if this separation was the better approach, because the problem that i'm facing seems more like in component communication.

In full screen it works perfectly, but i want it to close the sidenav when screen width reaches 700px or less. But i'm having complications on how to do this.

Here is my github repo: https://github.com/wallysoncarvalho/mygymcoach-web

Upvotes: 0

Views: 288

Answers (2)

Laphaze
Laphaze

Reputation: 386

You could try something like this :

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

It's only CSS with no JS libs

There will be potentially an update to do on with a margin-padding to make it fully responsive, however this link is a good base to start implementing a responsive only CSS sidenav.

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

Upvotes: 1

androbin
androbin

Reputation: 1759

You can use simple css to do that. On the other hand for old browsers you cannot change the order of the elements on the site without grid.

In the angular's CDK there is MediaMatcher. It does the css media matching job in JS. You can subscribe to it, and change the mobile view.

This is not part of the material. You only need @angular/cdk, and only a part of the will be used, so the bundle size will stay low.

Upvotes: 1

Related Questions