Toggle NavBar

[Baba Goud Gadiga]

Hi team,

I am working on a requirement where I need to toggle the NavBar. Below is my current code in NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">

    <a class="navbar-brand" rel='nofollow' href="">Resource Planner App</a>

    <button class="navbar-toggler" @onclick="ToggleNavMenu">

        <span class="navbar-toggler-icon"></span>

    </button>

</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">

    <ul class="nav flex-column">

        <li class="nav-item px-3">

            <NavLink class="nav-link" rel='nofollow' href="" Match="NavLinkMatch.All">

                <span class="oi oi-home" aria-hidden="true"></span> Home

            </NavLink>

        </li>

        <li class="nav-item px-3">

            <NavLink class="nav-link" rel='nofollow' href="./productionlog">

                <span class="oi oi-list-rich" aria-hidden="true"></span> Production Log

            </NavLink>

        </li>

        <li class="nav-item px-3">

            <NavLink class="nav-link" rel='nofollow' href="./salesorders">

                <span class="oi oi-list-rich" aria-hidden="true"></span> Sales Orders

            </NavLink>

        </li>

        <li class="nav-item px-3">

            <NavLink class="nav-link" rel='nofollow' href="./cratracker">

                <span class="oi oi-list-rich" aria-hidden="true"></span> CRA Tracker

            </NavLink>

        </li>

        <li class="nav-item px-3">

            <NavLink class="nav-link" rel='nofollow' href="./kittingschedule">

                <span class="oi oi-list-rich" aria-hidden="true"></span> Kitting Schedule

            </NavLink>

        </li>

        <li class="nav-item px-3">

            <NavLink class="nav-link" rel='nofollow' href="./dashboard">

                <span class="oi oi-dashboard" aria-hidden="true"></span> Dashboard

            </NavLink>

        </li>

    </ul>

</div>

@code {

    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()

    {

        collapseNavMenu = !collapseNavMenu;

    }

}

I want to show the breadcrumb all the time irrespective of the screen size. On click of this breadcrumb i would like to toggle the NavBar.

The Mainlayout.razor has the following code

<div class="page">

    <div class="sidebar">

        <NavMenu />

    </div>

    <div class="main">

        <div class="top-row px-4">

            <NavLink class="nav-link" rel='nofollow' href="./about">

                <img class="img-responsive" id="logo" src="images/Thermo_Logo.png" />

            </NavLink>

        </div>

        <div class="content px-4">

            @Body

        </div>

    </div>

</div>

Upon reducing the screen size the menu looks as below

Please let me know what am i missing.

[Sivakumar ShunmugaSundaram]

Hi Baba,

From the shared code snippet, we were unable to understand your exact requirement for the Syncfusion Blazor Sidebar component. However, we have handled sidebar opening and closing via menu icon click in Syncfusion Sidebar. Please check the below links.

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

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

Also, to remove the page responsiveness, we suggest you refer to the below blog.

Reference link: https://stackoverflow.com/questions/19165545/disable-css-for-responsive-design

Please check the attached sample and tell us whether there is a better solution possible.

Regards,

Sivakumar S

[Baba Goud Gadiga]

Hello Siva,

Maybe I was not clear enough in describing my requirement.

I need a Sidebar component which needs to have the child component as my NavMenu.razor component and the user should be able to toggle this sidebar. I have tried to use the existing code from one of your demos. But since I am a starter at using CSS class the UI is rendering quite awkward :)

I am attaching my current code for MainLayout and NavMenu components for your reference.

 When I run the current code the display is as below.

 

Now When l click on the any of the Navlink items from the NavMenu component the display goes bad which is shown below.

I am not sure what styles are getting bad here, but I see a border color for the Toolbar i guess which is in green color and the log is getting shifted to the left side for some reason.

Also, is there a way to have the side bar look similar to the NavMenu as below?

Thanks

Baba

Attachment: Layout_Code_64b2ce81.zip

[Sivakumar ShunmugaSundaram]

Hi Baba,

We have checked your shared files but were unable to find Syncfusion Sidebar component related codes. However, we have validated your reported issue with the shared code snippets by preparing a sample but were unable to reproduce it at our end.

To achieve the layout, you have shared in the screenshot, we have modified the below CSS styles.

[NavMenu.css],

 

.navbar-brand {

    font-size: 1.1rem;

    padding-left:9px;

}

.navbar {

    flex-wrap: nowrap;

        }

.navbar-toggler {

    background-color: rgba(255, 255, 255, 0.1);

    padding:0px;

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_Nav124911688.zip

Please check the attached sample. If any further assistance is required with the Syncfusion Sidebar component, kindly share with us the component related code snippet to provide a prompt solution.

Regards,

Sivakumar S

[Baba Goud Gadiga]

Hi Siva,

I am sorry, I must have reverted back the code before releasing it to you. Please find the attached updated files.

The changes you suggested did not work. My main screen still looks as below. I needed a background similar to what I had before adding a sidebar. You can take a look at  those screen shots in the previous post.

Before the side bar is toggled.

After the side bar is toggle and a Nav menu item is clicked.

Attachment: Ticket_174102_a15169b9.zip

[Sivakumar ShunmugaSundaram]

Hi Baba,

We have prepared a sample with the shared code snippets and achieved the shared layout in the screenshot by adding the below CSS styles.

[MainLayout.razor],

 

    .img-responsive{

        height:50px;

        width:250px;

    }

    .default-sidebar {

        background: linear-gradient( 180deg, rgb(5, 39, 103) 0%, #3a0647 70%);

    }

As for the issue with the image logo and the menu icon, the title in the toolbar shifted while navigating through the pages, which is not reproducible on our end with the provided code. We have used a dummy logo to validate this issue, but on navigation the top bar stays stable.

Please check the attached sample at the below link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_Nav-1244099223.zip

If the reported issue occurs in the above shared sample as well, please provide us with the steps to reproduce or share us with video footage of the issue. These details would help us assist you promptly.

Regards,

Sivakumar S