Skip to content

Commit ca1b562

Browse files
gvreddy04gvreddy04
committed
Replace BulmaNavbar with WebsiteNavbar component
This commit introduces a new `WebsiteNavbar` component across multiple layout files, enhancing navigation with additional links and theme toggling functionality. The `MainLayout.razor.cs` file has been simplified by removing commented-out code related to link groups. The footer now omits a link to "Open Collective," and the NuGet package link in `Index.razor` has been updated to reflect the rebranding to `BlazorExpress.ChartJS`. Additionally, the logo has been changed from `logo-180.png` to `logo.png`, with corresponding updates in the project file. The old logo file has been deleted, marking a transition to the new branding.
1 parent 42b947a commit ca1b562

13 files changed

Lines changed: 168 additions & 120 deletions

File tree

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<BulmaLayout>
55

66
<HeaderSection>
7-
<BulmaNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
8-
BrandImgAltText="Blazor Express Logo"
9-
ApplicationName="@StringConstants.NugetPackageName" />
7+
<WebsiteNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
8+
BrandImgAltText="Blazor Express Logo"
9+
ApplicationName="@StringConstants.NugetPackageName" />
1010
</HeaderSection>
1111

1212
<SidebarSection>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<BulmaLayout>
55

66
<HeaderSection>
7-
<BulmaNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
8-
BrandImgAltText="Blazor Express Logo"
9-
ApplicationName="@StringConstants.NugetPackageName" />
7+
<WebsiteNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
8+
BrandImgAltText="Blazor Express Logo"
9+
ApplicationName="@StringConstants.NugetPackageName" />
1010
</HeaderSection>
1111

1212
<SidebarSection>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<BulmaLayout>
55

66
<HeaderSection>
7-
<BulmaNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
8-
BrandImgAltText="Blazor Express Logo"
9-
ApplicationName="@StringConstants.NugetPackageName" />
7+
<WebsiteNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
8+
BrandImgAltText="Blazor Express Logo"
9+
ApplicationName="@StringConstants.NugetPackageName" />
1010
</HeaderSection>
1111

1212
<SidebarSection>

‎BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
<BulmaLayout>
55
<HeaderSection>
6-
<BulmaNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
7-
BrandImgAltText="Blazor Express Logo"
8-
ApplicationName="@StringConstants.NugetPackageName" />
6+
<WebsiteNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
7+
BrandImgAltText="Blazor Express Logo"
8+
ApplicationName="@StringConstants.NugetPackageName" />
99
</HeaderSection>
1010
<ContentSection>
1111
@Body

‎BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor.cs‎

Lines changed: 0 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -20,107 +20,5 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
2020
await base.OnAfterRenderAsync(firstRender);
2121
}
2222

23-
protected override void OnInitialized()
24-
{
25-
//if (!linkGroups.Any())
26-
// linkGroups = GetLinkGroups();
27-
28-
base.OnInitialized();
29-
}
30-
31-
//private HashSet<LinkGroup> GetLinkGroups()
32-
//{
33-
// var groups = new HashSet<LinkGroup>();
34-
35-
// // GETTING STARTED
36-
// groups.Add(new LinkGroup
37-
// {
38-
// Name = "GETTING STARTED",
39-
// CssClass = "is-size-7 has-text-weight-bold has-text-danger",
40-
// Links = [
41-
// new Link { Href = RouteConstants.Demos_Getting_Started_Introduction, Text = "Introduction" },
42-
// ]
43-
// });
44-
45-
// // FEATURES
46-
// groups.Add(new LinkGroup
47-
// {
48-
// Name = "FEATURES",
49-
// CssClass = "is-size-7 has-text-weight-bold has-text-warning",
50-
// Links = [
51-
// new Link { Href = RouteConstants.Demos_Skeletons_Documentation, Text = "Skeletons" }
52-
// ]
53-
// });
54-
55-
// // ICONS
56-
// groups.Add(new LinkGroup
57-
// {
58-
// Name = "ICONS",
59-
// CssClass = "is-size-7 has-text-weight-bold has-text-info",
60-
// Links = [
61-
// new Link { Href = RouteConstants.Demos_BootstrapIcons_Documentation, Text = "Bootstrap Icons" },
62-
// new Link { Href = RouteConstants.Demos_GoogleFontIcons_Documentation, Text = "Google Font Icons" }
63-
// ]
64-
// });
65-
66-
// // ELEMENTS
67-
// groups.Add(new LinkGroup
68-
// {
69-
// Name = "ELEMENTS",
70-
// CssClass = "is-size-7 has-text-weight-bold has-text-primary",
71-
// Links = [
72-
// new Link { Href = RouteConstants.Demos_Block_Documentation, Text = "Block" },
73-
// new Link { Href = RouteConstants.Demos_Box_Documentation, Text = "Box" },
74-
// new Link { Href = RouteConstants.Demos_Button_Documentation, Text = "Button" },
75-
// new Link { Href = RouteConstants.Demos_DeleteButton_Documentation, Text = "Delete Button" },
76-
// new Link { Href = RouteConstants.Demos_Image_Documentation, Text = "Image" },
77-
// new Link { Href = RouteConstants.Demos_Notification_Documentation, Text = "Notification" },
78-
// new Link { Href = RouteConstants.Demos_ProgressBar_Documentation, Text = "Progress Bar" },
79-
// new Link { Href = RouteConstants.Demos_Tags_Documentation, Text = "Tags" },
80-
// ]
81-
// });
82-
83-
// // FORM
84-
// groups.Add(new LinkGroup
85-
// {
86-
// Name = "FORM",
87-
// CssClass = "is-size-7 has-text-weight-bold has-text-primary",
88-
// Links = [
89-
// new Link { Href = RouteConstants.Demos_Form_DateInput_Documentation , Text = "Date Input" },
90-
// new Link { Href = RouteConstants.Demos_Form_OTPInput_Documentation , Text = "OTP Input" },
91-
// new Link { Href = RouteConstants.Demos_Form_TextInput_Documentation , Text = "Text Input" },
92-
// ]
93-
// });
94-
95-
// // COMPONENTS
96-
// groups.Add(new LinkGroup
97-
// {
98-
// Name = "COMPONENTS",
99-
// CssClass = "is-size-7 has-text-weight-bold has-text-dark",
100-
// Links = [
101-
// new Link { Href = RouteConstants.Demos_ConfirmDialog_Documentation, Text = "Confirm Dialog" },
102-
// new Link { Href = RouteConstants.Demos_GoogleMaps_Documentation, Text = "Google Maps" },
103-
// new Link { Href = RouteConstants.Demos_Grid_Documentation, Text = "Grid" },
104-
// new Link { Href = RouteConstants.Demos_Message_Documentation, Text = "Message" },
105-
// new Link { Href = RouteConstants.Demos_Modal_Documentation, Text = "Modal" },
106-
// new Link { Href = RouteConstants.Demos_Pagination_Documentation, Text = "Pagination" },
107-
// new Link { Href = RouteConstants.Demos_ScriptLoader_Documentation, Text = "Script Loader" },
108-
// new Link { Href = RouteConstants.Demos_Tabs_Documentation, Text = "Tabs" }
109-
// ]
110-
// });
111-
112-
// // LAYOUT
113-
// groups.Add(new LinkGroup
114-
// {
115-
// Name = "LAYOUT",
116-
// CssClass = "is-size-7 has-text-weight-bold has-text-success",
117-
// Links = [
118-
// new Link { Href = RouteConstants.Demos_Hero_Documentation, Text = "Hero" }
119-
// ]
120-
// });
121-
122-
// return groups;
123-
//}
124-
12523
#endregion
12624
}

‎BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<ul class="menu-list">
5050
<li><a href="@GithubIssuesUrl" target="_blank">Issues</a></li>
5151
<li><a href="@GithubDiscussionsUrl" target="_blank">Discussions</a></li>
52-
<li><a href="@OpenCollectiveUrl" target="_blank">Open Collective</a></li>
52+
@* <li><a href="@OpenCollectiveUrl" target="_blank">Open Collective</a></li> *@
5353
<li><a href="@StackoverflowUrl" target="_blank">Stack Overflow</a></li>
5454
</ul>
5555
</div>

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Home/Index.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
</HeroSubTitle>
2525
</Hero>
2626
<div class="mb-4">
27-
<a href="@nugetUrl"><img alt="Nuget" src="https://img.shields.io/nuget/v/Blazor.Bootstrap"></a>
27+
<a href="@nugetUrl" target="_blank"><img alt="Nuget" src="https://img.shields.io/nuget/v/BlazorExpress.ChartJS"></a>
2828
<span class="px-1"></span>
29-
<a href="@nugetUrl"><img alt="Nuget" src="https://img.shields.io/nuget/dt/Blazor.Bootstrap"></a>
29+
<a href="@nugetUrl" target="_blank"><img alt="Nuget" src="https://img.shields.io/nuget/dt/BlazorExpress.ChartJS"></a>
3030
</div>
3131
</div>
3232
</div>

‎BlazorExpress.ChartJS.Demo.RCL/Shared/WebsiteNavbar.razor‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@namespace BlazorExpress.ChartJS.Demo.RCL
2+
@inherits BulmaComponentBase
3+
4+
<Navbar Class="px-3" HasShadow="true">
5+
<NavbarBrand>
6+
<NavbarItem Href="/" IsHoverable="false">
7+
@if (!string.IsNullOrWhiteSpace(BrandImgSrc))
8+
{
9+
<img src="@BrandImgSrc" alt="@BrandImgAltText" />
10+
}
11+
@if (!string.IsNullOrWhiteSpace(ApplicationName))
12+
{
13+
<span class="ml-2 is-size-5 has-text-weight-bold">@ApplicationName</span>
14+
}
15+
</NavbarItem>
16+
17+
<NavbarBurger TargetId="navbarBasicExample1" IsActive="navbarMenuActive" ActiveStateChanged="ToggleNavbarMenu">
18+
<i class="bi bi-three-dots-vertical"></i>
19+
</NavbarBurger>
20+
</NavbarBrand>
21+
22+
<NavbarMenu Id="navbarBasicExample1" IsActive="navbarMenuActive">
23+
<NavbarStart>
24+
<NavbarItem Class="mr-1" Href="/docs">
25+
<i class="bi bi-file-text-fill has-text-link mr-2"></i>Docs
26+
</NavbarItem>
27+
<NavbarItem Class="mr-1" Href="/demos">
28+
<i class="bi bi-display-fill has-text-primary mr-2"></i>Demos
29+
</NavbarItem>
30+
@* <NavbarItem Href="/blog">
31+
<i class="bi bi-newspaper has-text-warning mr-2"></i>Blog
32+
</NavbarItem> *@
33+
</NavbarStart>
34+
<NavbarEnd>
35+
<NavbarItem Class="mr-1" Href="@GithubUrl" target="_blank">
36+
<i class="bi bi-github"></i>
37+
<small class="is-hidden-desktop ml-2">GitHub</small>
38+
</NavbarItem>
39+
<NavbarItem Class="mr-1" Href="@TwitterUrl" target="_blank">
40+
<i class="bi bi-twitter-x"></i>
41+
<small class="is-hidden-desktop ml-2">Twitter</small>
42+
</NavbarItem>
43+
<NavbarItem Href="@LinkedInUrl" target="_blank">
44+
<i class="bi bi-linkedin"></i>
45+
<small class="is-hidden-desktop ml-2">LinkedIn</small>
46+
</NavbarItem>
47+
<NavbarItem Type="NavbarItemType.Div">
48+
<span class="tag is-link">@Version</span>
49+
</NavbarItem>
50+
51+
<NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
52+
<NavbarLink Class="be-bulma-theme-indicator"><i class="bi bi-sun"></i></NavbarLink>
53+
<NavbarDropdown Class="mt-2" Position="NavbarDropdownPosition.Right">
54+
<NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link" data-scheme="light" @onclick="SetLightTheme"><i class="bi bi-sun mr-2"></i>Light</NavbarItem>
55+
<NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link" data-scheme="dark" @onclick="SetDarkTheme"><i class="bi bi-moon-stars-fill mr-2"></i>Dark</NavbarItem>
56+
<NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link" data-scheme="system" @onclick="SetAutoTheme"><i class="bi bi-circle-half mr-2"></i>Auto</NavbarItem>
57+
</NavbarDropdown>
58+
</NavbarItem>
59+
60+
</NavbarEnd>
61+
</NavbarMenu>
62+
</Navbar>

‎BlazorExpress.ChartJS.Demo.RCL/Shared/WebsiteNavbar.razor.cs‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
namespace BlazorExpress.ChartJS.Demo.RCL;
2+
3+
/// <summary>
4+
/// Website Navbar component
5+
/// </summary>
6+
public partial class WebsiteNavbar : BulmaComponentBase
7+
{
8+
#region Fields and Constants
9+
10+
private bool navbarMenuActive;
11+
12+
private string version = default!;
13+
private string dotNetVersion = default!;
14+
private string docsUrl = default!;
15+
private string blogUrl = default!;
16+
private string githubUrl = default!;
17+
private string nugetUrl = default!;
18+
private string twitterUrl = default!;
19+
private string linkedInUrl = default!;
20+
private string openCollectiveUrl = default!;
21+
private string githubIssuesUrl = default!;
22+
private string githubDiscussionsUrl = default!;
23+
private string stackoverflowUrl = default!;
24+
25+
#endregion
26+
27+
#region Methods
28+
29+
protected override void OnInitialized()
30+
{
31+
version = $"v{Configuration["version"]}"; // example: v0.6.1
32+
dotNetVersion = $".NET {Configuration["dotNetVersion"]}"; // example: 9.0.0
33+
docsUrl = $"{Configuration["urls:docs"]}";
34+
blogUrl = $"{Configuration["urls:blog"]}";
35+
githubUrl = $"{Configuration["urls:github"]}";
36+
nugetUrl = $"{Configuration["urls:nuget"]}";
37+
twitterUrl = $"{Configuration["urls:twitter"]}";
38+
linkedInUrl = $"{Configuration["urls:linkedin"]}";
39+
openCollectiveUrl = $"{Configuration["urls:opencollective"]}";
40+
githubIssuesUrl = $"{Configuration["urls:github_issues"]}";
41+
githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
42+
stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
43+
}
44+
45+
private Task SetAutoTheme() => SetTheme("system");
46+
47+
private Task SetDarkTheme() => SetTheme("dark");
48+
49+
private Task SetLightTheme() => SetTheme("light");
50+
51+
private async Task SetTheme(string themeName)
52+
{
53+
await JSRuntime.InvokeVoidAsync("setTheme", themeName);
54+
navbarMenuActive = false;
55+
}
56+
57+
private void ToggleNavbarMenu(bool isActive)
58+
{
59+
navbarMenuActive = isActive;
60+
}
61+
62+
#endregion
63+
64+
#region Properties, Indexers
65+
66+
[Inject] public IConfiguration Configuration { get; set; } = default!;
67+
68+
[Parameter] public string? ApplicationName { get; set; } = null;
69+
70+
[Parameter] public string? BrandImgAltText { get; set; } = null;
71+
72+
[Parameter] public string? BrandImgSrc { get; set; } = null;
73+
74+
public string Version => version;
75+
public string DotNetVersion => dotNetVersion;
76+
public string DocsUrl => docsUrl;
77+
public string BlogUrl => blogUrl;
78+
public string GithubUrl => githubUrl;
79+
public string NuGetUrl => nugetUrl;
80+
public string TwitterUrl => twitterUrl;
81+
public string LinkedInUrl => linkedInUrl;
82+
public string OpenCollectiveUrl => openCollectiveUrl;
83+
public string GithubIssuesUrl => githubIssuesUrl;
84+
public string GithubDiscussionsUrl => githubDiscussionsUrl;
85+
public string StackoverflowUrl => stackoverflowUrl;
86+
87+
#endregion
88+
}

‎BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<div id="app">
3434
<div class="bd-splash-icon">
3535
<div class="has-text-centered">
36-
<img src="logo-180.png" width="64" alt="Blazor Bootstrap - The BlazorExpress.ChartJs component library is a production-ready library built with Blazor and the Chart.js JavaScript library." />
36+
<img src="logo.png" width="64" alt="Blazor Bootstrap - The BlazorExpress.ChartJs component library is a production-ready library built with Blazor and the Chart.js JavaScript library." />
3737
<div class="mt-2">Loading...</div>
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)