1. Home
  2. Forum
  3. Blazor
  4. Syncfusion Template for Maui Blazor Hybrid App

Syncfusion Template for Maui Blazor Hybrid App

Hello,

I'm writing a Maui Blazor Hybrid application bases almost solely on SyncFusion Blazor controls.

I started with the Maui Blazor Hybrid template that Microsoft provides. The main issue I have with this template is the NavBar on the left is clunky and offers little functionality.

Does Syncfusion have a template similar to this which I can use? Ideally I'd like to see a template very similar to Microsoft's with a Navigation Bar on the left side which links to other pages.

Currently I'm linking to 2 different pages where I put all of my Syncfusion controls and am quite happy with them. But I'd really like to get rid of the microsoft NavBar on the left and substitute with a compar

Image_5110_1698255637706  


3 Replies
PM Prasanth Madhaiyan Syncfusion Team October 27, 2023 11:40 AM UTC

Hi Craig,


Greetings from Syncfusion support.


We have checked your reported query in the Blazor Sidebar component by using your shared details. We understand that your requirement is to render the Sidebar component instead of the default Blazor NavMenu in the Maui Blazor application. To fulfill your requirement, we have prepared the Maui Blazor Sidebar application and attached it as a zip file.


Also, for your reference, we have attached the demo and documentation of the Sidebar component.


Demo: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=fluent


Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started


To prepare the Maui Blazor Application, refer to the below documentation.


https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app


Check out the shared details and let us know if you need any further assistance.


Regards,

Prasanth Madhaiyan.


Attachment: MauiBlazorApp_faf20af8.zip

CM Craig Mynatt November 10, 2023 04:18 AM UTC

Hi,

This is great. I've set up the new project with your attached template.


The only question I have is how to make the SideBar, Top Menu Bar, and Page content expand fully to the right and bottom.


See the image below...

Image_2590_1699589864294


LD LeoLavanya Dhanaraj Syncfusion Team November 16, 2023 04:22 PM UTC

Hi Craig,


Based on the information you provided, we understand that you would like to set the height and width of the Sidebar, Menubar and page element to cover the full screen height & width. To achieve this, you can use the height CSS property and set the value to 100vh, which represents 100% of the viewport height. Additionally, you need to set width of the wrapper div container to 100% to correct the width issue.


Check out the below mentioned code snippets for further assistance.


[MainLayout.razor]

<body>

    <div class="page" style="height:100vh;">

        <div id="wrapper" style="width:100%;">

            …

        </div>

    </div>

</body>



Output screenshot:


Image_7925_1700151745419


Regards,

Leo Lavanya Dhanaraj


Loader.
Up arrow icon