Added option for responsive offcanvas

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

@@ -64,6 +64,13 @@
     <Demo Type="typeof(Offcanvas_Demo_06_Events)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Responsive" PageUrl="@pageUrl" Link="responsive">
+    <div class="mb-3">Set the responsive behaviour of the <code>Offcanvas</code> with the Responsive parameter. The default value is <code>OffcanvasResponsive.Always</code>.</div>
+    <div class="mb-3">Responsive offcanvas hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, <code>OffcanvasResponsive.LargeDown</code> hides content in an offcanvas below the <code>lg</code> breakpoint, but shows the content above the <code>lg</code> breakpoint. Responsive offcanvas are available for each breakpoint.</div>
+    <Demo Type="typeof(Offcanvas_Demo_07_Responsive)" Tabs="true" />
+    <Callout Color="CalloutColor.Warning" Heading="NOTE">Both body and footer will be shown above the responsive breakpoint by default. Optionally use the FooterCssClass parameter to control visibility of the footer.</Callout>
+</Section>
+
 @code {
     private const string pageUrl = DemoRouteConstants.Demos_URL_Offcanvas;
     private const string pageTitle = "Blazor Offcanvas";

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

@@ -0,0 +1,20 @@
+<Alert Color="AlertColor.Info" Class="d-none d-lg-block">Resize your browser to show the responsive offcanvas button.</Alert>
+
+<Offcanvas @ref="offcanvas"
+           Title="Offcanvas title"
+           Responsive="OffcanvasResponsive.LargeDown"
+           FooterCssClass="d-lg-none">
+    <BodyTemplate>
+        <p>This is content within an <code>Offcanvas</code> with <code>OffcanvasResponsive.LargeDown</code>.</p>
+    </BodyTemplate>
+    <FooterTemplate>
+        <Button Color="ButtonColor.Secondary" @onclick="() => offcanvas.HideAsync()">Close</Button>
+    </FooterTemplate>
+</Offcanvas>
+
+<Button Class="d-lg-none" Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show offcanvas</Button>
+
+@code {
+    private Offcanvas offcanvas = default!;
+    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

@@ -107,7 +107,7 @@ private async Task ShowAsync(string? title, Type? type, Dictionary<string, objec
 
     protected override string? ClassNames =>
         BuildClassNames(Class,
-            (BootstrapClass.Offcanvas, true),
+            (Responsive.ToOffcanvasResponsiveClass(), true),
             (Placement.ToOffcanvasPlacementClass(), true),
             (Size.ToOffcanvasSizeClass(), true));
 
@@ -251,6 +251,18 @@ private async Task ShowAsync(string? title, Type? type, Dictionary<string, objec
     [Parameter]
     public Placement Placement { get; set; } = Placement.End;
 
+    /// <summary>
+    /// Gets or sets the offcanvas responsive behavior.
+    /// </summary>
+    /// <remarks>
+    /// Default value is <see cref="OffcanvasResponsive.Always" />.
+    /// </remarks>
+    [AddedVersion("3.6.0")]
+    [DefaultValue(OffcanvasResponsive.Always)]
+    [Description("Gets or sets the offcanvas responsive behavior.")]
+    [Parameter]
+    public OffcanvasResponsive Responsive { get; set; } = OffcanvasResponsive.Always;
+
     /// <summary>
     /// If <see langword="true" />, modal shows close button in the header.
     /// <para>

blazorbootstrap/Constants/BootstrapClass.cs

@@ -114,8 +114,6 @@ public static class BootstrapClass
     public const string NavTabs = "nav-tabs";
     public const string NavUnderline = "nav-underline";
 
-    public const string Offcanvas = "offcanvas";
-
     public const string PageLoadingModal = "modal-page-loading";
 
     public const string Pagination = "pagination";

blazorbootstrap/Enums/OffcanvasResponsive.cs

@@ -0,0 +1,34 @@
+namespace BlazorBootstrap;
+
+public enum OffcanvasResponsive
+{
+    /// <summary>
+    /// Always hide content offcanvas.
+    /// </summary>
+    Always,
+
+    /// <summary>
+    /// Hide content offcanvas bellow "small" breakpoint (576px).
+    /// </summary>
+    SmallDown,
+
+    /// <summary>
+    /// Hide content offcanvas bellow "medium" breakpoint (768px).
+    /// </summary>
+    MediumDown,
+
+    /// <summary>
+    /// Hide content offcanvas bellow "large" breakpoint (992px).
+    /// </summary>
+    LargeDown,
+
+    /// <summary>
+    /// Hide content offcanvas bellow "extra-large" breakpoint (1200px).
+    /// </summary>
+    ExtraLargeDown,
+
+    /// <summary>
+    /// Hide content offcanvas bellow "XXL" breakpoint (1400px).
+    /// </summary>
+    ExtraExtraLargeDown
+}

blazorbootstrap/Extensions/EnumExtensions.cs

@@ -353,6 +353,18 @@ public static string ToOffcanvasPlacementClass(this Placement placement) =>
             _ => "offcanvas-bottom"
         };
 
+    public static string ToOffcanvasResponsiveClass(this OffcanvasResponsive offcanvasResponsive) =>
+        offcanvasResponsive switch
+        {
+            OffcanvasResponsive.Always => "offcanvas",
+            OffcanvasResponsive.SmallDown => "offcanvas-sm",
+            OffcanvasResponsive.MediumDown => "offcanvas-md",
+            OffcanvasResponsive.LargeDown => "offcanvas-lg",
+            OffcanvasResponsive.ExtraLargeDown => "offcanvas-xl",
+            OffcanvasResponsive.ExtraExtraLargeDown => "offcanvas-xxl",
+            _ => "offcanvas"
+        };
+
     public static string ToOffcanvasSizeClass(this OffcanvasSize offcanvasSize) =>
         offcanvasSize switch
         {