Skip to content

Commit 3b090c9

Browse files
sjefvanleeuwensjefvanleeuwen
committed
Adding navbar left injectable menu documentation
1 parent 03926fd commit 3b090c9

5 files changed

+148
-0
lines changed

‎docs/img/custom-menu-extra-info.png

12 KB
Loading

‎docs/img/custom-menu-page-override.png

11.1 KB
Loading

‎docs/img/custom-menu-page.png

11.8 KB
Loading

‎docs/navbar-left-injectable-menu.md

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
# Navbar Left Injectable Menu
2+
3+
Each page can add a custom top left menu using a DI injectable.
4+
5+
### Startup.cs
6+
7+
The injectable is configured using an addscoped simply by adding this line in your configure services startup.
8+
9+
```CSharp
10+
public void ConfigureServices(IServiceCollection services)
11+
{
12+
...
13+
services.AddAdminLte();
14+
}
15+
16+
```
17+
18+
### MainLayout.razor
19+
20+
In the main layout you indicate where you want the navbar to appear. You can choose to specify a global
21+
menu here. Notice the OverrideParentContent property on the injectable. If set to true in any other
22+
page, in this case the About menu will not get rendered, this allowing you to override the main layout
23+
menu if so desired.
24+
25+
```html
26+
@inherits LayoutComponentBase
27+
@inject NavigationManager NavigationManager
28+
@inject IJSRuntime JS
29+
@inject NavBarLeftInjectableMenu navBarLeftInjectableMenu
30+
@inject ILayoutManager layoutManager
31+
<NavBar>
32+
<NavBarLeft>
33+
@if (!navBarLeftInjectableMenu.OverrideParentContent)
34+
{
35+
// Put your global menu here
36+
<NavBarMenuItem Link="/About">About</NavBarMenuItem>
37+
}
38+
@navBarLeftInjectableMenu.content <!-- Injectable for custom menu content per page -->
39+
</NavBarLeft>
40+
</NavBar>
41+
```
42+
43+
### CustomMenu.razor
44+
45+
Lets create a custom menu.
46+
47+
```html
48+
<NavBarMenuItem Link="/extra-info">Extra Info</NavBarMenuItem>
49+
```
50+
51+
### CustomPage.razor
52+
53+
Lets make a Custom page, that consumes the custom menu item and place it next to the default
54+
about menu item.
55+
56+
```html
57+
@page "/custom-page"
58+
@inject NavBarLeftInjectableMenu menu
59+
60+
@menu.SetContent(@<CustomMenu />)
61+
<ContentHeader>
62+
<Header>
63+
<PageTitle Title="Custom Page" />
64+
</Header>
65+
</ContentHeader>
66+
<ContentMain>
67+
<Card>
68+
<Title><CardTitle>Title</CardTitle></Title>
69+
<Body>
70+
Contents
71+
</Body>
72+
</Card>
73+
</ContentMain>
74+
```
75+
76+
### ExtraInfo.razor
77+
78+
Now create an extra info page, which you can select from the CustomPage.razor menu. Note that
79+
we repeat the injectable
80+
81+
```html
82+
@page "/extra-info"
83+
@inject NavBarLeftInjectableMenu menu
84+
85+
@menu.SetContent(@<CustomMenu />)
86+
<ContentHeader>
87+
<Header>
88+
<PageTitle Title="Extra Info Page" />
89+
</Header>
90+
</ContentHeader>
91+
<ContentMain>
92+
<Card>
93+
<Title><CardTitle>Title</CardTitle></Title>
94+
<Body>
95+
Extra Info
96+
</Body>
97+
</Card>
98+
</ContentMain>
99+
```
100+
101+
Now, in your browser, navigate to:
102+
103+
```
104+
/custom-page
105+
```
106+
107+
On the custom page you will see the custom menu rendered next to the about menu item (coming from Mainlayout.cs)
108+
109+
![custom-menu-page](./img/custom-menu-page.png)
110+
111+
Now navigate to the Extra Info page and you will see, the same menu rendered again
112+
113+
![custom-menu-extra-info](./img/custom-menu-extra-info.png)
114+
115+
### Override MainLayout menu
116+
117+
Now alter the CustomPage.razor:
118+
119+
```html
120+
@menu.SetContent(@<CustomMenu /> )
121+
```
122+
123+
And set override parent content to true:
124+
125+
```html
126+
@menu.SetContent(@<CustomMenu />,true )
127+
128+
```
129+
130+
Now Navigate again to:
131+
132+
```
133+
/custom-page
134+
```
135+
136+
The about menu will have disapeared
137+
138+
![custom-menu-extra-info](./img/custom-menu-page-override.png)
139+
140+
**!Note**, when again visiting the Extra Info page, the about menu will appear again. You can also
141+
override the parent content in the Extra Info page if so desired.
142+

‎readme.md

+6
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,9 @@ The site shared components [`MainLayout.razor`](./src/Blazor.AdminLte.Site.Share
6464
With such markup you can render something like this:
6565

6666
![screenshot](docs/img/adminlte-screenshot.png)
67+
68+
### Injectable Left Top Menu
69+
70+
You can have control over the left top menu content's navbar. To do so please follow these guidelines:
71+
72+
[Tutorial Injectable Left Top Menu](./docs/navbar-left-injectable-menu.md)

0 commit comments

Comments
 (0)