Navigation refactored

Pages/CaritasServicesPage.razor

@@ -0,0 +1,28 @@
+@inject NavigationManager NavigationManager;
+
+
+@page "/caritas_services"
+
+<p>Caritas Dienste</p>
+
+
+@code {
+
+    protected override void OnInitialized() {
+        NavigationManager.LocationChanged += LocationChanged;
+        base.OnInitialized();
+    }
+
+    public void Dispose() {
+        NavigationManager.LocationChanged -= LocationChanged;
+    }
+
+    void LocationChanged(object sender, LocationChangedEventArgs e) {
+        string navigationMethod = e.IsNavigationIntercepted ? "HTML" : "code";
+        System.Diagnostics.Debug.WriteLine($"Notified of navigation via {navigationMethod} to {e.Location}");
+        if (e.Location.Contains("caritas_services")) {
+
+        }
+    }
+
+}

Pages/Index.razor

@@ -1,7 +1,29 @@
 @page "/"
+@inject NavigationManager NavigationManager;
+@inject AppState AppState;
 
-<h1>Hello, world!</h1>
+<div class="row h-100">
+    <div class="row d-flex align-items-start px-4">
+        <img src="/images/caritas_logo.png" width="100%" style="padding:1em" />
+    </div>
 
-Welcome to your new app.
+    <div class="row align-items-center vw-100 h-75">
+        <div class="col text-center">
+            <h3 style="font-style:italic;padding-bottom:1em">Willkommen bei Caritas!</h3>
+            <div>
+                <MatButton Raised="true" Style="width:50%" @onclick="@((e) => ButtonClicked())">Los geht's!</MatButton>
+            </div>
+        </div>
+    </div>
+</div>
 
-<SurveyPrompt Title="How is Blazor working for you?" />
+
+@code {
+
+    void ButtonClicked() {
+        NavigationManager.NavigateTo("caritas_services");
+        AppState.LoggedIn = true;
+    }
+}
+
+@*<SurveyPrompt Title="How is Blazor working for you?" />*@

Program.cs

@@ -8,6 +8,7 @@ using System.Net.Http;
 using System.Text;
 using System.Threading.Tasks;
 using MatBlazor;
+using CaritasPWA.Shared;
 
 namespace CaritasPWA {
     public class Program {
@@ -17,6 +18,7 @@ namespace CaritasPWA {
 
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
             builder.Services.AddMatBlazor();
+            builder.Services.AddSingleton<AppState>();
 
             await builder.Build().RunAsync();
         }

Shared/AppState.cs

@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace CaritasPWA.Shared {
+    public class AppState {
+
+        private bool _loggedIn;
+        public event Action OnChange;
+        public bool LoggedIn {
+            get { return _loggedIn; }
+            set {
+                if (_loggedIn != value) {
+                    _loggedIn = value;
+                    NotifyStateChanged();
+                }
+            }
+        }
+
+        private void NotifyStateChanged() => OnChange?.Invoke();
+    }
+}

Shared/CaritasServices.razor

@@ -1,7 +0,0 @@
-@inherits LayoutComponentBase
-
-<h3>Welcome</h3>
-
-@code {
-
-}

Shared/MainLayout.razor

@@ -1,11 +1,12 @@
 @inherits LayoutComponentBase
 
-<div class="sidebar">
-    <NavMenu />
-</div>
+<NavMenu />
 
-<div class="main">
-    <div class="content px-4">
+<div class="main vh-100">
+    <div class="content px-4 h-100">
         @Body
     </div>
 </div>
+
+
+

Shared/NavMenu.razor

@@ -1,68 +1,66 @@
-<MatAppBarContainer>
-    <MatAppBar Fixed="true">
-        <MatAppBarRow>
-            <MatAppBarSection>
-                <MatIconButton Icon="menu" OnClick="@((e) => ButtonClicked())"></MatIconButton>
-                <MatAppBarTitle>CaritasPWA</MatAppBarTitle>
-            </MatAppBarSection>
-            @*<MatAppBarSection Align="@MatAppBarSectionAlign.Start">
-                <NavLink class="text-white nav-link" href="" Match="NavLinkMatch.All">
-                    Home
-                </NavLink>
-                <NavLink class="text-white nav-link" href="counter">
-                    Counter
-                </NavLink>
-                <NavLink class="text-white nav-link" href="fetchdata">
-                    Fetch Data
-                </NavLink>
-            </MatAppBarSection>*@
-            <MatAppBarSection Align="@MatAppBarSectionAlign.End">
-                <NavLink class="text-white" href="http://blazor.net" Align="@MatAppBarSectionAlign.End" Style="padding-right:1em">About</NavLink>
-            </MatAppBarSection>
-        </MatAppBarRow>
-    </MatAppBar>
-    <MatAppBarContent>
-        <MatDrawerContainer>
-            <MatDrawer @bind-Opened="@Opened" Mode="@MatDrawerMode.Modal">
-                <MatList>
-                    <MatListItem Class="@((Index == 1)?"bg-primary-color text-white" : "")"
-                                 href=""
-                                 Match="NavLinkMatch.All"
-                                 @onclick="@((e) => ButtonClicked(1))">
-                        <MatIcon Icon="@MatIconNames.Apps"></MatIcon>
-                        <MatListItemText Style="padding-left:0.5em">Caritas Dienste</MatListItemText>
-                    </MatListItem>
-                    <MatListItem Class="@((Index == 2)?"bg-primary-color text-white" : "")"
-                                 Href="counter"
-                                 @onclick="@((e) => ButtonClicked(2))">
-                        <MatIcon Icon="@MatIconNames.Person_outline"></MatIcon>
-                        <MatListItemText Style="padding-left:0.5em">Konto</MatListItemText>
-                    </MatListItem>
-                    <MatListItem Class="@((Index == 3)?"bg-primary-color text-white" : "")"
-                                 Href="fetchdata"
-                                 @onclick="@((e) => ButtonClicked(3))">
-                        <MatIcon Icon="@MatIconNames.Error_outline" Style="transform: rotate(180deg)"></MatIcon>
-                        <MatListItemText Style="padding-left:0.5em">Info</MatListItemText>
-                    </MatListItem>
-                    <MatListItem Class="@((Index == 4)?"bg-primary-color text-white" : "")"
-                                 Href="counter"
-                                 @onclick="@((e) => ButtonClicked(4))">
-                        <MatIcon Icon="@MatIconNames.Exit_to_app"></MatIcon>
-                        <MatListItemText Style="padding-left:0.5em">Logout</MatListItemText>
-                    </MatListItem>
-                </MatList>
-            </MatDrawer>
-        </MatDrawerContainer>
+@inject AppState AppState;
+@inject NavigationManager NavigationManager;
+@implements IDisposable;
 
-    </MatAppBarContent>
-</MatAppBarContainer>
+
+@if (AppState.LoggedIn) {
+    <div class="sidebar">
+        <MatAppBarContainer>
+            <MatAppBar Fixed="true">
+                <MatAppBarRow>
+                    <MatAppBarSection>
+                        <MatIconButton Icon="menu" OnClick="@((e) => ButtonClicked())"></MatIconButton>
+                        <MatAppBarTitle>CaritasPWA</MatAppBarTitle>
+                    </MatAppBarSection>
+                    <MatAppBarSection Align="@MatAppBarSectionAlign.End">
+                        <NavLink class="text-white" href="http://www.caritas.ch" Align="@MatAppBarSectionAlign.End" Style="padding-right:1em">About</NavLink>
+                    </MatAppBarSection>
+                </MatAppBarRow>
+            </MatAppBar>
+            <MatAppBarContent>
+                <MatDrawerContainer>
+                    <MatDrawer @bind-Opened="@Opened" Mode="@MatDrawerMode.Modal">
+                        <MatList>
+                            <MatListItem Class="@((Index == 1) ? "bg-primary-color text-white" : "")"
+                                         Href="caritas_services"
+                                         @onclick="@((e) => ButtonClicked(1))">
+                                <MatIcon Icon="@MatIconNames.Apps"></MatIcon>
+                                <MatListItemText Style="padding-left:0.5em">Caritas Dienste</MatListItemText>
+                            </MatListItem>
+                            <MatListItem Class="@((Index == 2) ? "bg-primary-color text-white" : "")"
+                                         Href="counter"
+                                         @onclick="@((e) => ButtonClicked(2))">
+                                <MatIcon Icon="@MatIconNames.Person_outline"></MatIcon>
+                                <MatListItemText Style="padding-left:0.5em">Konto</MatListItemText>
+                            </MatListItem>
+                            <MatListItem Class="@((Index == 3) ? "bg-primary-color text-white" : "")"
+                                         Href="fetchdata"
+                                         @onclick="@((e) => ButtonClicked(3))">
+                                <MatIcon Icon="@MatIconNames.Error_outline" Style="transform: rotate(180deg)"></MatIcon>
+                                <MatListItemText Style="padding-left:0.5em">Info</MatListItemText>
+                            </MatListItem>
+                            <MatListItem Class="@((Index == 4) ? "bg-primary-color text-white" : "")"
+                                         href=""
+                                         Match="NavLinkMatch.All"
+                                         @onclick="@((e) => ButtonClicked(4))">
+                                <MatIcon Icon="@MatIconNames.Exit_to_app"></MatIcon>
+                                <MatListItemText Style="padding-left:0.5em">Logout</MatListItemText>
+                            </MatListItem>
+                        </MatList>
+                    </MatDrawer>
+                </MatDrawerContainer>
+
+            </MatAppBarContent>
+        </MatAppBarContainer>
+    </div>
+}
 
 
 @code
 {
     bool Opened = false;
 
-    int Index = 0;
+    int Index = 1;
 
     void ButtonClicked() {
         Opened = !Opened;
@@ -71,5 +69,30 @@
     void ButtonClicked(int _Index) {
         Index = _Index;
         ButtonClicked();
+        if (_Index == 4) {
+            AppState.LoggedIn = false;
+        }
+    }
+
+    protected override void OnInitialized() {
+        AppState.OnChange += StateHasChanged;
+        NavigationManager.LocationChanged += LocationChanged;
+        base.OnInitialized();
+    }
+
+    public void Dispose() {
+        AppState.OnChange -= StateHasChanged;
+        NavigationManager.LocationChanged -= LocationChanged;
     }
+
+
+    void LocationChanged(object sender, LocationChangedEventArgs e) {
+        string navigationMethod = e.IsNavigationIntercepted ? "HTML" : "code";
+        System.Diagnostics.Debug.WriteLine($"Notified of navigation via {navigationMethod} to {e.Location}");
+        if (e.Location.Contains("caritas_services")) {
+            Index = 1;
+        }
+    }
+
+
 }

wwwroot/css/app.css

@@ -87,6 +87,13 @@ a, .btn-link {
 }
 
 */
+
+.fullscreen {
+    width: 100vw;
+    height: 100vh;
+}
+
+
 .sidebar {
     background-color: var(--primary);
     /*background-image: linear-gradient(180deg, var(--caritas-red) 0%, var(--caritas-red-accent) 70%);*/

wwwroot/manifest.json

@@ -4,7 +4,8 @@
   "start_url": "./",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#03173d",
+  "theme_color": "#db001b",
+  "orientation": "portrait-primary",
   "icons": [
     {
       "src": "icon-512.png",