- Fixed vikramlearning#849 by providing an option to suppress the default "offcanvas" class following BS docs for responsive offcanvas.

- Includes recommended workaround for dismiss button where the default class is ommitted for this scenario per twbs/bootstrap#36962
- Added example to demos for this scenario.

Tested using Demo.WebASsembly project.

Author: SerratedSharp

BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor

@@ -58,6 +58,10 @@
 <div class="mb-3">Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.</div>
 <Demo Type="typeof(Offcanvas_Demo_06_Events)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Responsive" PageUrl="@pageUrl" HashTagName="responsive" />
+<div class="mb-3">Blazor Bootstrap offcanvas component can implement responsiveness to show its content inline on larger devices and revert to default hidden behavior on smaller devices.  This example switches between the two responsive views at the lg breakpoint.</div>
+<Demo Type="typeof(Offcanvas_Demo_07_Responsive)" Tabs="true" />
+
 @code {
     private string pageUrl = "/offcanvas";
     private string title = "Blazor Offcanvas Component";

BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor

@@ -0,0 +1,19 @@
+@* Per bootstrap documentation, disable the default "offcanvas" class and replace with responsive offcanvas-lg class.
+    This will make the offcanvas appear as a modal on small devices and on larger devices show the content inline.
+*@
+<Offcanvas @ref="offcanvas" Title="Responsive Offcanvas" Class="offcanvas-lg" EnableDefaultClass="false">
+    <BodyTemplate>...</BodyTemplate>
+</Offcanvas>
+
+@* Only show the button when the offcanvas is hidden belkow its breakpoint. *@
+<Button Class="d-lg-none" Color="ButtonColor.Primary" @onclick="() => OnShowOffcanvasClick()">Show offcanvas</Button>
+
+@code {
+    private Offcanvas offcanvas = default!;
+    private Placement placement;
+
+    private async Task OnShowOffcanvasClick()
+    {
+        await offcanvas.ShowAsync();
+    }
+}

blazorbootstrap/Components/Offcanvas/Offcanvas.razor

@@ -16,7 +16,7 @@
 
             @if (ShowCloseButton)
             {
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#@Id" aria-label="Close"></button>
             }
         </div>
     }

blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs

@@ -101,10 +101,19 @@ private async Task ShowAsync(string? title, Type? type, Dictionary<string, objec
 
     protected override string? ClassNames =>
         BuildClassNames(Class,
-            (BootstrapClass.Offcanvas, true),
+            (BootstrapClass.Offcanvas, EnableDefaultClass),
             (Placement.ToOffcanvasPlacementClass(), true),
             (Size.ToOffcanvasSizeClass(), true));
 
+    /// <summary>
+    /// When set to false, suppresses the rendering of the default "offcanvas" class, which must be ommitted in some scenarios such as a responsive offcanvas. 
+    /// </summary>
+    /// <remarks>
+    /// Defaults to true.
+    /// </remarks>
+    [Parameter]
+    public bool EnableDefaultClass { get; set; } = true;
+
     /// <summary>
     /// Gets or sets the body CSS class.
     /// </summary>