Overlay Component for Full Screen Pages (including scrolling)

Author: sjefvanleeuwen

src/Blazor.AdminLte/Layout/Overlay.razor

@@ -0,0 +1,49 @@
+@implements IDisposable
+@namespace Blazor.AdminLte
+
+@inject IJSRuntime js
+
+@inject NavigationManager NavigationManager
+<!-- Use outer div's id in JavaScript/jQuery to show/hide overlay -->
+<div id="overlay-container" style="height: 100%;
+        width: 100%;
+        position: absolute;
+        z-index: 1340;
+        top: 0;
+        left: 0;
+        overflow-y: auto;
+        overflow-x: auto;
+        background-color: #e9ecef
+">
+    <div class="overlay-content">
+        @ChildContent
+    </div>
+</div>
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+
+    protected override void OnInitialized()
+    {
+        // Subscribe to the event
+        NavigationManager.LocationChanged += LocationChanged;
+        base.OnInitialized();
+    }
+    void LocationChanged(object sender, LocationChangedEventArgs e)
+    {
+        js.InvokeVoidAsync("overlay", false);
+    }
+    void IDisposable.Dispose()
+    {
+        // Unsubscribe from the event when our component is disposed
+        NavigationManager.LocationChanged -= LocationChanged;
+    }
+
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        js.InvokeVoidAsync("overlay", true);
+        return base.OnAfterRenderAsync(firstRender);
+    }
+}

src/Blazor.AdminLte/wwwroot/js/interop.js

@@ -56,6 +56,15 @@ function setTitle(title) {
     document.title = title;
 }
 
+function overlay(isActive) {
+    if (isActive) {
+        $("body").css("overflow-y", "hidden");
+    }
+    else {
+        $("body").css("overflow-y", "auto");
+    }
+}
+
 function sideBarFixed(isFixed)
 {
     if (isFixed) {