Animated Responsive Sidenav in Angular | Part 1 | Responsive Sidenav

In this video we'll create an animated responsive side navigation bar from scratch using angular.
_________________________________________________
Project helper:
github.com/Angular-istic/Proj...
_________________________________________________
Commands used
To generate components :
ng g c body --skip-tests true
ng g c sidenav --skip-tests true
ng g c dashboard --skip-tests true
ng g c products --skip-tests true
ng g c statistics --skip-tests true
ng g c coupens --skip-tests true
ng g c pages --skip-tests true
ng g c media --skip-tests true
ng g c settings --skip-tests true
_________________________________________________
If you think there's a better way to improve this code, please let us know in the comments.
If you like this video please subscribe to Angularistic, like and share this video.

[@marcio9161]

This was the most confuse angular tutorial that I've ever seen, but the result was amazing

[@bronwynpotgieter7405]

Looks super sleek! Thank you!

[@FirstnameLastname-we6kg]

Something different than using angular material. Thanks👍👍

[@jacobokomo6077]

Thanks a lot. A this is what i like the most about this build. No Material, just plain SCSS!
Could you explain, I would love it more when you speak and explain a bit.

[@techsoft1578]

For people facing issue with the nav bar not being expanding just set the .sidenav class width to 5rem :) hope it helps

[@billchavez4874]

30 min solving this issue

[@edfurtado6637]

very good, amazing, my friend, I want to use bootstrap in the project and modal componet, but when installing and using the compoment it doesn't cover all screens, refactoring the code, it's due to the fixed position of the sidenav menu, if you change this attribute it breaks the structure, how do I solve it?

[@antoniolincolnmsjunior7636]

great layout bro!! thank you

[@ferrywijaya6404]

Hello sir thanks for sharing this tutorial.
i got some problem sir, when i resize the form, the navbar cannot automatically display like above video example. the text keep in selected styleClass and only change if i click refresh browser button.

[@leonelperez1943]

You are a genius! thanks!

[@mejaay4077]

Are there any way to convert sidenav bar into header bar when resize the screen?

[@edilsonfilho5721]

When I do click on button "A" to expand, the button reduce own size for a moment, then back to the normal size

[@nikitakumari5302]

Hey I dont, know why but when I open dashboard sidenav bar disappears.

[@MrBoBrilO]

Can you enable routing for these somehow so data on different tabs is loaded dynamically when adding/editing/deleting (from the database)?

[@shubhamtehare]

yes i added crud table for sidenav links which will add edit delete export data by using spring boot backend

[@H4LIL_G]

thats great :)

[@lamyabenammar3050]

thanks a lot! I hope it works for me.

[@sureshthalluru2012]

Hey Angularistic team,
Can you tell me, which versions of Angularjs, Nodejs, typescript, rxjs is used here in this application.
It will be helpful for us.
Thanks.
Suresh

[@user-xb8es7ld9u]

Everything is working good. Except that on click on the component, the icon is barely visible and the size is small as compared to in the video.
The styling is same no error but still getting this.
Anyone faces this??

[@VinayTiwari-gn3ps]

Nice content

[@Alexander-um9vd]

hey bro , great job !! a question , How can I make the navigation bar allow opening links from external pages?

[@Alexander-um9vd]

i just got it, thanks

[@srafa16]

The icons don't appear can someone help me?

[@pkyadav4628]

Angular material used or bootstrap

[@naiomi5532]

hello i wanna ask it'is possible to update to angular 17 ?

[@VinayTiwari-gn3ps]

Much better

[@SHEFAT-xq3ge]

my response in navbar is not working. need source code

[@benmakhloufaya5037]

Can we use this with CSS? Because I use CSS, not SCSS

[@AbdulSamad-rt2bj]

how to get other icons name

[@basmaeladnany6064]

For the people who click on the sidenav and the body content doesnt go to the right ( the sidenav hides the content) just do like the video and try emptying the browser's cache, for me it worked on private navigation, but didn't work on normal until i cleared it. hope it helps

[@aymenwedherfi881]

i'm having same problem and can't fix it

[@ydct1544]

Hello, when clicking on the first button to expand the menu, the body element does not move to the right.
ngOnInit(): void {
this.screenWidth = window.innerWidth;
}
I have reviewed all the code and it is the same as yours, it is the only thing I am missing. Can you help me? I'm using Angular 16.0.2. Will it be because of the Angular version?

[@salonimalkani2934]

same problem with me...did you got the solution??please let me know

[@ydct1544]

@@salonimalkani2934 No, I haven't been able to fix the problem yet. I think it has to do with the variable this.screenWidth which, even though it changes its value, this value doesn't get passed to body.component, as if the interface between components is failing in some way.

[@salonimalkani2934]

@@ydct1544 okay no issues thanks fir replying

[@kishoret1411]

Make sure in app.component.html @18.30 the code should be inside the closing tag of .

[@eclipsehunter]

@@kishoret1411 thanks brother

[@heitkrr]

is it normal to a component to every button like you did? or its better to create just one and use it for every sidebar button?

[@fabiobrizzi1738]

better to have component for each

[@BethellJack]

why?
@@fabiobrizzi1738

[@salonimalkani2934]

hey can you help me with one thing??plzzz

[@enriquemaestre2950]

Muchas gracias!! lo logré

[@ydct1544]

Felicitaciones, amigo, cuando haces clic en el botón principal empuja a la derecha el contenido principal?, te funciona esa parte?

[@luiszelphmorenoruiz1845]

Amigo, que version de Angular estas usando, a mi no me esta funcionando lo del router-outlet en body

[@janickspielmann2695]

Is there no sound, or is it my pc? There does not have to be sound, but just wandering.

[@juliofrancadasilva5504]

My page doesn't move the element to the left when I click, is there a css problem? I'm using ngOnInit and it's not working

[@saradhieb9640]

same

[@youssefhasbi1]

@@saradhieb9640 same problem if you have solution show me

[@saradhieb9640]

@@youssefhasbi1 yes you just need to update the width of .sidenav element and reduce it ( try different width until you get the width you want )

[@danielgoful]

I speak Spanish, but a few weeks ago I went through the same thing, I think my solution was this
getBodyClass(): string {
let classStyle = '';
if(this.collapsed && this.screenWidth > 768)
{
styleClass = 'trimmed-body';
}
else if(this.collapsed && this.screenWidth 0)
{
styleClass = 'body-md-screen';
}
return style class;
}

[@ydct1544]

@@danielgoful Hola, pero no entiendo cual fue tu solución, me ayudas?

[@nurte4]

hi, can u share github repo

[@david_mosquera6207]

Someone got the error with OnInit, the dashboard does not run for me when the sidenav is opened

[@itsmhasnatawan]

Same happened with me

[@bavrzar8576]

What theme for vscode is used in the video?

[@angularistic]

Night Owl

[@bavrzar8576]

Thanks! 🥰@@angularistic

[@jhairdanielosoriogarzon9830]

Hi need Help

[@virokalu]

Guys, Use Angular version 16 or lower to work with this tutorial smoothly.

[@s.m.faizanraza1729]

source code link ?

[@elliotalderson1604]

left the full code please

[@babatundeadenowo7568]

Almost broke my headphones out of frustration. bs.

[@jhonquistiano4531]

che culey no lo pasas

[@LarsRyeJeppesen]

In body component: getBodyClass() is being call ayyyyyyyyyyy lot of times, it will really be nasty for performance.

[@ferrywijaya6404]

have any option for that sir?