Recently I created a Custom Navmenu (using TailwindCSS) in my Blazor WebAssembly project. Depending on the device-width a sidebar is being showed / hidden (with the use of Tailwind hidden and device-with CSS classes).
On a specific device-width a menu button is being showed, a div which is specific for the mobile sidebar is always hidden (with display: none), in Blazor I have created an @onclick function which sets the style of the mobile sidebar to empty (so display: none is being removed) and vice-versa.
This all works perfectly, however there is one problem with this approach. When the menu button is clicked, the mobile side-bar is being showed, if I now increase the device-width the menu button is being hidden automatically and so is the mobile sidebar, if i then decrease the device-width again the menu button is showed again but the 'opened' sidebar div is also being showed (because in the last smaller device-width is was also opened (style of display:none was removed).
The behavior should be, when the device width is increased the mobile-side bar should always retain its style property display:none.
Though, as far is I know there is no event in Blazor which triggers on a changed device width? is there any way to get this working?
Below some images and HTML code which shows the 'problem':
Normal size view:
Mobile view:
Mobile sidebar opened view:
So the problem is that when I go from Mobile sidebar opened view back to Normal size view and then back to Mobile view, it will show the Mobile sidebar opened view instead (because it still has an empty style property, which is equivalent to display: block)
The HTML / Blazor C# code :
<div class="md:hidden" style=@mobileSideBarDisplay> <!-- Blazor C# string that sets the display to display: none, or removes the display entirely to show it)
<div class="fixed inset-0 flex z-40">
<!--
Off-canvas menu overlay, show/hide based on off-canvas menu state.
Entering: "transition-opacity ease-linear duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "transition-opacity ease-linear duration-300"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<!-- The menu item with is Blazor onclick event -->
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" @onclick="ToggleSidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<! -- rest of HTML, left out for readability -->
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<! -- rest of HTML, left out for readability -->
</div>
</div>
<!-- Horizontal navbar with the Menu button -->
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
<!-- menu button becomes visible at a certain device-width > done with the TailWind CSS class md:hidden -->
<button class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden" aria-label="Open sidebar" @onclick="ToggleSidebar">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
</button>
<! -- rest of HTML, left out for readability -->
</div>
</div>
<!-- C# code for viewing mobile sidebar on Menu button press -->
@code {
private bool showMobileSideBar = false;
private string mobileSideBarDisplay => showMobileSideBar ? "" : "display: none;";
private void ToggleSidebar()
{
showMobileSideBar = !showMobileSideBar;
}
}