Collpas NavMenuContent on small screen

[BartNetJS]

How can i collapse the NavMenuContent on small device's.
And also even hide the menu buttons
Is that possible?

[dvoituron]

You could define a main-layout-navmenu CSS for mobile views:
And use a similar method for buttons.

@media(min-width: 960px) {
    .main-layout-navmenu {
        display: none;
    }
}

[BartNetJS]

That is working, but the space is till 200px

This is currently my css:

@media (max-width: 959px) {
    .main-layout-navmenu,
    .main-layout-navmenu ::deep .fluent-nav-menu {
        max-width: 40px !important;
        width: 40px !important;
    }

    .main-layout-navmenu ::deep .nav-link-text {
        display: none;
    }

    .main-layout-navmenu ::deep .nav-link {
        padding: 8px 4px;
        justify-content: center;
    }

    .main-layout-navmenu ::deep .nav-link fluent-icon {
        font-size: 20px;
    }
}

The issue is that the with of 200px is directly applied to the element:

[vnbaaij]

That width only gets set if you have supplied a value for the Width parameter. This is the relevant code in the component: https://github.com/microsoft/fluentui-blazor/blob/dev/src%2FCore%2FComponents%2FNavMenu%2FFluentNavMenu.razor.cs#L15-L21