Matblazor: Question on styling and Load pages within the page placeholder

[sowsan]

I'm trying to build a basic layout to load the pages using the drawer menu. Newbie here with material.
Questions are referred to this instance of blazorfiddle : https://blazorfiddle.com/s/qlv5ojzg
Questions

1. How to load all pages within a container by keeping the app bar and drawer panel. I have created a sample here to reproduce. Once we click on the counter on the left menu it will redirect the page and wont retain the app bar and drawer panel.

1. In the drawer panel how can I create list items with icons ?

2. When I click on the drawer panel the account icon on the right is disappearing is there a way we can keep it during the drawer panel opened.

3. What would the recommendation to keep the drawer panel width/hieght responsive , using the sample from the matblazor and , when i give the w/h it creates scroll bar on the browsers.

[enkodellc]

@sowsan I am currently creating an admin theme very similar to what you are requesting using MatBlazor components. I will be sharing within the next few days. If you can wait.. move onto other elements I will post the repo. My goal is to get a community together using MatBlazor to build up BlazorBoilerplate.

[SamProf]

1) You need use Layout https://docs.microsoft.com/en-gb/aspnet/core/blazor/layouts?view=aspnetcore-3.0

2) Yes, of course https://blazorfiddle.com/s/j4tysbce

3) I need time to check it

4) Now width is fixed. It can be changed but with hacks\tricks like https://blazorfiddle.com/s/sk6nh9c8

[sowsan]

Thank you so much @SamProf . That worked :) You guys are awesome !!!

[sowsan]

@SamProf for some reason the drawer work around still not fixing for me? is it mandatory to refer the below JS ?

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

[SamProf]

No, in example it s just for another examples. Anyway it;s trick, it can have some bugs. Make me example what you exactly need and I will try help you.

[enkodellc]

@sowsan Take a look at this example: https://blazorfiddle.com/s/gm88hmer
It would still need custom work to be responsive. My goal is to have the drawer to have 3 width states [full Open, Icon Only, Hidden] depending on browser and user settings.

[enkodellc]

@sowsan I have my boilerplate repo up and running. Not sure how much will align with what you want but take a look. I hope to find some more contributors to help build it.

https://github.com/enkodellc/blazorboilerplate
http://blazorboilerplate.com/

[sowsan]

Thank you so much, @enkodellc . I got the similar one up and running. Having trouble with the responsiveness and scroll bar issues though. I saw the same with the boilertemplate as well, as soon we render the blazorboilerplate.com u can see the scroll bars are coming up. Any idea how we can fix them? sorry Im not a front-end developer so no much exposure on the styling side. It would be great this template with the powerfull style of Materials with the responsiveness in different devices.

[enkodellc]

@sowsan I actually fixed that this morning and will be pushing it soon. Next time you can submit the issue on that repo... though it maybe related to MatBlazor. I won't be doing a ton more of "responsive" work on blazorboilerplate as I want to get some more serverside work done. If you want let's collaborate on some items. If you want to take some backend functionality I will do more UI?

[sowsan]

Thanks @enkodellc . I will check it out. Sure, if anything I can contribute then its server side. My time is very limited but I will try my best.

[SamProf]

Yey!
I prepare for you example of main app layout
https://blazorfiddle.com/s/90saq38c

Is your question is resolved. Can we close issue?

[SamProf]

The issue looks solved. If you think otherwise, feel free, just re-open the issue.