Create a YouTube sidebar clone with Angular Material Components! (Part 2) 

You're welcome 🤗

Glad it was helpful, Daniel! Will be posting the third and last part soon as well :)

Is it a horizontal scrollbar? Also, is it scrolling by small amount or more than that? Having the scroll usually means there is more content than what can be shown in that width. So you can try increasing the width a bit to accommodate any extra space so the scrollbar disappears. Or you can simply disable scroll by using overflow hidden instead of auto

@@ZoaibKhan Yes, it is a horizontal scrollbar, but why it appears just in my project, while I did all steps as you shown?! I set navbar's width to auto, and the width increased to about 100px, that is not nice for collapsed state!

@@davoodsoleimani9482 There must be some content which remains in the sidebar increasing its width to 100px. Make sure that content is not there in collapsed state

You're welcome 🤗

You are welcome!

Hope your new part soon !!!!

Hopefully coming up today!

Yup, I'll be creating a video on this as well. Stay tuned

I can only guess the problem from here since I don't have your code. But seems you haven't set the width to be wide enough to contain the collapsed state?

Just use loadComponent in place of component in the routes file and the routes should be lazily loaded automatically!

You can use output in nested container and event handler in parent to handle toggle state

You can keep an output in the header which fires when button is clicked. Then use an event handler outside it to toggle the mode

@@ZoaibKhan did that and it worked however i noticed that when it collapses although the icons are showing properly .. there is a scrollbar at the bottom .. any ideas ?

In CSS styles, you must remove the img styles. I tried it and the image will be reduced. /* img { width: 100px; height: 100px; } */

I should also add that I have header and footer components and i'd like the hamburger to be in the header as opposed to right below it.

and where is the Dashboard and other MenuItems icon being set?

Please go through the styling part more closely, it seems you've missed out some CSS styles. E.g. the height of sidenav is set in the styles

It's in the menu items array signal defined in the sidenav component

@ZoaibKhan are you available on a Consulting basis in an advisory role? 30 minutes or 1 hour per day to answer questions? I work for Ministry of Foreign Affairs in Belgium and we are moving all apps to Angular we are building reusable share libraries that will reside in a common separate repository that can be leveraged by any Angular App within the organization using single sign on common components services etc. In short are you available to coach us just a few minutes per day to support our efforts.

RouterLinkActive directive is part of the RouterModule, you have that in the imports array right?

@@ZoaibKhan Is true 👌👌

Could you show me some code so I can understand the layout and guide accordingly?

​@@ZoaibKhan For example, I want to run the admin/analytics root on the same page as the sidebar inside the router outlet.

@@ahmetozden5220 did you set up the routes correctly? Once you do that, the component you give for that route should be rendered in place of the router outlet.

​@@ZoaibKhan When I created the path:admin/analytics in app.routes.ts with a for loop, I created a series called menuItems as in the video and gave the route value and the analytics value, but when I do this, it opens on its own page, not where the sidebar is (I'm not talking about _blank). )

I solved the problem, thank you for your attention