Недавно я создал Custom Navmenu (используя Tailwind CSS) в моем проекте Blazor WebAssembly. В зависимости от ширины устройства отображается / скрывается боковая панель (с использованием Tailwind hidden и device-with CSS class).
На определенной c ширине устройства отображается кнопка меню, div, который указан c для мобильной боковой панели, всегда скрыт (с display: none), в Blazor я создал @onclick функция, которая устанавливает пустой стиль мобильной боковой панели (поэтому display: none не удаляется) и наоборот.
Все это работает отлично, однако у этого подхода есть одна проблема. Когда нажимается кнопка меню, отображается мобильная боковая панель, если я теперь увеличиваю ширину устройства, кнопка меню автоматически скрывается, как и мобильная боковая панель, если я затем снова уменьшаю ширину устройства, кнопка меню отображается снова, но также отображается div боковой панели «открытый» (потому что в последнем была также открыта меньшая ширина устройства (стиль отображения: ни один не был удален).
Поведение должно быть таким, когда ширина устройства увеличивается, панель мобильной стороны всегда должна сохранять свой стиль отображения свойства: none.
Хотя, насколько я знаю, в Blazor нет события, которое запускается на changed device width? есть ли способ чтобы это работало?
Ниже некоторых изображений и HTML кода, который показывает «проблему»:
Просмотр нормального размера: 
Мобильный вид:
Мобильная боковая панель в открытом виде: 
Итак, проблема в том, что когда я * 105 4 * от Mobile sidebar opened view обратно к Normal size view, а затем обратно к Mobile view, вместо этого будет отображаться Mobile sidebar opened view (потому что у него все еще есть пустое свойство стиля, что эквивалентно display: block)
Код HTML / Blazor C#:
<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;
}
}