Skip to content

Commit f385a0c

Browse files
gvreddy04gvreddy04
authored
Navbar component (#37)
This pull request introduces a new **Navbar component** to the `BlazorExpress.Bulma` project, alongside several enhancements and documentation updates across the codebase. #### Key Highlights: - **Navbar Component & Documentation**: - Added a fully documented Navbar component with comprehensive demos. - Created detailed documentation pages, including sections for parameters such as `NavbarBrand`, `NavbarMenu`, `NavbarStart`, `NavbarEnd`, `NavbarItem`, `NavbarLink`, and `NavbarDropdown`. - Introduced color variants for the Navbar, allowing different visual styles via a new `NavbarColor` enum. - **Solution & Project Structure**: - Added "src" and "demos" projects to the main solution for clearer project organization. - Updated solution structure to support nested projects. - **Documentation & Layouts**: - Integrated Navbar documentation links into the main demo and documentation layouts. - Standardized documentation references, especially for Google Maps and Tag(s) components, and improved internal linking conventions. - **Styling Improvements**: - Enhanced dark theme support with a new CSS variable for background color. - Improved button and navbar styling with new parameters (`IsSoftVersion`, `Color`) and CSS class support. - **Security & Config Updates**: - Updated Google Maps documentation for API key handling and refactored related interop code. - Secured sensitive information using User Secrets and replaced hardcoded API keys with placeholders. - **Package Updates**: - Upgraded the `BlazorExpress.Bulma.Docx` and `BlazorExpress.Core` package versions to incorporate latest features and improvements. These changes collectively provide a robust navigation component with rich documentation and demo coverage, while improving project structure, security, and theming consistency.
1 parent 85c0dae commit f385a0c

63 files changed

Lines changed: 817 additions & 160 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎BlazorExpress.Bulma.Demo.RCL/BlazorExpress.Bulma.Demo.RCL.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</ItemGroup>
2525

2626
<ItemGroup>
27-
<PackageReference Include="BlazorExpress.Bulma.Docx" Version="0.2.2" />
27+
<PackageReference Include="BlazorExpress.Bulma.Docx" Version="0.3.0" />
2828
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.17" />
2929
<PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />
3030
</ItemGroup>

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoRouteConstants.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ public static class DemoRouteConstants
5151
public const string Demos_Card_Documentation = Demos_Prefix + "/card";
5252
public const string Demos_ConfirmDialog_Documentation = Demos_Prefix + "/confirm-dialog";
5353
public const string Demos_Dropdown_Documentation = Demos_Prefix + "/dropdown";
54-
public const string Demos_GoogleMaps_Documentation = Demos_Prefix + "/google-maps";
54+
public const string Demos_GoogleMap_Documentation = Demos_Prefix + "/google-maps";
5555
public const string Demos_Grid_Documentation = Demos_Prefix + "/grid";
5656
public const string Demos_Menu_Documentation = Demos_Prefix + "/menu";
5757
public const string Demos_Message_Documentation = Demos_Prefix + "/message";
@@ -125,7 +125,7 @@ public static class DemoRouteConstants
125125
public const string Docs_Card_Documentation = Docs_Prefix + "/card";
126126
public const string Docs_ConfirmDialog_Documentation = Docs_Prefix + "/confirm-dialog";
127127
public const string Docs_Dropdown_Documentation = Docs_Prefix + "/dropdown";
128-
public const string Docs_GoogleMaps_Documentation = Docs_Prefix + "/google-maps";
128+
public const string Docs_GoogleMap_Documentation = Docs_Prefix + "/google-maps";
129129
public const string Docs_Grid_Documentation = Docs_Prefix + "/grid";
130130
public const string Docs_Menu_Documentation = Docs_Prefix + "/menu";
131131
public const string Docs_Message_Documentation = Docs_Prefix + "/message";

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoScreenshotSrcConstants.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ public class DemoScreenshotSrcConstants
3939
public const string Grid = DemoScreenshotSrcPrefix + "grid.png";
4040
public const string Message = DemoScreenshotSrcPrefix + "message.png";
4141
public const string Modal = DemoScreenshotSrcPrefix + "modal.png";
42+
public const string Navbar = DemoScreenshotSrcPrefix + "navbar.png";
4243
public const string Pagination = DemoScreenshotSrcPrefix + "pagination.png";
4344
public const string ScriptLoader = DemoScreenshotSrcPrefix + "script-loader.png";
4445
public const string Tabs = DemoScreenshotSrcPrefix + "tabs.png";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ private HashSet<LinkGroup> GetLinkGroups()
101101
Links = [
102102
new Link { Href = DemoRouteConstants.Demos_Breadcrumb_Documentation, Text = "Breadcrumb" },
103103
new Link { Href = DemoRouteConstants.Demos_ConfirmDialog_Documentation, Text = "Confirm Dialog" },
104-
new Link { Href = DemoRouteConstants.Demos_GoogleMaps_Documentation, Text = "Google Maps" },
104+
new Link { Href = DemoRouteConstants.Demos_GoogleMap_Documentation, Text = "Google Maps" },
105105
new Link { Href = DemoRouteConstants.Demos_Grid_Documentation, Text = "Grid" },
106106
new Link { Href = DemoRouteConstants.Demos_Message_Documentation, Text = "Message" },
107107
new Link { Href = DemoRouteConstants.Demos_Modal_Documentation, Text = "Modal" },

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,11 @@ private HashSet<LinkGroup> GetLinkGroups()
9191
Links = [
9292
new Link { Href = DemoRouteConstants.Demos_Breadcrumb_Documentation, Text = "Breadcrumb" },
9393
new Link { Href = DemoRouteConstants.Demos_ConfirmDialog_Documentation, Text = "Confirm Dialog" },
94-
new Link { Href = DemoRouteConstants.Demos_GoogleMaps_Documentation, Text = "Google Maps" },
94+
new Link { Href = DemoRouteConstants.Demos_GoogleMap_Documentation, Text = "Google Maps" },
9595
new Link { Href = DemoRouteConstants.Demos_Grid_Documentation, Text = "Grid" },
9696
new Link { Href = DemoRouteConstants.Demos_Message_Documentation, Text = "Message" },
9797
new Link { Href = DemoRouteConstants.Demos_Modal_Documentation, Text = "Modal" },
98+
new Link { Href = DemoRouteConstants.Demos_Navbar_Documentation, Text = "Navbar" },
9899
new Link { Href = DemoRouteConstants.Demos_Pagination_Documentation, Text = "Pagination" },
99100
new Link { Href = DemoRouteConstants.Demos_ScriptLoader_Documentation, Text = "Script Loader" },
100101
new Link { Href = DemoRouteConstants.Demos_Tabs_Documentation, Text = "Tabs" }

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,11 @@ private HashSet<LinkGroup> GetLinkGroups()
105105
Links = [
106106
new Link { Href = DemoRouteConstants.Docs_Breadcrumb_Documentation, Text = "Breadcrumb" },
107107
new Link { Href = DemoRouteConstants.Docs_ConfirmDialog_Documentation, Text = "Confirm Dialog" },
108-
new Link { Href = DemoRouteConstants.Docs_GoogleMaps_Documentation, Text = "Google Maps" },
108+
new Link { Href = DemoRouteConstants.Docs_GoogleMap_Documentation, Text = "Google Maps" },
109109
new Link { Href = DemoRouteConstants.Docs_Grid_Documentation, Text = "Grid" },
110110
new Link { Href = DemoRouteConstants.Docs_Message_Documentation, Text = "Message" },
111111
new Link { Href = DemoRouteConstants.Docs_Modal_Documentation, Text = "Modal" },
112+
new Link { Href = DemoRouteConstants.Docs_Navbar_Documentation, Text = "Navbar" },
112113
new Link { Href = DemoRouteConstants.Docs_Pagination_Documentation, Text = "Pagination" },
113114
new Link { Href = DemoRouteConstants.Docs_ScriptLoader_Documentation, Text = "Script Loader" },
114115
new Link { Href = DemoRouteConstants.Docs_Tabs_Documentation, Text = "Tabs" }

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Maps/GoogleMapDocumentation.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
</SubTitleTemplate>
1010
</PageHero>
1111

12-
<DocsLink Href="@DemoRouteConstants.Docs_GoogleMaps_Documentation" />
12+
<DocsLink Href="@DemoRouteConstants.Docs_GoogleMap_Documentation" />
1313

1414
<Section Class="p-0" Size="HeadingSize.H2" Name="Prerequisite" PageUrl="@pageUrl" Link="prerequisite">
1515
Before you start using the GoogleMap component in your project, you need an API key.
1616
Please follow the link below for detailed steps.
17-
<b>Link:</b> <a href="https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key" target="_blank">https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key</a>.
17+
<b>Link:</b> <a href="https://developers.google.com/maps/documentation/javascript/get-api-key?setupProd=prerequisites" target="_blank">https://developers.google.com/maps/documentation/javascript/get-api-key?setupProd=prerequisites</a>.
1818
</Section>
1919

2020
<Section Class="p-0" Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
@@ -71,7 +71,7 @@
7171

7272
@code {
7373
private const string componentName = nameof(GoogleMap);
74-
private const string pageUrl = DemoRouteConstants.Demos_GoogleMaps_Documentation;
74+
private const string pageUrl = DemoRouteConstants.Demos_GoogleMap_Documentation;
7575
private const string pageTitle = componentName;
7676
private const string pageDescription = $"<code>{componentName}</code> component will create maps to show locations anywhere in the world using the Google JavaScript API.";
7777
private const string metaTitle = $"Blazor {componentName} Component";

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Navbar/NavbarDocumentation.razor‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@DemoRouteConstants.Docs_Navbar_Documentation" />
13+
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
15+
<Demo Type="typeof(Navbar_Demo_01_How_it_works)" Tabs="true" />
16+
</Section>
17+
18+
<Section Class="p-0" Size="HeadingSize.H3" Name="Colors" PageUrl="@pageUrl" Link="colors">
19+
</Section>
20+
21+
<Section Class="p-0" Size="HeadingSize.H4" Name="Primary" PageUrl="@pageUrl" Link="colors-primary">
22+
<Demo Type="typeof(Navbar_Demo_02_Colors_A_Primary)" Tabs="true" />
23+
</Section>
24+
25+
<Section Class="p-0" Size="HeadingSize.H4" Name="Link" PageUrl="@pageUrl" Link="colors-link">
26+
<Demo Type="typeof(Navbar_Demo_02_Colors_B_Link)" Tabs="true" />
27+
</Section>
28+
29+
<Section Class="p-0" Size="HeadingSize.H4" Name="Info" PageUrl="@pageUrl" Link="colors-info">
30+
<Demo Type="typeof(Navbar_Demo_02_Colors_C_Info)" Tabs="true" />
31+
</Section>
32+
33+
<Section Class="p-0" Size="HeadingSize.H4" Name="Success" PageUrl="@pageUrl" Link="colors-success">
34+
<Demo Type="typeof(Navbar_Demo_02_Colors_D_Success)" Tabs="true" />
35+
</Section>
36+
37+
<Section Class="p-0" Size="HeadingSize.H4" Name="Warning" PageUrl="@pageUrl" Link="colors-warning">
38+
<Demo Type="typeof(Navbar_Demo_02_Colors_E_Warning)" Tabs="true" />
39+
</Section>
40+
41+
<Section Class="p-0" Size="HeadingSize.H4" Name="Danger" PageUrl="@pageUrl" Link="colors-danger">
42+
<Demo Type="typeof(Navbar_Demo_02_Colors_F_Danger)" Tabs="true" />
43+
</Section>
44+
45+
<Section Class="p-0" Size="HeadingSize.H4" Name="Black" PageUrl="@pageUrl" Link="colors-black">
46+
<Demo Type="typeof(Navbar_Demo_02_Colors_G_Black)" Tabs="true" />
47+
</Section>
48+
49+
<Section Class="p-0" Size="HeadingSize.H4" Name="Dark" PageUrl="@pageUrl" Link="colors-dark">
50+
<Demo Type="typeof(Navbar_Demo_02_Colors_H_Dark)" Tabs="true" />
51+
</Section>
52+
53+
<Section Class="p-0" Size="HeadingSize.H4" Name="Light" PageUrl="@pageUrl" Link="colors-light">
54+
<Demo Type="typeof(Navbar_Demo_02_Colors_I_Light)" Tabs="true" />
55+
</Section>
56+
57+
<Section Class="p-0" Size="HeadingSize.H4" Name="White" PageUrl="@pageUrl" Link="colors-white">
58+
<Demo Type="typeof(Navbar_Demo_02_Colors_J_White)" Tabs="true" />
59+
</Section>
60+
61+
<Section Class="p-0" Size="HeadingSize.H3" Name="Transparent" PageUrl="@pageUrl" Link="transparent">
62+
<Demo Type="typeof(Navbar_Demo_99_Transparent)" Tabs="true" />
63+
</Section>
64+
65+
@code {
66+
private const string componentName = nameof(Navbar);
67+
private const string pageUrl = DemoRouteConstants.Demos_Navbar_Documentation;
68+
private const string pageTitle = componentName;
69+
private const string pageDescription = $"A responsive horizontal <code>{componentName}</code> that can support images, links, buttons, and dropdowns";
70+
private const string metaTitle = $"Blazor {componentName} Component";
71+
private const string metaDescription = $"A responsive horizontal {componentName} that can support images, links, buttons, and dropdowns";
72+
private const string imageUrl = DemoScreenshotSrcConstants.Navbar;
73+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Navbar/Navbar_Demo_01_How_it_works.razor‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<Navbar Class="px-3" HasShadow="true">
2+
<NavbarBrand>
3+
<NavbarItem Href="/" IsHoverable="false">
4+
<img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
5+
<span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
6+
</NavbarItem>
7+
</NavbarBrand>
8+
9+
<NavbarMenu Id="navbarBasicExample1">
10+
<NavbarStart>
11+
<NavbarItem Class="mr-1" Href="/">
12+
<i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
13+
</NavbarItem>
14+
<NavbarItem Class="mr-1" Href="/docs">
15+
<i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
16+
</NavbarItem>
17+
18+
<NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
19+
<NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
20+
<NavbarDropdown Position="NavbarDropdownPosition.Right">
21+
<NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
22+
<NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
23+
<NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
24+
</NavbarDropdown>
25+
</NavbarItem>
26+
</NavbarStart>
27+
<NavbarEnd>
28+
<Buttons Size="ButtonSize.Small">
29+
<Button Color="ButtonColor.Primary">Sign up</Button>
30+
<Button>Log in</Button>
31+
</Buttons>
32+
</NavbarEnd>
33+
</NavbarMenu>
34+
</Navbar>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Navbar/Navbar_Demo_02_Colors_A_Primary.razor‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<Navbar Class="px-3" Color="NavbarColor.Primary">
2+
<NavbarBrand>
3+
<NavbarItem Href="/" IsHoverable="false">
4+
<img src="https://bulma.blazorexpress.com/_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png" alt="BlazorExpress Bulma" />
5+
<span class="ml-2 is-size-5 has-text-weight-bold">Bulma</span>
6+
</NavbarItem>
7+
</NavbarBrand>
8+
9+
<NavbarMenu Id="navbarBasicExample1">
10+
<NavbarStart>
11+
<NavbarItem Class="mr-1" Href="/">
12+
<i class="bi bi-file-text-fill has-text-link mr-2"></i>Home
13+
</NavbarItem>
14+
<NavbarItem Class="mr-1" Href="/docs">
15+
<i class="bi bi-display-fill has-text-primary mr-2"></i>Docs
16+
</NavbarItem>
17+
18+
<NavbarItem Type="NavbarItemType.Div" HasDropdown="true">
19+
<NavbarLink Class="be-bulma-theme-indicator">More</NavbarLink>
20+
<NavbarDropdown Position="NavbarDropdownPosition.Right">
21+
<NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">About</NavbarItem>
22+
<NavbarItem Class="be-bulma-theme-item is-clickable my-1" Type="NavbarItemType.Link">Jobs</NavbarItem>
23+
<NavbarItem Class="be-bulma-theme-item is-clickable" Type="NavbarItemType.Link">Contact</NavbarItem>
24+
</NavbarDropdown>
25+
</NavbarItem>
26+
</NavbarStart>
27+
<NavbarEnd>
28+
<Buttons Size="ButtonSize.Small">
29+
<Button Color="ButtonColor.Primary" IsSoftVersion="true">Sign up</Button>
30+
<Button Color="ButtonColor.Primary" IsLightVersion="true">Log in</Button>
31+
</Buttons>
32+
</NavbarEnd>
33+
</NavbarMenu>
34+
</Navbar>

0 commit comments

Comments
 (0)