From 69479230ae3f0581ca64e9bffae4a8e80d89346a Mon Sep 17 00:00:00 2001
From: SerratedSharp <97156524+SerratedSharp@users.noreply.github.com>
Date: Mon, 26 Aug 2024 19:57:15 -0400
Subject: [PATCH 1/2] - Fixed #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 https://github.com/twbs/bootstrap/issues/36962
 - Added example to demos for this scenario.

Tested using Demo.WebASsembly project.
---
 .../Offcanvas/OffcanvasDocumentation.razor    |  4 ++++
 .../Offcanvas_Demo_07_Responsive.razor        | 19 +++++++++++++++++++
 .../Components/Offcanvas/Offcanvas.razor      |  2 +-
 .../Components/Offcanvas/Offcanvas.razor.cs   | 11 ++++++++++-
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor
index 5fd4b28ef..4a0110ab7 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor
+++ b/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";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor
new file mode 100644
index 000000000..317fb01c6
--- /dev/null
+++ b/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();
+    }
+}
\ No newline at end of file
diff --git a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor
index c88ac52e7..ec81c4607 100644
--- a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor
+++ b/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>
     }
diff --git a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs
index 7c3d705c6..928342e72 100644
--- a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs
+++ b/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>

From 94a382d5dd7eaee97476815e4abf6301a0b0bb72 Mon Sep 17 00:00:00 2001
From: SerratedSharp <97156524+SerratedSharp@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:04:44 -0400
Subject: [PATCH 2/2] Fix comment typo - Fixes typo in commnt

---
 .../Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor
index 317fb01c6..4093959f4 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor
@@ -5,7 +5,7 @@
     <BodyTemplate>...</BodyTemplate>
 </Offcanvas>
 
-@* Only show the button when the offcanvas is hidden belkow its breakpoint. *@
+@* Only show the button when the offcanvas is hidden below its breakpoint. *@
 <Button Class="d-lg-none" Color="ButtonColor.Primary" @onclick="() => OnShowOffcanvasClick()">Show offcanvas</Button>
 
 @code {