Skip to content

Commit 04fac5e

Browse files
gvreddy04gvreddy04
authored
Enhance menu structure and update branding (#27)
Refactor Blazor components in `BlogMainLayout.razor`, `DemosMainLayout.razor`, and `DocsMainLayout.razor` to replace `<NavLink>` with `<MenuItem>`, introducing `Href` and `Match` properties for improved link handling. Update button text in `01_A_Manual_Install_06_Snippet.razor` and `02_A_Manual_Install_06_Snippet.razor` to reflect new branding. Adjust CSS formatting in `Menu.razor.css` for consistency. Modify rendering logic in `MenuItem.razor` to conditionally wrap `ChildContent` in a `<NavLink>` based on `Href`. Add `Href` and `Match` properties to the `MenuItem` class in `MenuItem.razor.cs` for enhanced control. Change `Match` property type in `Link` class from `NavLinkMatch` to `MenuItemMatch` in `Link.cs`. Update `_Imports.razor` to include additional namespaces for routing and web components. Introduce new `MenuItemMatch` enum to define menu item matching behavior.
1 parent 5ff7da4 commit 04fac5e

12 files changed

Lines changed: 75 additions & 22 deletions

File tree

‎BlazorExpress.Bulma.Demo.RCL/Layout/BlogMainLayout.razor‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,17 @@
2222
<MenuItem>
2323
@if (link.Links?.Any() ?? false) // level 2 links
2424
{
25-
<NavLink ActiveClass="is-active">@link.Text</NavLink>
25+
<NavLink ActiveClass="is-active">@link.Text</NavLink> <!-- TODO: Handle label only scenario -->
2626
<MenuList>
2727
@foreach (var cLink in link.Links)
2828
{
29-
<MenuItem>
30-
<NavLink href="@cLink.Href" Match="@cLink.Match" ActiveClass="is-active">@cLink.Text</NavLink>
31-
</MenuItem>
29+
<MenuItem Href="@cLink.Href" Match="@cLink.Match">@cLink.Text</MenuItem>
3230
}
3331
</MenuList>
3432
}
3533
else
3634
{
37-
<NavLink href="@link.Href" Match="@link.Match" ActiveClass="is-active">@link.Text</NavLink>
35+
<MenuItem Href="@link.Href" Match="@link.Match">@link.Text</MenuItem>
3836
}
3937
</MenuItem>
4038
}

‎BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@inherits MainLayoutBase
33

44
<BulmaLayout>
5-
65
<HeaderSection>
76
<WebsiteNavbar BrandImgSrc="_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png"
87
BrandImgAltText="Blazor Express Logo"
@@ -22,19 +21,17 @@
2221
<MenuItem>
2322
@if (link.Links?.Any() ?? false) // level 2 links
2423
{
25-
<NavLink ActiveClass="is-active">@link.Text</NavLink>
24+
<NavLink ActiveClass="is-active">@link.Text</NavLink> <!-- TODO: Handle label only scenario -->
2625
<MenuList>
2726
@foreach (var cLink in link.Links)
2827
{
29-
<MenuItem>
30-
<NavLink href="@cLink.Href" Match="@cLink.Match" ActiveClass="is-active">@cLink.Text</NavLink>
31-
</MenuItem>
28+
<MenuItem Href="@cLink.Href" Match="@cLink.Match">@cLink.Text</MenuItem>
3229
}
3330
</MenuList>
3431
}
3532
else
3633
{
37-
<NavLink href="@link.Href" Match="@link.Match" ActiveClass="is-active">@link.Text</NavLink>
34+
<MenuItem Href="@link.Href" Match="@link.Match">@link.Text</MenuItem>
3835
}
3936
</MenuItem>
4037
}

‎BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,17 @@
2222
<MenuItem>
2323
@if (link.Links?.Any() ?? false) // level 2 links
2424
{
25-
<NavLink ActiveClass="is-active">@link.Text</NavLink>
25+
<NavLink ActiveClass="is-active">@link.Text</NavLink> <!-- TODO: Handle label only scenario -->
2626
<MenuList>
2727
@foreach (var cLink in link.Links)
2828
{
29-
<MenuItem>
30-
<NavLink href="@cLink.Href" Match="@cLink.Match" ActiveClass="is-active">@cLink.Text</NavLink>
31-
</MenuItem>
29+
<MenuItem Href="@cLink.Href" Match="@cLink.Match">@cLink.Text</MenuItem>
3230
}
3331
</MenuList>
3432
}
3533
else
3634
{
37-
<NavLink href="@link.Href" Match="@link.Match" ActiveClass="is-active">@link.Text</NavLink>
35+
<MenuItem Href="@link.Href" Match="@link.Match">@link.Text</MenuItem>
3836
}
3937
</MenuItem>
4038
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Docs/GettingStarted/net8/01_A_Manual_Install_06_Snippet.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<Button Color="ButtonColor.Primary">Hello Bulma!</Button>
1+
<Button Color="ButtonColor.Primary">Hello BlazorExpress.Bulma!</Button>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Docs/GettingStarted/net8/02_A_Manual_Install_06_Snippet.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<Button Color="ButtonColor.Primary">Hello Bulma!</Button>
1+
<Button Color="ButtonColor.Primary">Hello BlazorExpress.Bulma!</Button>

‎BlazorExpress.Bulma/Components/Layout/BulmaLayout.razor.css‎

Whitespace-only changes.

‎BlazorExpress.Bulma/Components/Menu/Menu.razor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.menu {
22
background-color: hsl(var(--bulma-scheme-h),var(--bulma-scheme-s),calc(var(--bulma-scheme-main-l) + var(--be-bulma-menu-background-offset)));
33
border-right: 0;
4-
border-bottom: var(--be-bulma-menu-border) solid hsl(var(--bulma-scheme-h),var(--bulma-scheme-s),calc(var(--bulma-scheme-main-l) + var(--be-menu-border-offset)));
4+
border-bottom: var(--be-bulma-menu-border) solid hsl(var(--bulma-scheme-h),var(--bulma-scheme-s),calc(var(--bulma-scheme-main-l) + var(--be-bulma-menu-border-offset)));
55
}
66

77
@media screen and (width > 768px) {
88
.menu {
99
background-color: hsl(var(--bulma-scheme-h),var(--bulma-scheme-s),calc(var(--bulma-scheme-main-l) + var(--be-bulma-menu-background-offset)));
10-
border-right: var(--be-bulma-menu-border) solid hsl(var(--bulma-scheme-h),var(--bulma-scheme-s),calc(var(--bulma-scheme-main-l) + var(--be-menu-border-offset)));
10+
border-right: var(--be-bulma-menu-border) solid hsl(var(--bulma-scheme-h),var(--bulma-scheme-s),calc(var(--bulma-scheme-main-l) + var(--be-bulma-menu-border-offset)));
1111
border-bottom: 0;
1212
width: var(--be-bulma-menu-width);
1313
height: calc(100vh - var(--be-bulma-navbar-height));

‎BlazorExpress.Bulma/Components/Menu/MenuItem.razor‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,19 @@
77
style="@StyleNames"
88
@attributes="@AdditionalAttributes"
99
@onclick="OnMenuItemClick">
10-
@ChildContent
10+
11+
@if (!string.IsNullOrWhiteSpace(Href))
12+
{
13+
<NavLink href="@Href" Match="NavLinkMatch" ActiveClass="is-active">
14+
@ChildContent
15+
</NavLink>
16+
}
17+
else
18+
{
19+
@ChildContent
20+
}
21+
22+
@* <NavLink href="@Href" Match="NavLinkMatch" ActiveClass="is-active">
23+
@ChildContent
24+
</NavLink> *@
1125
</li>

‎BlazorExpress.Bulma/Components/Menu/MenuItem.razor.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,18 @@ private void OnMenuItemClick()
4343
[Parameter]
4444
public RenderFragment? ChildContent { get; set; }
4545

46+
/// <summary>
47+
/// Gets or sets the hyperlink reference.
48+
/// <para>
49+
/// Default value is <see langword="null" />.
50+
/// </para>
51+
/// </summary>
52+
[AddedVersion("1.0.0")]
53+
[DefaultValue(null)]
54+
[Description("Gets or sets the hyperlink reference.")]
55+
[Parameter]
56+
public string? Href { get; set; }
57+
4658
/// <summary>
4759
/// Gets or sets the active state.
4860
/// <para>
@@ -55,6 +67,20 @@ private void OnMenuItemClick()
5567
[Parameter]
5668
public bool IsActive { get; set; } = false;
5769

70+
/// <summary>
71+
/// Gets or sets the criteria used to match menu items.
72+
/// <para>
73+
/// Default is <see cref="MenuItemMatch.Prefix" />.
74+
/// </para>
75+
/// </summary>
76+
[AddedVersion("1.0.0")]
77+
[DefaultValue(MenuItemMatch.Prefix)]
78+
[Description("Gets or sets the criteria used to match menu items.")]
79+
[Parameter]
80+
public MenuItemMatch Match { get; set; } = MenuItemMatch.Prefix;
81+
82+
private NavLinkMatch NavLinkMatch => Match == MenuItemMatch.All ? NavLinkMatch.All : NavLinkMatch.Prefix;
83+
5884
/// <summary>
5985
/// Gets or sets the parent.
6086
/// <para>

‎BlazorExpress.Bulma/Enums/MenuItemMatch.cs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
namespace BlazorExpress.Bulma;
2+
3+
/// <summary>
4+
/// Modifies the URL matching behavior for a Microsoft.AspNetCore.Components.Routing.NavLink.
5+
/// </summary>
6+
public enum MenuItemMatch
7+
{
8+
/// <summary>
9+
/// Specifies that the Microsoft.AspNetCore.Components.Routing.NavLink should be
10+
/// active when it matches any prefix of the current URL.
11+
/// </summary>
12+
Prefix = 0,
13+
14+
/// <summary>
15+
/// Specifies that the Microsoft.AspNetCore.Components.Routing.NavLink should be
16+
/// active when it matches the entire current URL.
17+
/// </summary>
18+
All = 1
19+
}

0 commit comments

Comments
 (0)