Where to write the code for navbar item click in dev express xaf project

Question

I'm working on XAF ASP.NET Core Blazor solution XPO. On tablets, I need to auto collapse navbar to get more space for the content. Now it is like when I click on any navigation menu item, I am routed to the new page, but the menu stays open and does not automatically collapse. When I click the manually, the menu collapses. I know the code to hide the navbar in the starting of the project.

@media (max-width: 1320px) {
app .header-left-side .header-logo {
    display: flex !important;
}

app .sidebar {
    display: none !important;
}

app .collapse-toggle .sidebar {
    display: flex !important;
}

app .collapse-toggle .header-left-side {
    min-width: 270px;
}

When I write this code in site.css file, it hides the navbar when we open the project. But, How do I make it auto-collapse after clicking on an item in the navbar?

Answer 1

You need to add this to your host.cshtml file

<script>
xaf.device.isMobile = function () { return innerWidth <= 1024; };
</script>

Hope it helps