Skip to content

Commit

Permalink
improve stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@msynk
msynk committed Dec 22, 2024
1 parent a3dcd30 commit 0ee4417
Show file tree
Hide file tree
Showing 7 changed files with 219 additions and 118 deletions.
101 changes: 58 additions & 43 deletions src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,68 +3,83 @@
@typeparam TItem

@{
var isToggled = !_isPanelOpen && _isMenuToggled;
var isToggled = !_isPanelOpen && _isPanelToggled;
}

<div class="bit-npn @($"{(_isPanelOpen ? "" : "closed")} {(isToggled ? "6rem" : "14rem")}")">
<div @ref="RootElement" @attributes="HtmlAttributes"
id="@_Id"
role="dialog"
style="@StyleBuilder.Value"
class="@ClassBuilder.Value @($"{(_isPanelOpen ? "" : "closed")} {(isToggled ? "toggled" : "")}")"
dir="@Dir?.ToString().ToLower()">

@if (_isPanelOpen)
{
<div class="bit-npn-ovl" @onclick=CloseMenu></div>
}
<div Class="panel">
<BitStack HorizontalAlign="@(isToggled ? BitAlignment.Center : BitAlignment.Start)" Grows>
<BitStack Horizontal AutoHeight Alignment="BitAlignment.Center">
<BitImage Src="_content/Boilerplate.Client.Core/images/bit-logo.svg"
Visibility="@(isToggled ? BitVisibility.Collapsed : BitVisibility.Visible)" />

<div class="bit-npn-cnt" style="@( $"justify-content:{(isToggled ? "":"")}")">
@if (HeaderTemplate is not null)
{
@HeaderTemplate
}
else
{
<div class="bit-npn-hdr">
@if (ImageUrl.HasValue())
{
<img src="@ImageUrl" class="bit-npn-img" style="@(isToggled ? "display:none" : "")" />
}
<BitSpacer Visibility="@(isToggled ? BitVisibility.Collapsed : BitVisibility.Visible)" />
<BitButton IconOnly FixedColor
Class="toggle-btn"
Class="bit-npn-tbn"
Size="BitSize.Large"
OnClick="ToggleNavPanel"
Variant="BitVariant.Text"
IconName="ColumnRightTwoThirds"
Color="BitColor.TertiaryBackground" />
</BitStack>
</div>
}

<BitSearchBox @ref="_searchBoxRef"
Underlined Immediate DebounceTime="500"
OnChange="SearchNavItems"
Style="@(isToggled ? "display:none" : "")"
Styles="@(new() { Root="width:100%", InputContainer="width:100%" })" />
<BitSearchBox @ref="_searchBoxRef"
Underlined Immediate DebounceTime="500"
OnChange="SearchNavItems"
Style="@(isToggled ? "display:none" : "")"
Styles="@(new() { Root="width:100%", InputContainer="width:100%" })" />

@if (isToggled)
{
<BitButton IconOnly
FixedColor
IconName="Search"
Class="toggle-btn"
Size="BitSize.Large"
OnClick="ToggleForSearch"
Variant="BitVariant.Text"
Color="BitColor.TertiaryBackground" />
}
@if (isToggled)
{
<BitButton IconOnly
FixedColor
IconName="Search"
Class="toggle-btn"
Size="BitSize.Large"
OnClick="ToggleForSearch"
Variant="BitVariant.Text"
Color="BitColor.TertiaryBackground" />
}

@if (_filteredNavItems.Count == 0)
{
if (isToggled is false)
{
<BitText>Nothing found!</BitText>
}
}
else
@if (_filteredNavItems.Any() is false)
{
if (isToggled is false)
{
<BitNav FullWidth
IconOnly="isToggled"
Items="_filteredNavItems"
Accent="BitColor.SecondaryBackground"
DefaultSelectedItem="_filteredNavItems[0]"
OnItemClick="(BitNavItem item) => HandleNavItemClick(item)"
Styles="@(new() { SelectedItemContainer = "background-color: var(--bit-clr-bg-sec-active)" })" />
<BitText>Nothing found!</BitText>
}
}
else
{
<BitNav @ref=_bitNavRef
FullWidth
IconOnly="isToggled"
Items="_filteredNavItems"
Accent="BitColor.SecondaryBackground"
DefaultSelectedItem="_filteredNavItems[0]"
OnItemClick="(TItem item) => HandleNavItemClick(item)"
Styles="@(new() { SelectedItemContainer = "background-color: var(--bit-clr-bg-sec-active)" })" />
}

<BitSpacer />
<BitSpacer />

@* <Footer></Footer> *@
</BitStack>
@* <Footer></Footer> *@
</div>
</div>
77 changes: 34 additions & 43 deletions src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,47 @@
using Microsoft.Extensions.Options;

namespace Bit.BlazorUI;
namespace Bit.BlazorUI;

public partial class BitNavPanel<TItem> : BitComponentBase, IDisposable where TItem : class
{
private bool _disposed;
private bool _isPanelOpen;
private bool _isMenuToggled;
private List<BitNavItem> allNavItems = [];
private bool _isPanelToggled;
private BitNav<TItem> _bitNavRef = default!;
private IList<TItem> _filteredNavItems = [];
private BitSearchBox _searchBoxRef = default!;
private List<BitNavItem> _flatNavItemList = [];
private List<BitNavItem> _filteredNavItems = [];
private IEnumerable<TItem> _flatNavItemList = [];


/// <summary>
/// The custom template to render as the header of the nav panel.
/// </summary>
[Parameter] public RenderFragment? HeaderTemplate { get; set; }

/// <summary>
/// The custom template to render as the header of the nav panel.
/// </summary>
[Parameter] public string? ImageUrl { get; set; }

/// <summary>
/// A collection of item to display in the navigation bar.
/// A collection of items to display in the nav panel.
/// </summary>
[Parameter]
[CallOnSet(nameof(OnSetItems))]
public IList<TItem> Items { get; set; } = [];



protected override string RootElementClass => "bit-nav";
protected override string RootElementClass => "bit-npn";

protected override async Task OnInitializedAsync()
{
//CreateNavItems();
_flatNavItemList = Flatten(allNavItems).ToList().FindAll(link => !string.IsNullOrEmpty(link.Url));

SearchNavItems(null);

//unsubOpenNavPanel = PubSubService.Subscribe(ClientPubSubMessages.OPEN_NAV_PANEL, async _ =>
//{
// isMenuOpen = true;
// StateHasChanged();
//});
}

private async Task HandleNavItemClick(BitNavItem item)
private async Task HandleNavItemClick(TItem item)
{
if (string.IsNullOrEmpty(item.Url)) return;
if (string.IsNullOrEmpty(_bitNavRef.GetUrl(item))) return;

_filteredNavItems = allNavItems;
_filteredNavItems = Items;

await CloseMenu();
}
Expand All @@ -55,49 +53,42 @@ private async Task CloseMenu()

private async Task ToggleNavPanel()
{
_isMenuToggled = !_isMenuToggled;
if (_isMenuToggled)
_isPanelToggled = !_isPanelToggled;

if (_isPanelToggled)
{
SearchNavItems(null);
}
}

private async Task ToggleForSearch()
{
_isMenuToggled = false;
_isPanelToggled = false;
await Task.Delay(1);
await _searchBoxRef.FocusAsync();
}

private void SearchNavItems(string? searchText)
{
_filteredNavItems = allNavItems;
if (searchText is null) return;
_filteredNavItems = Items;
if (searchText.HasNoValue()) return;

_filteredNavItems = allNavItems;
if (string.IsNullOrEmpty(searchText)) return;
var mainItems = _flatNavItemList.Where(item => searchText!.Split(' ')
.Where(t => string.IsNullOrEmpty(t) is false)
.Any(t => $"{_bitNavRef.GetText(item)} {_bitNavRef.GetDescription(item)}"
.Contains(t, StringComparison.InvariantCultureIgnoreCase)));

var mainItems = _flatNavItemList
.FindAll(item => searchText.Split(' ')
.Where(t => string.IsNullOrEmpty(t) is false)
.Any(t => $"{item.Text} {item.Description}".Contains(t, StringComparison.InvariantCultureIgnoreCase)));

var subItems = _flatNavItemList
.FindAll(item => searchText.Split(' ')
.Where(t => string.IsNullOrEmpty(t) is false)
.Any(t => item.Data?.ToString()?.Contains(t, StringComparison.InvariantCultureIgnoreCase) ?? false));
var subItems = _flatNavItemList.Where(item => searchText!.Split(' ')
.Where(t => string.IsNullOrEmpty(t) is false)
.Any(t => _bitNavRef.GetData(item)?.ToString()?
.Contains(t, StringComparison.InvariantCultureIgnoreCase) ?? false));

_filteredNavItems = [.. mainItems, .. subItems];
}

private static IEnumerable<BitNavItem> Flatten(IEnumerable<BitNavItem> e) => e.SelectMany(c => Flatten(c.ChildItems)).Concat(e);

private void OnSetItems()
{
if (ChildContent is not null || Options is not null || Items == _oldItems) return;

_items = Items?.ToList() ?? [];
_oldItems = Items;
_flatNavItemList = Items.Flatten(_bitNavRef.GetChildItems).Where(item => _bitNavRef.GetUrl(item).HasValue());
}


Expand Down
74 changes: 44 additions & 30 deletions src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
@import "../../../Bit.BlazorUI/Styles/functions.scss";
@import "../../../Bit.BlazorUI/Styles/media-queries.scss";

.bit-npn {
top: 0;
padding: 1rem;
position: sticky;
min-width: 14rem;
max-width: 14rem;
overflow: hidden auto;
height: var(--app-height);
min-width: var(--nav-menu-width);
max-width: var(--nav-menu-width);
height: var(--bit-env-height-avl);

&.toggled {
min-width: 6rem;
max-width: 6rem;
}

&::-webkit-scrollbar {
width: 0;
Expand All @@ -16,22 +24,20 @@
padding: 0;
position: fixed;
height: unset !important;
top: var(--app-inset-top);
bottom: var(--app-inset-bottom);
top: var(--bit-env-inset-top);
bottom: var(--bit-env-inset-bottom);

&.closed {
display: none;
}
}
}

.bit-macos {
section {
height: -webkit-fill-available;
.bit-macos .bit-npn {
height: -webkit-fill-available;

::deep .panel {
height: -webkit-fill-available;
}
.bit-npn-cnt {
height: -webkit-fill-available;
}
}

Expand All @@ -48,28 +54,36 @@
}
}

::deep {
.panel {
width: auto;
display: flex;
padding: 0.5rem;
min-height: 100%;
height: fit-content;
flex-direction: column;
background-color: $bit-color-background-secondary;
.bit-npn-cnt {
width: auto;
display: flex;
padding: 0.5rem;
min-height: 100%;
height: fit-content;
flex-direction: column;
background-color: $clr-bg-sec;

@include lt-md {
padding: 1rem;
}
@include lt-md {
padding: 1rem;
}
}

.toggle-btn {
@include lt-md {
display: none;
}
}
.bit-npn-hdr {
display: flex;
align-items: center;
}

.bit-npn-img {
max-width: 38px;
max-height: 38px;
}

a {
text-decoration: none;
.bit-npn-spc {
flex-grow: 1;
}

.bit-npn-tbn {
@include lt-md {
display: none;
}
}
9 changes: 9 additions & 0 deletions src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanelClassStyles.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
namespace Bit.BlazorUI;

public class BitNavPanelClassStyles
{
/// <summary>
/// Custom CSS classes/styles for the overlay of the BitNavPanel.
/// </summary>
public string? Overlay { get; set; }
}
Loading

0 comments on commit 0ee4417

Please sign in to comment.