Skip to content

Commit 6c42dc0

Browse files
christiannagelchristiannagel
authored
Merge pull request #109 from CodebreakerApp/99-enhance-mobile-ui
Optimized navigation menu for small screens
2 parents 5246525 + d92e817 commit 6c42dc0

5 files changed

Lines changed: 115 additions & 16 deletions

File tree

‎src/CodeBreaker.Blazor.Client/Resources/Resource.Designer.cs‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/CodeBreaker.Blazor.Client/Resources/Resource.de.resx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,10 +386,13 @@
386386
<data name="ReportsPage_GamerName_Label" xml:space="preserve">
387387
<value>Gib einen Spielernamen ein (optional)</value>
388388
</data>
389-
<data name="ReportsPage_GameType_Placeholder" xml:space="preserve">
389+
<data name="ReportsPage_GamerName_Placeholder" xml:space="preserve">
390390
<value>Alle</value>
391391
</data>
392-
<data name="ReportsPage_GamerName_Placeholder" xml:space="preserve">
392+
<data name="ReportsPage_GameType_Placeholder" xml:space="preserve">
393393
<value>Alle</value>
394394
</data>
395+
<data name="NavMenu_Title" xml:space="preserve">
396+
<value>Navigation</value>
397+
</data>
395398
</root>

‎src/CodeBreaker.Blazor.Client/Resources/Resource.resx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,4 +404,10 @@
404404
<data name="ReportsPage_GamerName_Placeholder" xml:space="preserve">
405405
<value>All</value>
406406
</data>
407+
<data name="ReportsPage_GameType_Placeholder" xml:space="preserve">
408+
<value />
409+
</data>
410+
<data name="NavMenu_Title" xml:space="preserve">
411+
<value>Navigation</value>
412+
</data>
407413
</root>

‎src/CodeBreaker.Blazor.Client/Shared/MainLayout.razor‎

Lines changed: 61 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,67 @@
11
@inherits LayoutComponentBase
22
@inject IStringLocalizer<Resource> Loc
3+
@inject NavigationManager NavigationManager
34

4-
<FluentMainLayout>
5-
<Header>
5+
<FluentLayout>
6+
<FluentHeader>
67
<h1><span id="welcome-message">@Loc["Index_Welcome"]</span> @Loc["AppDisplayName"]</h1>
78
<FluentSpacer />
89
<LoginDisplay />
9-
</Header>
10-
<Body>
11-
@Body
12-
<FluentDialogProvider />
13-
</Body>
14-
<NavMenuContent>
15-
<FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())">@Loc["NavMenu_Home_Title"]</FluentNavLink>
16-
<FluentNavLink Href="/game" Icon="@(new Icons.Regular.Size20.BoardGames())">@Loc["NavMenu_Game_Title"]</FluentNavLink>
17-
<FluentNavLink Href="/reports" Icon="@(new Icons.Regular.Size20.DataBarHorizontal())">@Loc["NavMenu_Reports_Title"]</FluentNavLink>
18-
<FluentNavLink Href="/about" Icon="@(new Icons.Regular.Size20.Info())">@Loc["NavMenu_About_Title"]</FluentNavLink>
19-
</NavMenuContent>
20-
</FluentMainLayout>
10+
</FluentHeader>
11+
<div id="main-layout-stack">
12+
@* Desktop navigation *@
13+
<div id="large-navigation">
14+
<FluentNavMenu Width="200" Style="box-shadow: var(--elevation-shadow-card-rest); height: 100%;">
15+
@foreach (var navigationItem in _navigationItems)
16+
{
17+
<FluentNavLink Href="@navigationItem.Href" Match="@(navigationItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navigationItem.Icon">@navigationItem.Title</FluentNavLink>
18+
}
19+
</FluentNavMenu>
20+
</div>
21+
22+
@* Mobile navigation *@
23+
<div id="small-navigation">
24+
<FluentButton Id="mobile-nav-menu-button" Appearance="Appearance.Stealth" OnClick="ToggleMobileNavMenu" IconStart="@(new Icons.Regular.Size20.Navigation())">
25+
@Loc["NavMenu_Title"]
26+
</FluentButton>
27+
<FluentMenu @bind-Open="_isMobileNavMenuOpen" UseMenuService="true" Anchor="mobile-nav-menu-button">
28+
@foreach (var navigationItem in _navigationItems)
29+
{
30+
<FluentMenuItem Label="@navigationItem.Title" OnClick="() => Navigate(navigationItem)">
31+
<FluentIcon Value="@navigationItem.Icon" Slot="start" />
32+
</FluentMenuItem>
33+
}
34+
</FluentMenu>
35+
</div>
36+
37+
<FluentBodyContent>
38+
@Body
39+
<FluentDialogProvider />
40+
</FluentBodyContent>
41+
</div>
42+
</FluentLayout>
43+
44+
<FluentDialogProvider />
45+
<FluentMenuProvider />
46+
47+
@code {
48+
private record class NavigationItem(string Title, Icon Icon, string Href, bool MatchAll = false);
49+
50+
private bool _isMobileNavMenuOpen = false;
51+
private void ToggleMobileNavMenu() =>
52+
_isMobileNavMenuOpen = !_isMobileNavMenuOpen;
53+
private IEnumerable<NavigationItem> _navigationItems = null!;
54+
55+
protected override void OnInitialized()
56+
{
57+
_navigationItems = [
58+
new NavigationItem(Loc["NavMenu_Home_Title"], new Icons.Regular.Size20.Home(), "/", true),
59+
new NavigationItem(Loc["NavMenu_Game_Title"], new Icons.Regular.Size20.BoardGames(), "/game"),
60+
new NavigationItem(Loc["NavMenu_Reports_Title"], new Icons.Regular.Size20.DataBarHorizontal(), "/reports"),
61+
new NavigationItem(Loc["NavMenu_About_Title"], new Icons.Regular.Size20.Info(), "/about")
62+
];
63+
}
64+
65+
private void Navigate(NavigationItem navigationItem) =>
66+
NavigationManager.NavigateTo(navigationItem.Href);
67+
}

‎src/CodeBreaker.Blazor.Client/Shared/MainLayout.razor.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,29 @@
77
#welcome-message {
88
display: none;
99
}
10+
}
11+
12+
#main-layout-stack {
13+
display: flex;
14+
flex-direction: row;
15+
height: 100%;
16+
}
17+
18+
#small-navigation {
19+
display: none;
20+
}
21+
#large-navigation {
22+
height: 100%;
23+
}
24+
25+
@media only screen and (max-width: 1000px) {
26+
#large-navigation {
27+
display: none;
28+
}
29+
#small-navigation {
30+
display: block;
31+
}
32+
#main-layout-stack {
33+
flex-direction: column;
34+
}
1035
}

0 commit comments

Comments
 (0)