From c962fe9669ee3d0ae904f73774702af84bb59fe1 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Thu, 28 Nov 2024 16:10:33 +0330 Subject: [PATCH 01/11] 1st commit --- .../Components/NavPanel/BitNavPanel.razor | 75 ++++++++++++++++++ .../Components/NavPanel/BitNavPanel.razor.cs | 15 ++++ .../Components/NavPanel/BitNavPanel.scss | 78 +++++++++++++++++++ .../Extras/NavPanel/BitNavPanelDemo.razor | 19 +++++ .../Extras/NavPanel/BitNavPanelDemo.razor.cs | 42 ++++++++++ .../NavPanel/BitNavPanelDemo.razor.scss | 0 6 files changed, 229 insertions(+) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.scss diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor new file mode 100644 index 0000000000..ac7a9ab08e --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor @@ -0,0 +1,75 @@ +@namespace Bit.BlazorUI + +@if (isMenuOpen) +{ +
+} + +@{ + var isToggled = !isMenuOpen && isMenuToggled; +} + +
+ + + + + + + + + + + @if (isToggled) + { + + } + + @if (filteredNavItems.Count == 0) + { + if (isToggled is false) + { + @Localizer[nameof(AppStrings.NothingFound)] + } + } + else + { + + } + + + + + @(isToggled ? "" : Localizer[nameof(AppStrings.SignOut)]) + + + +
\ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs new file mode 100644 index 0000000000..872236bee1 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs @@ -0,0 +1,15 @@ +using System.Diagnostics.CodeAnalysis; + +namespace Bit.BlazorUI; + +public partial class BitNavPanel : IDisposable +{ + private bool _disposed; + + public void Dispose() + { + if (_disposed) return; + + _disposed = true; + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss new file mode 100644 index 0000000000..efe31928b9 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss @@ -0,0 +1,78 @@ +.bit-npn { +} + +section { + top: 0; + padding: 1rem; + position: sticky; + overflow: hidden auto; + height: var(--app-height); + min-width: var(--nav-menu-width); + max-width: var(--nav-menu-width); + + &::-webkit-scrollbar { + width: 0; + } + + @include lt-md { + z-index: 3; + padding: 0; + position: fixed; + height: unset !important; + top: var(--app-inset-top); + bottom: var(--app-inset-bottom); + + &.closed { + display: none; + } + } +} + +.bit-macos { + section { + height: -webkit-fill-available; + + ::deep .panel { + height: -webkit-fill-available; + } + } +} + +.menu-overlay { + inset: 0; + z-index: 2; + width: 100%; + height: 100%; + position: fixed; + min-height: 100vh; + + @include gt-sm { + display: none; + } +} + +::deep { + .panel { + width: auto; + display: flex; + padding: 0.5rem; + min-height: 100%; + height: fit-content; + flex-direction: column; + background-color: $bit-color-background-secondary; + + @include lt-md { + padding: 1rem; + } + } + + .toggle-btn { + @include lt-md { + display: none; + } + } + + a { + text-decoration: none; + } +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor new file mode 100644 index 0000000000..58feadaa03 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor @@ -0,0 +1,19 @@ +@page "/components/navpanel" + +@inherits AppComponentBase + + + + + + + + + + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.cs new file mode 100644 index 0000000000..674e5e3275 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.cs @@ -0,0 +1,42 @@ + +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.NavPanel; + +public partial class BitNavPanelDemo +{ + private readonly List componentParameters = + [ + new() + { + Name = "CanvasClass", + Type = "string?", + DefaultValue = "null", + Description = "The CSS class of the canvas element(s).", + }, + ]; + + private readonly List componentSubClasses = + [ + new() + { + Id = "pdf-reader-config", + Title = "BitPdfReaderConfig", + Parameters= + [ + new() + { + Name = "Id", + Type = "string", + DefaultValue = "Guid.NewGuid().ToString()", + Description = "The id of the pdf reader instance and its canvas element(s).", + }, + ] + } + ]; + + + + private readonly string example1RazorCode = @" +"; + private readonly string example1CsharpCode = @" +"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.scss new file mode 100644 index 0000000000..e69de29bb2 From b13e8dc9032d202096cba1cea7ab65f3a055de43 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 4 Dec 2024 00:14:07 +0330 Subject: [PATCH 02/11] 2nd --- .../Components/NavPanel/BitNavPanel.razor | 22 ++-- .../Components/NavPanel/BitNavPanel.razor.cs | 95 ++++++++++++++++-- .../fabric.mdl2.bit.blazoui.extras.scss | 9 ++ .../FabMDL2.4.66.bit.BlazorUI.Extras.woff2 | Bin 1696 -> 1580 bytes .../Components/App.razor | 2 +- .../wwwroot/index.html | 2 +- 6 files changed, 107 insertions(+), 23 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor index ac7a9ab08e..593eaa7884 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor @@ -21,24 +21,25 @@ Size="BitSize.Large" OnClick="ToggleNavPanel" Variant="BitVariant.Text" - Color="BitColor.TertiaryBackground" - IconName="@BitIconName.ColumnRightTwoThirds" /> + IconName="ColumnRightTwoThirds" + Color="BitColor.TertiaryBackground" /> @if (isToggled) { - } @@ -46,7 +47,7 @@ { if (isToggled is false) { - @Localizer[nameof(AppStrings.NothingFound)] + Nothing found! } } else @@ -62,14 +63,7 @@ - - @(isToggled ? "" : Localizer[nameof(AppStrings.SignOut)]) - + @*
*@ \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs index 872236bee1..c680eb91fa 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs @@ -1,15 +1,96 @@ -using System.Diagnostics.CodeAnalysis; - -namespace Bit.BlazorUI; +namespace Bit.BlazorUI; public partial class BitNavPanel : IDisposable { - private bool _disposed; + private bool disposed; + private bool isMenuOpen; + private bool isMenuToggled; + private bool isSignOutConfirmOpen; + private List allNavItems = []; + private Action unsubOpenNavPanel = default!; + private BitSearchBox searchBoxRef = default!; + private Action unsubUserDataChange = default!; + private List flatNavItemList = []; + private List filteredNavItems = []; - public void Dispose() + + 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 ShowSignOutConfirm() { - if (_disposed) return; + isSignOutConfirmOpen = true; + await CloseMenu(); + } + + private async Task HandleNavItemClick(BitNavItem item) + { + if (string.IsNullOrEmpty(item.Url)) return; + + filteredNavItems = allNavItems; + + await CloseMenu(); + } + + private async Task CloseMenu() + { + isMenuOpen = false; + } - _disposed = true; + private async Task ToggleNavPanel() + { + isMenuToggled = !isMenuToggled; + if (isMenuToggled) + { + SearchNavItems(null); + } + } + + private async Task ToggleForSearch() + { + isMenuToggled = false; + await Task.Delay(1); + await searchBoxRef.FocusAsync(); + } + + private void SearchNavItems(string? searchText) + { + filteredNavItems = allNavItems; + if (searchText is null) return; + + filteredNavItems = allNavItems; + if (string.IsNullOrEmpty(searchText)) return; + + 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)); + + filteredNavItems = [.. mainItems, .. subItems]; + } + + private static IEnumerable Flatten(IEnumerable e) => e.SelectMany(c => Flatten(c.ChildItems)).Concat(e); + + + public void Dispose() + { + disposed = true; } } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/fabric.mdl2.bit.blazoui.extras.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/fabric.mdl2.bit.blazoui.extras.scss index e372997a9a..7b869b44bc 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/fabric.mdl2.bit.blazoui.extras.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/fabric.mdl2.bit.blazoui.extras.scss @@ -5,3 +5,12 @@ font-family: 'Fabric MDL2 bit BlazorUI Extras'; src: url('../fonts/FabMDL2.4.66.bit.BlazorUI.Extras.woff2') format("woff2"); } + +.bit-icon { + font-style: normal; + font-weight: normal; + display: inline-block; + font-family: 'Fabric MDL2 bit BlazorUI' !important; +} + +.bit-icon--ColumnRightTwoThirds:before { content: "\F1D7"; } \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/wwwroot/fonts/FabMDL2.4.66.bit.BlazorUI.Extras.woff2 b/src/BlazorUI/Bit.BlazorUI.Extras/wwwroot/fonts/FabMDL2.4.66.bit.BlazorUI.Extras.woff2 index ff7084633725716df6f84de435e5092b75a83e44..8f5238872665196110a36472d618e6e446427b31 100644 GIT binary patch delta 1564 zcmV+%2IKjl4Xg|pcTYw#00961000Io01yBG000oI000Hhkr*U@LI^4ef>{v^3Uq-8 z3km=MHUcCA5Ck9vlpO~$41rS{m=7Zn_G)kv1N_B-?T7}IqJqu2f^`)I$$qyTDa~Ox zPfjFDa4{S~ynm3h@AE()aVb}iH;}R@W#g!5utn9wEJ>nsW&0?NOws)xQpz=dU zvZg%Oh?mQM)b;;=<}{6<;IG;8+s!h8RIaEI@+wNC^Z zqd5}tcF$Top`duF7)5jnR?oh)H?^#bqG6Oa=G9)zhfVxX;J`D5`aiZdjFgdyr+TIIPSW4LnOcJ^IBD&wlSvL ztd{S-cI7%*J3`TFKls)D9wF{g8t9jcR1!csbJDJ+3Mt~OKD|u(klYgigh%(sg53jT zIIVYN2-S{%nU~r>FaxA7&Oio&(R6fm#e2jYBC{d!u>pnk&-~|zxBO2f>p)q!Bf5g_ z+|{{wvJ_(=k=hZY@@cu#@Xj%wdpX_M%TZd+ zeAg8yjCWlbNV*r-72ZA&$lw0^$J@_uZ)-OBuewpq;MYT~>X5W1s4>=#F*+nK26_|H zyVR_I?W?&Q1ZX%k%WofjapjJ*cN#)V??F=e88R)SxiPmcfI{Oq3#I1q22>`bflzCc zo`6OMrhlMGd|WE~H#M;SL?-eE*i8VTw-+I4>MO|f_KP8Ri(XJ@ADf}nJsyI}$+!o# zfoV51vO2v9O|r+ceov~Y)%95)@()}(ci|3y_`ph;P@-bME0HB4Lxzcw2cGqM;1{bk zi~_%iBH4^Yo_l92iP*-ieP{&oe&sc$zmDM%oSO?3GFAc~-n_d6o+(9)a&s#(m+F}ZWVpuwZFY(L!|Ac7^|^y)$gZ& zCJ0~(AYd{Skpap&KvaNfkQ#GMmp@4mQ6(`BFNQ{pD9^3B76Mj4I1Q6dH`XYwau}ev zFz`@0oz=h7ChYXrY9@IU1WSK%Z@?Yv`ClEFjRmf=^CgW4A2Hl6e-7erVvPIDRe1UcQ`Y#{SS)}%= z3b8<{wAB-n#u#`^Dk^Z{($nrGeM-*9B%_T5VM_9u>LKKFZGoBkYAp$Mj{OyPl^@ zE_LTytGvrwP!H`ABESu&i|=?3G!zs;hR-996@u%zx(&c>?c5=J{3HwWcg*_@_Ue`% zy$r_U5jyQ$PtLhz+PO+ehw|uUHQryP3>C$ZYA$R4*X{IYO~C)lEP6M4%K-@~Qg!C& zfw?1QkGo-zThSm5idzlGcD~>6kt1uS^idDG-)PUO=|ekDNgA)8KfZqlNt0RQ26byC zX*#%f=hlrS&APU4)wGs0Z`!y)m2-;_Ntl*5o;bdIc)t6A-k$84J+~KrW!Db&%3j+W O)W6j#szEob&Hw;U$LRh5 delta 1681 zcmV;C25$MR44@4dcTYw#00961000J{01yBG000q~000I;kr*U@QV1#uf>{v^3W79( z3=0kb0X7080~7=x1(Y2JMht;d8$=Kz5yHj+K#A7^{4;?k6PowIfSV|c_K9E*;T+RB z5**@};CagXuXC#^NqsWEyYm|22aq&0kTL*QRJF03@s3>~;HC)7PP<*;)S1!l3HOJX8`{L_!g3 zgh(hRC+S|lP%q?rjIA4ONpQQrU_b!gA9(Z!fJ6TtNdX_vZhsvCa)ClX0jAp0BKP2d z_n0>iB=i>7?{Kmzww{+QN*W?i2=LeH8i*olzbXFtJPUw-1pomsSbzutG@yYR1b|L7 z0@Prb4OlD+zA66hoS)AtHg8z@WBG%*4Av_>Zz`;weY&9K8aJ3XPf zKOUDvw?(&qwVild)Eu3<=|pEHFnQpqPP#3b6*>(;~-UoN={DSf`wnBufeD8X{aK zp?|vW>2jp~D@yBNpQI=D#(l9%8$(yyn1q>3)Z`BL#_n)qm`M`V$=z{RomQ#NFn?;O z4J2A^luB~jZIHxq8J8v*;cep*?#baXcMGwHTGA1JIH8G$q`gD6H1G+5gp)Kd30svK zXH4%Hh?^QYiLZPHg2Iyhe={fmzy}}~u)q*-1pr_GPylEIWlU+~wS}`(Ja< zpF>!N06+lq{BQSswSIF$!SY{ij%8vb;41jj0@%7BU;!qJ7z3ekp2nNXvjFNvu#n0g zKmecRXaEF&>|B?GN|{J6ZZ0SHgHX&NPy~E`4w_;q6pelxc;w2(;8Q5iK)@0;6)a`y z9>`&;`UmplxW8rle5Tsh(TK?cP6Q8x@jMEOeBK4kc)k~mp^O8MN?8j&kz5Y}=gUs8 zOjRdB4uk4h$kVszN%u3KL3=ST5HXk8%wf?F06wvX5=OKfcq3FM6mm=~BJg4|0e@J3 zr{^p^05L=zkR%GX^@eSGZ~QO|xL6q9yZzFJI|w16nqm#`>D`Ab;Ds^7nUGT}H}LuX zarM^VJg8y0PBB3$T*9woh;|e*Zx6fC$b9` z_g8RPJqKsPgZo;{Wlt)VV{`0irtKHipHp#X8F-f-FYBFET4Lc$C9J;ErB$|6s4M}d z`#H<)V}j4sGUouS(uS2Oa>EHD2^5P(;GZbKI^3Uu!q5n27z#W_fE>;Va%5+JlQ5%H zD0F$WNI<3-->;$MM=*}`d3Ju{9OqnxBWq{ppgU1aR2yPZKDJP3K&y|w@0^xyCVo!Q za6FtaQ1OgXPpS)3w!|FuqI=Vuo8M8l6r*@!QY6-*`73yQ>RWt;tpPHtaaxiADR+$d zHV$~A7SjRy6%5C9bo4Fi0--H`sx9Ez9VoiNlzXaN=Cx@n_S<+Op>ETr*M+AK zo6+>4YVdA;A#8)#gG1q6)MIc-8({I{>9dVsxJr-ffy(CBaM2#0R+b)rc2hsRX*=GH zJwmi-avr#_H6UI+jarJFG`igWzdlWW&;TBz$0all=L3Qg zC0a~y(b=apEt)g8+ib~j!sfu{dB6o7)7UCmYMN}#W*hIyzVWP~6%(-2cIBKjP&>1x z&q;3Fx_EMxle~sS)5erI$)7&HrZm?{!RX48eCwnzKQ}8dyr@BaN5$@*b9-keuuI5G bO45>%JWGFcl@v%;$|}9JM1pCKRV@Gjhz%V7 diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor index 8d494028ae..ac4edc5dad 100644 --- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor +++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor @@ -47,9 +47,9 @@ Microsoft Clarity --> + - diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/wwwroot/index.html b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/wwwroot/index.html index 0076c2e05e..01cbb664c3 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/wwwroot/index.html +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Maui/wwwroot/index.html @@ -19,9 +19,9 @@ + - From 3686db99dbac1c979127c33bf326dfd475352ec3 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 4 Dec 2024 11:08:42 +0330 Subject: [PATCH 03/11] 3rd --- .../Components/NavPanel/BitNavPanel.razor | 23 +++++++++---------- .../Components/NavPanel/BitNavPanel.razor.cs | 4 ++-- .../Components/NavPanel/BitNavPanel.scss | 5 +--- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor index 593eaa7884..313b72d0b4 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor @@ -1,16 +1,15 @@ @namespace Bit.BlazorUI -@if (isMenuOpen) -{ -
-} - @{ - var isToggled = !isMenuOpen && isMenuToggled; + var isToggled = !isPanelOpen && isMenuToggled; } -
- +
+ @if (isPanelOpen) + { +
+ } +
@@ -33,7 +32,7 @@ @if (isToggled) { - *@ - -
\ No newline at end of file + + \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs index c680eb91fa..3edc7b1b70 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs @@ -3,7 +3,7 @@ public partial class BitNavPanel : IDisposable { private bool disposed; - private bool isMenuOpen; + private bool isPanelOpen; private bool isMenuToggled; private bool isSignOutConfirmOpen; private List allNavItems = []; @@ -46,7 +46,7 @@ private async Task HandleNavItemClick(BitNavItem item) private async Task CloseMenu() { - isMenuOpen = false; + isPanelOpen = false; } private async Task ToggleNavPanel() diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss index efe31928b9..5df77e85e8 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss @@ -1,7 +1,4 @@ .bit-npn { -} - -section { top: 0; padding: 1rem; position: sticky; @@ -38,7 +35,7 @@ section { } } -.menu-overlay { +.bit-npn-ovl { inset: 0; z-index: 2; width: 100%; From 2bd1c4a58fd306fdf2fdc0cdbedba4c50cd49f3f Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sun, 22 Dec 2024 12:20:43 +0330 Subject: [PATCH 04/11] stuff --- .../Components/NavPanel/BitNavPanel.razor | 16 ++-- .../Components/NavPanel/BitNavPanel.razor.cs | 82 ++++++++++++------- 2 files changed, 60 insertions(+), 38 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor index 313b72d0b4..f2a0049e18 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor @@ -1,11 +1,13 @@ @namespace Bit.BlazorUI +@inherits BitComponentBase +@typeparam TItem @{ - var isToggled = !isPanelOpen && isMenuToggled; + var isToggled = !_isPanelOpen && _isMenuToggled; } -
- @if (isPanelOpen) +
+ @if (_isPanelOpen) {
} @@ -24,7 +26,7 @@ Color="BitColor.TertiaryBackground" /> - } - @if (filteredNavItems.Count == 0) + @if (_filteredNavItems.Count == 0) { if (isToggled is false) { @@ -53,9 +55,9 @@ { } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs index 3edc7b1b70..a64d46d835 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs @@ -1,23 +1,34 @@ -namespace Bit.BlazorUI; +using Microsoft.Extensions.Options; -public partial class BitNavPanel : IDisposable +namespace Bit.BlazorUI; + +public partial class BitNavPanel : BitComponentBase, IDisposable where TItem : class { - private bool disposed; - private bool isPanelOpen; - private bool isMenuToggled; - private bool isSignOutConfirmOpen; + private bool _disposed; + private bool _isPanelOpen; + private bool _isMenuToggled; private List allNavItems = []; - private Action unsubOpenNavPanel = default!; - private BitSearchBox searchBoxRef = default!; - private Action unsubUserDataChange = default!; - private List flatNavItemList = []; - private List filteredNavItems = []; + private BitSearchBox _searchBoxRef = default!; + private List _flatNavItemList = []; + private List _filteredNavItems = []; + + + + /// + /// A collection of item to display in the navigation bar. + /// + [Parameter] + [CallOnSet(nameof(OnSetItems))] + public IList Items { get; set; } = []; + + protected override string RootElementClass => "bit-nav"; + protected override async Task OnInitializedAsync() { //CreateNavItems(); - flatNavItemList = Flatten(allNavItems).ToList().FindAll(link => !string.IsNullOrEmpty(link.Url)); + _flatNavItemList = Flatten(allNavItems).ToList().FindAll(link => !string.IsNullOrEmpty(link.Url)); SearchNavItems(null); @@ -28,31 +39,24 @@ protected override async Task OnInitializedAsync() //}); } - - private async Task ShowSignOutConfirm() - { - isSignOutConfirmOpen = true; - await CloseMenu(); - } - private async Task HandleNavItemClick(BitNavItem item) { if (string.IsNullOrEmpty(item.Url)) return; - filteredNavItems = allNavItems; + _filteredNavItems = allNavItems; await CloseMenu(); } private async Task CloseMenu() { - isPanelOpen = false; + _isPanelOpen = false; } private async Task ToggleNavPanel() { - isMenuToggled = !isMenuToggled; - if (isMenuToggled) + _isMenuToggled = !_isMenuToggled; + if (_isMenuToggled) { SearchNavItems(null); } @@ -60,37 +64,53 @@ private async Task ToggleNavPanel() private async Task ToggleForSearch() { - isMenuToggled = false; + _isMenuToggled = false; await Task.Delay(1); - await searchBoxRef.FocusAsync(); + await _searchBoxRef.FocusAsync(); } private void SearchNavItems(string? searchText) { - filteredNavItems = allNavItems; + _filteredNavItems = allNavItems; if (searchText is null) return; - filteredNavItems = allNavItems; + _filteredNavItems = allNavItems; if (string.IsNullOrEmpty(searchText)) return; - var mainItems = flatNavItemList + 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 + var subItems = _flatNavItemList .FindAll(item => searchText.Split(' ') .Where(t => string.IsNullOrEmpty(t) is false) .Any(t => item.Data?.ToString()?.Contains(t, StringComparison.InvariantCultureIgnoreCase) ?? false)); - filteredNavItems = [.. mainItems, .. subItems]; + _filteredNavItems = [.. mainItems, .. subItems]; } private static IEnumerable Flatten(IEnumerable 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; + } + public void Dispose() { - disposed = true; + Dispose(true); + GC.SuppressFinalize(this); + } + + protected virtual void Dispose(bool disposing) + { + if (disposing is false || _disposed) return; + + _disposed = true; } } From 0ee4417bedbef64b62e0e47167759370ecb90f63 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sun, 22 Dec 2024 13:39:42 +0330 Subject: [PATCH 05/11] improve stuff --- .../Components/NavPanel/BitNavPanel.razor | 101 ++++++++++-------- .../Components/NavPanel/BitNavPanel.razor.cs | 77 ++++++------- .../Components/NavPanel/BitNavPanel.scss | 74 +++++++------ .../NavPanel/BitNavPanelClassStyles.cs | 9 ++ .../Extensions/LinqExtensions.cs | 49 +++++++++ .../Components/Navs/Nav/BitNav.razor.cs | 24 ++++- .../Extensions/StringExtensions.cs | 3 +- 7 files changed, 219 insertions(+), 118 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanelClassStyles.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Extensions/LinqExtensions.cs diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor index f2a0049e18..33a1040784 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor @@ -3,68 +3,83 @@ @typeparam TItem @{ - var isToggled = !_isPanelOpen && _isMenuToggled; + var isToggled = !_isPanelOpen && _isPanelToggled; } -
+