Skip to content

Commit d8dec77

Browse files
marin-bratanovmarin-bratanov
committed
feat(drawer): sample for sidenav
1 parent 2ff9e4d commit d8dec77

30 files changed

+1436
-0
lines changed

‎drawer/sidenav/App.razor

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Router AppAssembly="typeof(Program).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
4+
</Found>
5+
<NotFound>
6+
<h1>Page not found</h1>
7+
<p>Sorry, but there's nothing here!</p>
8+
</NotFound>
9+
</Router>

‎drawer/sidenav/Data/WeatherForecast.cs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using System;
2+
3+
namespace sidenav.Data
4+
{
5+
public class WeatherForecast
6+
{
7+
public DateTime Date { get; set; }
8+
9+
public int TemperatureC { get; set; }
10+
11+
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
12+
13+
public string Summary { get; set; }
14+
}
15+
}

‎drawer/sidenav/Data/WeatherForecastService.cs

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
using System;
2+
using System.Linq;
3+
using System.Threading.Tasks;
4+
5+
namespace sidenav.Data
6+
{
7+
public class WeatherForecastService
8+
{
9+
private static readonly string[] Summaries = new[]
10+
{
11+
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
12+
};
13+
14+
public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
15+
{
16+
var rng = new Random();
17+
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
18+
{
19+
Date = startDate.AddDays(index),
20+
TemperatureC = rng.Next(-20, 55),
21+
Summary = Summaries[rng.Next(Summaries.Length)]
22+
}).ToArray());
23+
}
24+
}
25+
}

‎drawer/sidenav/Pages/Counter.razor

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page "/counter"
2+
3+
<h1>Counter</h1>
4+
5+
<p>Current count: @currentCount</p>
6+
7+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
8+
9+
@code {
10+
int currentCount = 0;
11+
12+
void IncrementCount()
13+
{
14+
currentCount++;
15+
}
16+
}

‎drawer/sidenav/Pages/FetchData.razor

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@page "/fetchdata"
2+
@using sidenav.Data
3+
@inject WeatherForecastService ForecastService
4+
5+
<h1>Weather forecast</h1>
6+
7+
<p>This component demonstrates fetching data from a service.</p>
8+
9+
@if (forecasts == null)
10+
{
11+
<p><em>Loading...</em></p>
12+
}
13+
else
14+
{
15+
<table class="table">
16+
<thead>
17+
<tr>
18+
<th>Date</th>
19+
<th>Temp. (C)</th>
20+
<th>Temp. (F)</th>
21+
<th>Summary</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
@foreach (var forecast in forecasts)
26+
{
27+
<tr>
28+
<td>@forecast.Date.ToShortDateString()</td>
29+
<td>@forecast.TemperatureC</td>
30+
<td>@forecast.TemperatureF</td>
31+
<td>@forecast.Summary</td>
32+
</tr>
33+
}
34+
</tbody>
35+
</table>
36+
}
37+
38+
@code {
39+
WeatherForecast[] forecasts;
40+
41+
protected override async Task OnInitializedAsync()
42+
{
43+
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
44+
}
45+
}

‎drawer/sidenav/Pages/Index.razor

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@page "/"
2+
3+
<h1>Hello, world!</h1>
4+
5+
Welcome to your new app.<br />
6+
7+
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
8+
9+
<br />
10+
11+
@helloString
12+
13+
<div style="height: 2000px; width: 2000px; background: yellow;"></div>
14+
15+
@code {
16+
MarkupString helloString;
17+
18+
void SayHelloHandler()
19+
{
20+
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
21+
helloString = new MarkupString(msg);
22+
}
23+
}

‎drawer/sidenav/Pages/_Host.cshtml

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/"
2+
@namespace sidenav.Pages
3+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4+
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<title>sidenav</title>
11+
<base href="~/" />
12+
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
13+
<link href="css/site.css" rel="stylesheet" />
14+
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
15+
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
16+
</head>
17+
<body>
18+
<app><component type="typeof(App)" render-mode="ServerPrerendered" /></app>
19+
20+
<div id="blazor-error-ui">
21+
<environment include="Staging,Production">
22+
An error has occurred. This application may no longer respond until reloaded.
23+
</environment>
24+
<environment include="Development">
25+
An unhandled exception has occurred. See browser dev tools for details.
26+
</environment>
27+
<a href class="reload">Reload</a>
28+
<a class="dismiss">🗙</a>
29+
</div>
30+
31+
<script src="_framework/blazor.server.js"></script>
32+
</body>
33+
</html>

‎drawer/sidenav/Program.cs

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.IO;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
using Microsoft.AspNetCore;
7+
using Microsoft.AspNetCore.Hosting;
8+
using Microsoft.Extensions.Configuration;
9+
using Microsoft.Extensions.Hosting;
10+
using Microsoft.Extensions.Logging;
11+
12+
namespace sidenav
13+
{
14+
public class Program
15+
{
16+
public static void Main(string[] args)
17+
{
18+
CreateHostBuilder(args).Build().Run();
19+
}
20+
21+
public static IHostBuilder CreateHostBuilder(string[] args) =>
22+
Host.CreateDefaultBuilder(args)
23+
.ConfigureWebHostDefaults(webBuilder =>
24+
{
25+
webBuilder.UseStaticWebAssets();
26+
webBuilder.UseStartup<Startup>();
27+
});
28+
}
29+
}

‎drawer/sidenav/Properties/launchSettings.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:63367/",
7+
"sslPort": 44377
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"sidenav": {
19+
"commandName": "Project",
20+
"launchBrowser": true,
21+
"environmentVariables": {
22+
"ASPNETCORE_ENVIRONMENT": "Development"
23+
},
24+
"applicationUrl": "https://localhost:5001;http://localhost:5000"
25+
}
26+
}
27+
}

‎drawer/sidenav/Shared/MainLayout.razor

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@inherits LayoutComponentBase
2+
3+
@inject NavigationManager _navMan
4+
5+
<style>
6+
/* the size of the containers will fill up their parents up to the viewport */
7+
html, body, app, .k-drawer-container, .k-drawer-content, .main {
8+
width: 100%;
9+
height: 100%;
10+
max-height: 100%;
11+
}
12+
13+
/* vertical scroll should happen in the main portion of the content - where the Body is
14+
This keeps the header sticky at the top
15+
*/
16+
.main {
17+
overflow-y: auto;
18+
}
19+
20+
/* horizontal scroll happens in the drawer content to keep the drawer on the left side of the screen */
21+
.k-drawer-content {
22+
overflow-x: auto;
23+
}
24+
25+
/* sizing of the header */
26+
.top-row {
27+
left: 0;
28+
}
29+
30+
/* expand-collapse button for the drawer - position above the header */
31+
.drawer-hamburger {
32+
position: absolute;
33+
z-index: 2;
34+
}
35+
36+
/* There are some CSS rules from the default site.css related to the sidenav that are commented out
37+
Some of the other rules there define parts of the layout too (like the header rules, or the .main rules
38+
In your app, use the height and overflow settings above as guidelines and implement the rest of the layout according to your case
39+
*/
40+
</style>
41+
42+
<TelerikRootComponent>
43+
44+
<TelerikDrawer Data="@NavigablePages" @bind-Expanded="@DrawerExpanded" MiniMode="true" Mode="@DrawerMode.Push" @ref="@DrawerRef" @bind-SelectedItem="@SelectedItem">
45+
<Content>
46+
@* This layout is now in the drawer Content, and is very similar to the default template layout *@
47+
<div class="main">
48+
@* This is the button to collapse/expand the drawer, in this sample it is positioned absolutely so it moves with the drawer and stays above the rest of the content *@
49+
<TelerikButton OnClick="@( () => DrawerRef.ToggleAsync() )" Icon="@IconName.Menu" Class="drawer-hamburger"></TelerikButton>
50+
51+
<div class="top-row px-4">
52+
<a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
53+
</div>
54+
55+
<div class="content px-4">
56+
@Body
57+
</div>
58+
</div>
59+
</Content>
60+
</TelerikDrawer>
61+
62+
</TelerikRootComponent>
63+
64+
@code{
65+
bool DrawerExpanded { get; set; } = true;
66+
DrawerItem SelectedItem { get; set; }
67+
TelerikDrawer<DrawerItem> DrawerRef { get; set; }
68+
69+
// in this sample we hardcode the existing pages, in your case you can
70+
// create the list based on your business logic (e.g., based on user roles/access)
71+
List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
72+
{
73+
new DrawerItem { Text = "Home", Url = "/", Icon = "home" },
74+
new DrawerItem { IsSeparator = true, Url=string.Empty },//define a URL to separators to make the pre-selection logic easier
75+
new DrawerItem { Text = "Counter", Url = "counter", Icon = IconName.PlusOutline },
76+
new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = IconName.Grid }
77+
};
78+
79+
protected override void OnInitialized()
80+
{
81+
// pre-select the page the user lands on
82+
// as the user clicks items, the DOM changes only in the Body and so the selected item stays active
83+
string currPage = _navMan.Uri;
84+
DrawerItem ActivePage = NavigablePages.Where(p => p.Url.ToLowerInvariant() == GetCurrentPage().ToLowerInvariant()).FirstOrDefault();
85+
if(ActivePage != null)
86+
{
87+
SelectedItem = ActivePage;
88+
}
89+
90+
base.OnInitialized();
91+
}
92+
93+
public string GetCurrentPage()
94+
{
95+
string uriWithoutQueryString = _navMan.Uri.Split("?")[0];
96+
string currPage = uriWithoutQueryString.Substring(Math.Min(_navMan.Uri.Length, _navMan.BaseUri.Length));
97+
return string.IsNullOrWhiteSpace(currPage) ? "/" : currPage;
98+
}
99+
100+
// generally, this should go into its own file, but it is here to keep all the drawer-related code in one place
101+
public class DrawerItem
102+
{
103+
public string Text { get; set; }
104+
public string Url { get; set; }
105+
public string Icon { get; set; }
106+
public bool IsSeparator { get; set; }
107+
}
108+
}

0 commit comments

Comments
 (0)