0

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

abdullahalali
  • 396
  • 2
  • 5
  • 18
Wall-E
  • 438
  • 1
  • 6
  • 18
  • Why not just use CSS with @media breakpoints like this? https://stackblitz.com/edit/angular-rp6fqm – Sean Chase Nov 14 '19 at 23:38
  • what i'm trying to do its a little more complicated. it like my top nav component is the one controlling the sidevan position... – Wall-E Nov 14 '19 at 23:46

2 Answers2

1

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.

androbin
  • 1,622
  • 14
  • 31
  • 1
    wrote a small demo on cdk's media matcher about two years ago, [check it out](https://stackoverflow.com/a/48841964/3933927) – Stavm Nov 14 '19 at 23:29
  • 1
    well, i was trying at all cost to do this without any addicional lib. but i cant find a better solution. Thanks for the tip ! – Wall-E Nov 14 '19 at 23:30
1

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;
}
Laphaze
  • 278
  • 1
  • 6
  • i liked this one, but i still wanna try and do the other way. i dont think i'm gonna get it with only css, although i'd like to. – Wall-E Nov 15 '19 at 14:38