Add BitNavPanel extra component (#9163)

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor → src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor

@@ -7,17 +7,17 @@
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
      dir="@Dir?.ToString().ToLower()">
-    <div style="@Styles?.Top" class="bit-ply-top @Classes?.Top" />
+    <div style="@Styles?.Top" class="bit-ash-top @Classes?.Top" />
     <div style="@Styles?.Center"
-         class="bit-ply-center @Classes?.Center"
+         class="bit-ash-center @Classes?.Center"
          dir="@Dir?.ToString().ToLower()">
-        <div style="@Styles?.Left" class="bit-ply-left @Classes?.Left"></div>
-        <div style="@Styles?.Main" class="bit-ply-main @Classes?.Main">
+        <div style="@Styles?.Left" class="bit-ash-left @Classes?.Left"></div>
+        <div @ref="_containerRef" style="@Styles?.Main" class="bit-ash-main @Classes?.Main">
             <BitCascadingValueProvider Values="CascadingValues">
                 @ChildContent
             </BitCascadingValueProvider>
         </div>
-        <div style="@Styles?.Right" class="bit-ply-right @Classes?.Right"></div>
+        <div style="@Styles?.Right" class="bit-ash-right @Classes?.Right"></div>
     </div>
-    <div style="@Styles?.Bottom" class="bit-ply-bottom @Classes?.Bottom"></div>
+    <div style="@Styles?.Bottom" class="bit-ash-bottom @Classes?.Bottom"></div>
 </div>

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs → src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs

@@ -1,7 +1,14 @@
 namespace Bit.BlazorUI;
 
-public partial class BitProLayout : BitComponentBase
+public partial class BitAppShell : BitComponentBase
 {
+    private ElementReference _containerRef = default!;
+
+
+    [Inject] private IJSRuntime _js { get; set; } = default!;
+
+
+
     /// <summary>
     /// The cascading values to be provided for the children of the layout.
     /// </summary>
@@ -15,16 +22,23 @@ public partial class BitProLayout : BitComponentBase
     /// <summary>
     /// Custom CSS classes for different parts of the layout.
     /// </summary>
-    [Parameter] public BitProLayoutClassStyles? Classes { get; set; }
+    [Parameter] public BitAppShellClassStyles? Classes { get; set; }
 
     /// <summary>
     /// Custom CSS styles for different parts of the layout.
     /// </summary>
-    [Parameter] public BitProLayoutClassStyles? Styles { get; set; }
+    [Parameter] public BitAppShellClassStyles? Styles { get; set; }
+
+
+
+    public async Task GoToTop()
+    {
+        await _js.BitExtrasGoToTop(_containerRef);
+    }
 
 
 
-    protected override string RootElementClass => "bit-ply";
+    protected override string RootElementClass => "bit-ash";
 
     protected override void RegisterCssClasses()
     {

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss → src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.scss

@@ -1,35 +1,35 @@
 @import '../../Styles/extra-variables.scss';
 @import '../../../Bit.BlazorUI/Styles/functions.scss';
 
-.bit-ply {
+.bit-ash {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     background-color: $clr-bg-pri;
 }
 
-.bit-ply-top {
+.bit-ash-top {
     width: 100%;
     z-index: 999999;
     height: $bit-env-inset-top;
     background-color: $clr-bg-pri;
 }
 
-.bit-ply-bottom {
+.bit-ash-bottom {
     width: 100%;
     z-index: 999999;
     height: $bit-env-inset-bottom;
     background-color: $clr-bg-pri;
 }
 
-.bit-ply-center {
+.bit-ash-center {
     width: 100%;
     display: flex;
     height: calc(100% - $bit-env-inset-top - $bit-env-inset-bottom);
 }
 
-.bit-ply-main {
+.bit-ash-main {
     height: 100%;
     display: flex;
     overflow: auto;
@@ -39,14 +39,14 @@
     width: calc(100% - $bit-env-inset-left - $bit-env-inset-right);
 }
 
-.bit-ply-left {
+.bit-ash-left {
     height: 100%;
     z-index: 999999;
     width: $bit-env-inset-left;
     background-color: $clr-bg-pri;
 }
 
-.bit-ply-right {
+.bit-ash-right {
     height: 100%;
     z-index: 999999;
     width: $bit-env-inset-right;

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs → src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellClassStyles.cs

@@ -1,39 +1,39 @@
 namespace Bit.BlazorUI;
 
-public class BitProLayoutClassStyles
+public class BitAppShellClassStyles
 {
     /// <summary>
-    /// Custom CSS classes/styles for the root of the BitProLayout.
+    /// Custom CSS classes/styles for the root of the BitAppShell.
     /// </summary>
     public string? Root { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the top area of the BitProLayout.
+    /// Custom CSS classes/styles for the top area of the BitAppShell.
     /// </summary>
     public string? Top { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the center area of the BitProLayout.
+    /// Custom CSS classes/styles for the center area of the BitAppShell.
     /// </summary>
     public string? Center { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the left area of the BitProLayout.
+    /// Custom CSS classes/styles for the left area of the BitAppShell.
     /// </summary>
     public string? Left { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the main area of the BitProLayout.
+    /// Custom CSS classes/styles for the main area of the BitAppShell.
     /// </summary>
     public string? Main { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the right area of the BitProLayout.
+    /// Custom CSS classes/styles for the right area of the BitAppShell.
     /// </summary>
     public string? Right { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the bottom area of the BitProLayout.
+    /// Custom CSS classes/styles for the bottom area of the BitAppShell.
     /// </summary>
     public string? Bottom { get; set; }
 }

src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs → src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitCascadingValueProvider.cs

@@ -57,7 +57,7 @@ private void CreateCascadingValue(RenderTreeBuilder builder,
 #pragma warning disable IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined.
         builder.OpenComponent(seq, _cascadingValueType.MakeGenericType(value.GetType()));
 #pragma warning restore IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined.
-        if (string.IsNullOrEmpty(name) is false)
+        if (name.HasValue())
         {
             builder.AddComponentParameter(++seq, "Name", name);
         }

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/JsInterop/BitChartJavascriptHandler.cs

@@ -25,7 +25,7 @@ public class BitChartJavascriptHandler<T> : IBitChartMethodHandler<T>
     /// <param name="methodName">The namespace and name of a JavaScript function (see <see cref="MethodName"/> for details).</param>
     public BitChartJavascriptHandler(string methodName)
     {
-        if (string.IsNullOrWhiteSpace(methodName))
+        if (methodName.HasNoValue())
             throw new ArgumentException("The method name cannot be null or whitespace. It has to include the namespace and name of the js-function.");
 
         if (methodName.Length < 3 || methodName.Count(c => c == '.') > 1)

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Util/ExpandoObjectExtensions.cs

@@ -21,7 +21,7 @@ public static ExpandoObject EnsurePathExists(this ExpandoObject value, string pa
     {
         value ??= new ExpandoObject();
 
-        if (string.IsNullOrWhiteSpace(path)) return value;
+        if (path.HasNoValue()) return value;
 
         string[] segments = path.Split('.');
         IDictionary<string, object> source = value;
@@ -80,10 +80,10 @@ public static bool PathExists(this ExpandoObject value, string path, out object[
     /// <returns></returns>
     public static IEnumerable<object> EnumeratePath(this ExpandoObject value, string path)
     {
-        if (value == null)
+        if (value is null)
             throw new ArgumentNullException(nameof(value));
 
-        if (string.IsNullOrWhiteSpace(path))
+        if (path.HasNoValue())
             throw new ArgumentException("The path cannot be null or whitespace.");
 
         string[] segments = path.Split('.');
@@ -131,7 +131,7 @@ public static object GetValue(this ExpandoObject value, string path)
     /// <returns></returns>
     public static ExpandoObject SetValue(this ExpandoObject expando, string path, object value)
     {
-        if (string.IsNullOrWhiteSpace(path))
+        if (path.HasNoValue())
             throw new ArgumentException("The path cannot be null or whitespace.");
 
         string[] segments = path.Split('.');

src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss

@@ -41,7 +41,7 @@
     }
 
     .col-sort-desc .sort-indicator {
-        transform: scaleY(-1) translateY(2px);
+        transform: scaleY(-1) translateY(-2px);
     }
     /* Deep to make it easy for people adding a col-options-button element in a custom HeaderTemplate */
     th .col-options-button {

src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Columns/BitDataGridPropertyColumn.cs

@@ -37,7 +37,7 @@ protected override void OnParametersSet()
             _lastAssignedProperty = Property;
             var compiledPropertyExpression = Property.Compile();
 
-            if (!string.IsNullOrEmpty(Format))
+            if (Format.HasValue())
             {
                 if (typeof(IFormattable).IsAssignableFrom(typeof(TProp)))
                 {

src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor

@@ -0,0 +1,118 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+@typeparam TItem
+
+@if (IsOpen)
+{
+    <div style="@Styles?.Overlay" class="bit-npn-ovl @Classes?.Overlay" @onclick="ClosePanel"></div>
+}
+
+@{
+    var isToggled = Togglable && IsToggled;
+}
+
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@GetPanelStyle()"
+     class="@ClassBuilder.Value @($"{(isToggled ? "bit-npn-tgl" : "")}")"
+     dir="@Dir?.ToString().ToLower()">
+    <BitSwipeTrap Style="width:100%; height:100%"
+                  Threshold="5"
+                  Throttle="10"
+                  OnMove="HandleOnSwipeMove"
+                  OnEnd="HandleOnSwipeEnd"
+                  OnTrigger="HandleOnSwipeTrigger">
+        <div style="@Styles?.Container" class="bit-npn-cnt @Classes?.Container">
+            @if (Header is not null)
+            {
+                @Header
+            }
+            else
+            {
+                <div style="@Styles?.Header" class="bit-npn-hdr @Classes?.Header">
+                    @if (IconUrl.HasValue())
+                    {
+                        <img src="@IconUrl"
+                             class="bit-npn-img @Classes?.HeaderIcon"
+                             style="@(isToggled ? "display:none;" : "") @Styles?.HeaderIcon" />
+                    }
+
+                    <div class="bit-npn-spc" style="@(isToggled ? "display:none;" : "")" />
+
+                    @if (Togglable)
+                    {
+                        <BitButton IconOnly FixedColor
+                                   Size="BitSize.Large"
+                                   OnClick="ToggleNavPanel"
+                                   Variant="BitVariant.Text"
+                                   Style="@Styles?.ToggleButton"
+                                   Class="@Classes?.ToggleButton"
+                                   IconName="ColumnRightTwoThirds"
+                                   Color="BitColor.TertiaryBackground"
+                                   Classes="@(new() { Icon = "bit-icon-ex bit-icon-ex--ColumnRightTwoThirds" })" />
+                    }
+                </div>
+            }
+
+            <BitSearchBox @ref="_searchBoxRef"
+                          Underlined
+                          OnChange="SearchNavItems"
+                          Immediate DebounceTime="500"
+                          Placeholder="@SearchBoxPlaceholder"
+                          Styles="SearchBoxStyles"
+                          Classes="SearchBoxClasses"
+                          Class="@Classes?.SearchBox"
+                          Style="@($"{(isToggled ? "display:none;" : "")}{Styles?.SearchBox}".Trim())" />
+
+            @if (isToggled)
+            {
+                <BitButton IconOnly FixedColor
+                           IconName="Search"
+                           Size="BitSize.Large"
+                           OnClick="ToggleForSearch"
+                           Variant="BitVariant.Text"
+                           Style="@Styles?.ToggleSearchButton"
+                           Class="@Classes?.ToggleSearchButton"
+                           Color="BitColor.TertiaryBackground" />
+            }
+
+            @if (_filteredNavItems.Any() is false)
+            {
+                if (isToggled is false)
+                {
+                    if (EmptyListTemplate is not null)
+                    {
+                        @EmptyListTemplate
+                    }
+                    else
+                    {
+                        <BitText Style="@Styles?.EmptyListMessage" Class="@Classes?.EmptyListMessage">
+                            @(EmptyListMessage ?? "Nothing found!")
+                        </BitText>
+                    }
+                }
+            }
+            else
+            {
+                <BitNav @ref=_bitNavRef
+                        FullWidth
+                        Styles="NavStyles"
+                        Classes="NavClasses"
+                        IconOnly="isToggled"
+                        Style="@Styles?.Nav"
+                        Class="@Classes?.Nav"
+                        Items="_filteredNavItems"
+                        DefaultSelectedItem="_filteredNavItems[0]"
+                        Accent="Padded ? BitColor.SecondaryBackground : null"
+                        OnItemClick="(TItem item) => HandleNavItemClick(item)" />
+            }
+
+            <BitSpacer />
+
+            @if (Footer is not null)
+            {
+                @Footer
+            }
+        </div>
+    </BitSwipeTrap>
+</div>