Changed the intersection observer to deal with prerendering

.gitignore

@@ -1,5 +1,6 @@
 bin
 obj
+release
 .vs
 .idea
 **.DotSettings

src/Byteology.Website/Layout/Slide.razor

@@ -1,24 +1,20 @@
-@using Ljbc1994.Blazor.IntersectionObserver.Components
+<b-slide @ref="_slide" class="@(_isIntersecting || _state.Prerendering ? "active" : "")">
 
-<IntersectionObserve>
-    <b-slide @ref="context.Ref.Current" class="@(context.IsIntersecting || _state.Prerendering ? "active" : "")">
+    <b-chevron class="@(_state.Prerendering ? "prerendered" : "")">
+        <ChevronIcon/>
+    </b-chevron>
 
-        <b-chevron class="@(_state.Prerendering ? "prerendered" : "")">
+    @ChildContent
+
+    @if (IncludeFooter)
+    {
+        <PrivacyFooter/>
+    }
+    else
+    {
+        <b-chevron class="@(_state.Prerendering? "prerendered" : "")">
             <ChevronIcon/>
         </b-chevron>
+    }
 
-        @ChildContent
-
-        @if (IncludeFooter)
-        {
-            <PrivacyFooter/>
-        }
-        else
-        {
-            <b-chevron class="@(_state.Prerendering? "prerendered" : "")">
-                <ChevronIcon/>
-            </b-chevron>
-        }
-
-    </b-slide>
-</IntersectionObserve>
+</b-slide>

src/Byteology.Website/Layout/Slide.razor.cs

@@ -1,7 +1,23 @@
 namespace Byteology.Website.Layout;
 
+using Ljbc1994.Blazor.IntersectionObserver;
+using Ljbc1994.Blazor.IntersectionObserver.API;
+using Microsoft.JSInterop;
+
 public partial class Slide : ComponentBase
 {
+	private ElementReference _slide;
+
+	private bool _isIntersecting;
+
+	private IIntersectionObserverService _observer { get; set; } = default!;
+
+	[Inject]
+	private IJSRuntime _jsRuntime { get; set; } = default!;
+
+	[Inject]
+	private NavigationManager _navManager { get; set; } = default!;
+
 	[Inject]
 	private LayoutStateContainer _state { get; set; } = default!;
 
@@ -10,4 +26,24 @@ public partial class Slide : ComponentBase
 
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		await base.OnAfterRenderAsync(firstRender);
+
+		if (firstRender)
+			await setupObserver();
+	}
+
+	public async Task setupObserver()
+	{
+		_observer = new IntersectionObserverService(_jsRuntime, _navManager);
+		await _observer.Observe(_slide, (entries) =>
+		{
+			IntersectionObserverEntry? entry = entries.FirstOrDefault();
+			_isIntersecting = entry?.IsIntersecting ?? false;
+			StateHasChanged();
+		});
+	}
+
 }