Resetup due to lacking debug support

CaritasPWA.csproj

 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
-	<PropertyGroup Label="Globals">
-		<SccProjectName>SAK</SccProjectName>
-		<SccProvider>SAK</SccProvider>
-		<SccAuxPath>SAK</SccAuxPath>
-		<SccLocalPath>SAK</SccLocalPath>
-	</PropertyGroup>
-
-	<PropertyGroup>
-		<TargetFramework>net5.0</TargetFramework>
-		<RazorLangVersion>3.0</RazorLangVersion>
-		<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
-		<OutputType>Exe</OutputType>
-	</PropertyGroup>
-
-	<ItemGroup>
-		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
-		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
-		<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
-	</ItemGroup>
-
-	<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
-		<Optimize>true</Optimize>
-		<PlatformTarget>AnyCPU</PlatformTarget>
-	</PropertyGroup>
-
-	<ItemGroup>
-		<Content Remove="compilerconfig.json" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<_ContentIncludedByDefault Remove="wwwroot\css\united\_bootswatch.css" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<None Include="compilerconfig.json" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<PackageReference Include="BlazorAnimate" Version="3.0.0" />
-		<PackageReference Include="BlazorColorPicker" Version="1.2.0" />
-		<PackageReference Include="BuildWebCompiler" Version="1.12.405" />
-		<PackageReference Include="MatBlazor" Version="2.8.0" />
-		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
-		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
-		<PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.7" />
-		<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
-		<PackageReference Include="Tewr.Blazor.FileReader" Version="3.1.0.21158" />
-		<PackageReference Include="Tewr.Blazor.FileReader.Wasm" Version="0.11.19128" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<Compile Update="Shared\ResourceFiles\Resources.Designer.cs">
-			<DesignTime>True</DesignTime>
-			<AutoGen>True</AutoGen>
-			<DependentUpon>Resources.resx</DependentUpon>
-		</Compile>
-	</ItemGroup>
-
-	<ItemGroup>
-		<EmbeddedResource Update="Shared\ResourceFiles\Resources.de.resx">
-			<Generator>PublicResXFileCodeGenerator</Generator>
-		</EmbeddedResource>
-		<EmbeddedResource Update="Shared\ResourceFiles\Resources.fr.resx">
-			<Generator>PublicResXFileCodeGenerator</Generator>
-		</EmbeddedResource>
-		<EmbeddedResource Update="Shared\ResourceFiles\Resources.it.resx">
-			<Generator>PublicResXFileCodeGenerator</Generator>
-		</EmbeddedResource>
-		<EmbeddedResource Update="Shared\ResourceFiles\Resources.resx">
-			<Generator>PublicResXFileCodeGenerator</Generator>
-			<LastGenOutput>Resources.Designer.cs</LastGenOutput>
-		</EmbeddedResource>
-	</ItemGroup>
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BlazorAnimate" Version="3.0.0" />
+    <PackageReference Include="MatBlazor" Version="2.8.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.7" />
+    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+    <PackageReference Include="Tewr.Blazor.FileReader" Version="3.1.0.21158" />
+    <PackageReference Include="Tewr.Blazor.FileReader.Wasm" Version="0.11.19128" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
+  </ItemGroup>
 
 </Project>

CaritasPWA.csproj.user

   </PropertyGroup>
   <PropertyGroup>
     <ActiveDebugProfile>CaritasPWA</ActiveDebugProfile>
-    <NameOfLastUsedPublishProfile>D:\Work\Caritas\CaritasPWA\Properties\PublishProfiles\IISProfile.pubxml</NameOfLastUsedPublishProfile>
   </PropertyGroup>
-  <ItemGroup>
-    <EmbeddedResource Update="Shared\ResourceFiles\Resources.it.resx">
-      <SubType>Designer</SubType>
-    </EmbeddedResource>
-  </ItemGroup>
 </Project>

CaritasPWA.csproj.vspscc

-""
-{
-"FILE_VERSION" = "9237"
-"ENLISTMENT_CHOICE" = "NEVER"
-"PROJECT_FILE_RELATIVE_PATH" = ""
-"NUMBER_OF_EXCLUDED_FILES" = "0"
-"ORIGINAL_PROJECT_FILE_PATH" = ""
-"NUMBER_OF_NESTED_PROJECTS" = "0"
-"SOURCE_CONTROL_SETTINGS_PROVIDER" = "PROVIDER"
-}

CaritasPWA.sln

 
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 16
-VisualStudioVersion = 16.0.31129.286
+VisualStudioVersion = 16.0.31321.278
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "CaritasPWA", "CaritasPWA.csproj", "{A4CFFE67-908C-4822-A420-78B2834EBC1E}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CaritasPWA", "CaritasPWA.csproj", "{D258170F-7153-4503-AAB9-6B5699A58B53}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{A4CFFE67-908C-4822-A420-78B2834EBC1E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{A4CFFE67-908C-4822-A420-78B2834EBC1E}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{A4CFFE67-908C-4822-A420-78B2834EBC1E}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{A4CFFE67-908C-4822-A420-78B2834EBC1E}.Release|Any CPU.Build.0 = Release|Any CPU
+		{D258170F-7153-4503-AAB9-6B5699A58B53}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D258170F-7153-4503-AAB9-6B5699A58B53}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D258170F-7153-4503-AAB9-6B5699A58B53}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D258170F-7153-4503-AAB9-6B5699A58B53}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {C8607828-7A15-45AD-B236-AE7916C2CC1B}
+		SolutionGuid = {727FFEFC-2F79-4A3E-B3E6-495767058A34}
 	EndGlobalSection
 EndGlobal

Pages/CaritasServiceFundVeloFoundConclusion.razor

 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-start justify-content-center w-100">
-        <MatHeadline3 Style="font-family:Ubuntu;padding-top:1em">@i18n["Confirmation"]</MatHeadline3>
+        <MatHeadline4 Style="font-family:Ubuntu;padding-top:1em">@i18n["Confirmation"]</MatHeadline4>
     </div>
     <div class="row no-gutters align-items-start justify-content-center w-100">
         <MatHeadline6 Style="font-family:Ubuntu">@i18n["FinishedTextFound"]</MatHeadline6>

Pages/CaritasServiceFundVeloKeyDataPage.razor

 @using CaritasPWA.Shared.Services;
 @using System.Globalization;
 @using Microsoft.AspNetCore.Components.Forms;
+@using System.IO;
 @inject NavigationManager NavigationManager
 @inject IStringLocalizer<Resources> i18n
 @inject PageHistoryManager PageHistoryManager
 @inject MasterDataService MasterDataService
 @inject IMatToaster Toaster
 
+@*@using Tewr.Blazor.FileReader
+@inject IFileReaderService fileReaderService;*@
+
+
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
         @if ("Found".Equals(FromRoute)) {
-            <h1>@i18n["FoundBike"]</h1>
+            <h2>@i18n["FoundBike"]</h2>
         } else {
-            <h1>@i18n["MissingBike"]</h1>
+            <h2>@i18n["MissingBike"]</h2>
         }
     </div>
     <div class="row no-gutters align-items-center justify-content-center w-100">
             <div class="mat-layout-grid-inner">
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
                     <div>
-                        <InputFile class="inputFile" id="camera" type="file" name="camera" accept="image/*" capture="user"  OnChange="@OnFileSelection"/>
+                        <InputFile class="inputFile" id="camera" type="file" name="camera" accept="image/*" capture="user" OnChange="@OnFileSelection" />
                         <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
                             <label for="camera">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" fill="#000000">
                         </MatRipple>
                     </div>
                     <div style="margin-top:1rem">
+                        @*<input @ref="inputTypeFileElement" id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" @onchange="ReadFile" />*@
                         <InputFile id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" OnChange="@OnFileSelection" />
                         <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
                             <label for="file">
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object> Attributes { get; set; }
 
-    private static long MAX_FILE_SIZE = 4000000;
-
+    private static int MAX_FILE_SIZE = 4000000;
 
     private ColorItem selectedColor;
     private BicycleType selectedBcType;
             await imgFile.OpenReadStream(MAX_FILE_SIZE).ReadAsync(buffers);
             string imageType = imgFile.ContentType;
             imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
-        } catch (Exception ex) {
+        } catch (IOException ex) {
+            Console.WriteLine("Ex.Meesage is: {0}.", ex.Message);
             Show(MatToastType.Danger, i18n.GetString("Error.PhotoOrPictureToBig.Title"), i18n.GetString("Error.PhotoOrPictureToBig.Msg", MAX_FILE_SIZE / 1000));
         }
     }
         Toaster.Add(message, type, title, icon);
     }
 
+    //*******
+
+    //private ElementReference inputTypeFileElement;
+
+    //public async Task ReadFile() {
+    //    foreach (var file in await fileReaderService.CreateReference(inputTypeFileElement).EnumerateFilesAsync()) {
+    //        IFileInfo fileInfo = await file.ReadFileInfoAsync();
+    //        byte[] buffer = new byte[fileInfo.Size];
+    //        using (MemoryStream memoryStream = await file.CreateMemoryStreamAsync(4096)) {
+    //            int bytesRead = 0;
+    //            int offset = 0;
+    //            do {
+    //                bytesRead = memoryStream.Read(buffer, offset, 4096);
+    //                offset = offset + bytesRead;
+    //            } while (bytesRead < 4096);
+
+    //            string imageType = fileInfo.Type;
+    //            imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffer)}";
+    //        }
+    //    }
+    //}
 
 }

Pages/CaritasServiceFundVeloMissingConclusion.razor

 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-start justify-content-center w-100">
-        <MatHeadline3 Style="font-family:Ubuntu;padding-top:1em">@i18n["Info"]</MatHeadline3>
+        <MatHeadline4 Style="font-family:Ubuntu;padding-top:1em">@i18n["Info"]</MatHeadline4>
     </div>
     <div class="row no-gutters align-items-start justify-content-center w-100">
         <MatHeadline6 Style="font-family:Ubuntu">@i18n["FinishedTextMissing"]</MatHeadline6>

Pages/DoneImage.razor

 @page "/doneimage"
 
 <div class="text-center">
-    <img src="./images/done.png" class="w-50" />
+    <img src="./images/done.png" class="w-50" alt="Done!" />
 </div>
 
 @code {

Pages/IndexPage.razor

 
 <div class="row h-100 justify-content-center">
     <div class="row d-flex align-items-center justify-content-center px-4 w-100">
-        <img src="./images/caritas_logo.png" style="padding:1em;max-width:320px" class="w-100">
+        <img src="./images/caritas_logo.png" style="padding:1em;max-width:320px" class="w-100" alt="">
     </div>
 
     <div class="row align-items-center vw-100 h-75">

Pages/InfoPage.razor

 @inject PageHistoryManager PageHistoryManager
 @inject IJSRuntime JSRuntime;
 
-    <div class="row px-3 h-100">
-        <div class="text-center w-100">
-            <img class="w-100" src="./images/caritas_logo.png" style="padding:1em;max-width:320px" />
-        </div>
-        <div class="row no-gutters align-items-center w-100">
-            <table class="w-100">
-                <tr>
-                    <td class="text-center">
-                        <p class="text-left" style="max-width: 500px;display:inline-block">@i18n["Abouttext"]</p>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="text-center">
-                        <MatButton Raised="true" Class="w-100" @onclick="@ShowCaritasWebpage" style="max-width:500px">@i18n["Learnmore"]</MatButton>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="text-center">
-                        <MatCaption Style="font-family:Ubuntu">Version: 0.0.1</MatCaption>
-                    </td>
-                </tr>
-            </table>
-        </div>
-        <div class="row no-gutters align-items-end w-100">
-            <table class="w-100">
-                <tr>
-                    <td class="text-right">
-                        <MatCaption Style="font-family:Ubuntu">@i18n["DevelopedBy"]</MatCaption>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="text-right">
-                        <img src="./images/integrate_logo.png" style="max-width:200px" />
-                    </td>
-                </tr>
-                <tr>
-                    <td class="text-right">
-                        <MatCaption Style="font-family:Ubuntu">Platz 10, Business Village Luzern</MatCaption>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="text-right">
-                        <MatCaption Style="font-family:Ubuntu">CH-6039 Root D4</MatCaption>
-                    </td>
-                </tr>
-            </table>
-        </div>
+<div class="row px-3 h-100">
+    <div class="text-center w-100">
+        <img class="w-100" src="./images/caritas_logo.png" style="padding:1em;max-width:320px" />
     </div>
+    <div class="row no-gutters align-items-center w-100">
+        <table class="w-100">
+            <tr>
+                <td class="text-center">
+                    <p class="text-left" style="max-width: 500px;display:inline-block">@i18n["Abouttext"]</p>
+                </td>
+            </tr>
+            <tr>
+                <td class="text-center">
+                    <MatButton Raised="true" Class="w-100" @onclick="@ShowCaritasWebpage" style="max-width:500px">@i18n["Learnmore"]</MatButton>
+                </td>
+            </tr>
+            <tr>
+                <td class="text-center">
+                    <MatCaption Style="font-family:Ubuntu">Version: 0.0.1</MatCaption>
+                </td>
+            </tr>
+        </table>
+    </div>
+    <div class="row no-gutters align-items-end w-100">
+        <table class="w-100">
+            <tr>
+                <td class="text-right">
+                    <MatCaption Style="font-family:Ubuntu">@i18n["DevelopedBy"]</MatCaption>
+                </td>
+            </tr>
+            <tr>
+                <td class="text-right">
+                    <img src="./images/integrate_logo.png" style="max-width:200px" alt="" />
+                </td>
+            </tr>
+            <tr>
+                <td class="text-right">
+                    <MatCaption Style="font-family:Ubuntu">Platz 10, Business Village Luzern</MatCaption>
+                </td>
+            </tr>
+            <tr>
+                <td class="text-right">
+                    <MatCaption Style="font-family:Ubuntu">CH-6039 Root D4</MatCaption>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 
 
-    @code {
+@code {
 
-        protected override void OnInitialized() {
-            PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
-            base.OnInitialized();
-        }
+    protected override void OnInitialized() {
+        PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
+        base.OnInitialized();
+    }
 
-        private async void ShowCaritasWebpage() {
-            // NavigationManager.NavigateTo("http://www.caritas.ch");
-            //NavigationManager.open("http://google.com", "_blank");
-            await JSRuntime.InvokeAsync<string>("open", $"https://www.caritas.ch", "_blank");
-        }
+    private async void ShowCaritasWebpage() {
+        await JSRuntime.InvokeAsync<string>("open", $"https://www.caritas.ch", "_blank");
     }
+}

Program.cs

+using CaritasPWA.Shared;
+using CaritasPWA.Shared.Services;
+using MatBlazor;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.DependencyInjection;
 using System;
-using System.Collections.Generic;
 using System.Net.Http;
-using System.Text;
 using System.Threading.Tasks;
-using MatBlazor;
-using CaritasPWA.Shared;
-using CaritasPWA.Shared.Services;
 using Tewr.Blazor.FileReader;
-using MatBlazor;
 
 
 namespace CaritasPWA {

Properties/launchSettings.json

         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "nativeDebugging": true,
-      "jsWebView2Debugging": false,
+      "jsWebView2Debugging": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
     },
     "CaritasPWA": {

Shared/AppState.cs

 using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 
 namespace CaritasPWA.Shared {
     public class AppState {

Shared/Models/BicycleType.cs

-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-
-namespace CaritasPWA.Shared.Models {
+namespace CaritasPWA.Shared.Models {
     public class BicycleType {
 
         public int Index { get; set; }

Shared/Models/ColorItem.cs

-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Components;
-using Microsoft.Extensions.Localization;
-using CaritasPWA.Shared.ResourceFiles;
+namespace CaritasPWA.Shared.Models {
 
-
-namespace CaritasPWA.Shared.Models {
-    
     public class ColorItem {
 
         public int Index { get; set; }

Shared/Models/Defaults.cs

-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-
-namespace CaritasPWA.Shared.Models {
+namespace CaritasPWA.Shared.Models {
     public class Defaults {
 
         public static ColorItem[] ColorItems = {

Shared/Models/UserData.cs

-using System.ComponentModel;
-using System.Runtime.CompilerServices;
-
-namespace CaritasPWA.Shared.Models {
+namespace CaritasPWA.Shared.Models {
     // The class that stores the user settings
     public class UserData {
         private string salutation;
         private string phone;
         private string email;
 
-        public string Salutation{ get => salutation; set { salutation = value; } }
+        public string Salutation { get => salutation; set { salutation = value; } }
         public string Firstname { get => firstname; set { firstname = value; } }
         public string Lastname { get => lastname; set { lastname = value; } }
         public string Address { get => address; set { address = value; } }

Shared/NavMenu.razor

                         @if (PageHistoryManager.CanGoBack()) {
                             <MatIconButton Icon="keyboard_backspace" OnClick="@((e) => ButtonBackClicked())" Disabled="@BackButtonDisabled()"></MatIconButton>
                         }
-                        <MatAppBarTitle Style="padding-left:0px; font-size:90%; font-weight:500">@LocationUrl</MatAppBarTitle>
+                        <MatAppBarTitle Class="navBar-title">@LocationUrl</MatAppBarTitle>
                     </MatAppBarSection>
                     <MatAppBarSection align="@MatAppBarSectionAlign.End" Style="max-width:min-content">
                         <NavLink target="_blank" class="text-white small" href="https://www.caritas.ch" align="@MatAppBarSectionAlign.End" style="padding-right:1em">@i18n["Learnmore"]</NavLink>
                 <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">@i18n["CaritasServices"]</MatListItemText>
-                            </MatListItem>
-                            <MatListItem Class="@((Index == 2) ? "bg-primary-color text-white" : "")"
-                                         Href="account"
-                                         @onclick="@((e) => ButtonClicked(2))">
-                                <MatIcon Icon="@MatIconNames.Person_outline"></MatIcon>
-                                <MatListItemText Style="padding-left:0.5em">@i18n["account"]</MatListItemText>
-                            </MatListItem>
-                            <MatListItem Class="@((Index == 3) ? "bg-primary-color text-white" : "")"
-                                         Href="info"
-                                         @onclick="@((e) => ButtonClicked(3))">
-                                <MatIcon Icon="@MatIconNames.Error_outline" Style="transform: rotate(180deg)"></MatIcon>
-                                <MatListItemText Style="padding-left:0.5em">@i18n["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">@i18n["Logout"]</MatListItemText>
-                            </MatListItem>
+                            <MatRipple Class="navmenu-mat-ripple" Color="@MatRippleColor.Default">
+                                <MatListItem Class="@((Index == 1) ? "bg-primary-color text-white" : "")" Style="margin-left:0;margin-right:0"
+                                             Href="caritas_services"
+                                             @onclick="@((e) => ButtonClicked(1))">
+                                    <MatIcon Icon="@MatIconNames.Apps"></MatIcon>
+                                    <MatListItemText Style="padding-left:0.5em">@i18n["CaritasServices"]</MatListItemText>
+                                </MatListItem>
+                            </MatRipple>
+                            <MatRipple Class="navmenu-mat-ripple" Color="@MatRippleColor.Default">
+                                <MatListItem Class="@((Index == 2) ? "bg-primary-color text-white" : "")" Style="margin-left:0;margin-right:0"
+                                             Href="account"
+                                             @onclick="@((e) => ButtonClicked(2))">
+                                    <MatIcon Icon="@MatIconNames.Person_outline"></MatIcon>
+                                    <MatListItemText Style="padding-left:0.5em">@i18n["account"]</MatListItemText>
+                                </MatListItem>
+                            </MatRipple>
+                            <MatRipple Class="navmenu-mat-ripple" Color="@MatRippleColor.Default">
+                                <MatListItem Class="@((Index == 3) ? "bg-primary-color text-white" : "")" Style="margin-left:0;margin-right:0"
+                                             Href="info"
+                                             @onclick="@((e) => ButtonClicked(3))">
+                                    <MatIcon Icon="@MatIconNames.Error_outline" Style="transform: rotate(180deg)"></MatIcon>
+                                    <MatListItemText Style="padding-left:0.5em">@i18n["info"]</MatListItemText>
+                                </MatListItem>
+                            </MatRipple>
+                            <MatRipple Class="navmenu-mat-ripple" Color="@MatRippleColor.Default">
+                                <MatListItem Class="@((Index == 4) ? "bg-primary-color text-white" : "")" Style="margin-left:0;margin-right:0"
+                                             href=""
+                                             Match="NavLinkMatch.All"
+                                             @onclick="@((e) => ButtonClicked(4))">
+                                    <MatIcon Icon="@MatIconNames.Exit_to_app"></MatIcon>
+                                    <MatListItemText Style="padding-left:0.5em">@i18n["Logout"]</MatListItemText>
+                                </MatListItem>
+                            </MatRipple>
                         </MatList>
                     </MatDrawer>
                 </MatDrawerContainer>

Shared/Services/ILFBicycleRest.cs

 using CaritasPWA.Shared.Models;
-using System;
 using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 
 namespace CaritasPWA.Shared.Services {
     public interface ILFBicycleRest {

Shared/Services/LFBicycleRest.cs

 using CaritasPWA.Shared.Models;
-using System;
 using System.Collections.Generic;
 using System.Linq;
-using System.Threading.Tasks;
 
 namespace CaritasPWA.Shared.Services {
-    
+
     // REST interface responsible to submit lost or found reports and get the available masterdata.
     public class LFBicycleRest : ILFBicycleRest {
 

Shared/Services/MasterDataService.cs

-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using CaritasPWA.Shared.Models;
-using Microsoft.AspNetCore.Components;
+using CaritasPWA.Shared.Models;
 using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
 
 namespace CaritasPWA.Shared.Services {
     public class MasterDataService {
             } else {
                 result = new ColorItem[] { };
             }
-            _colors= result;
+            _colors = result;
             return result;
         }
 

Shared/Services/PageHistoryManager.cs

-using System;
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Linq;
-using System.Threading.Tasks;
 
 namespace CaritasPWA.Shared.Services {
     public class PageHistoryManager {

Shared/Services/UserDataProvider.cs

-using Microsoft.JSInterop;
+using CaritasPWA.Shared.Models;
+using Microsoft.JSInterop;
 using System;
-using System.ComponentModel;
 using System.Threading.Tasks;
-using CaritasPWA.Shared.Models;
 
 namespace CaritasPWA.Shared.Services {
-    public sealed class UserDataProvider  {
+    public sealed class UserDataProvider {
         private const string KeyName = "account";
 
         private readonly IJSRuntime _jsRuntime;
         private bool _initialized;
         private UserData _data = new UserData();
 
-        public UserData Data { 
-            get => _data; 
-            set => _data = value; 
+        public UserData Data {
+            get => _data;
+            set => _data = value;
         }
-        
+
         public event EventHandler Changed;
 
         public bool AutoSave { get; set; } = true;

_Imports.razor

 @using CaritasPWA.Shared.ResourceFiles
 @using MatBlazor
 @using BlazorAnimate
-@using BlazorColorPicker
 @using Tewr.Blazor.FileReader

wwwroot/css/app.css

     display: inline-flex;
 }
 
+.navmenu-mat-ripple {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    border-radius: 6px;
+}
+
+
 .btn-primary {
     color: #fff;
     background-color: var(--primary);
     right: 0.75rem;
     top: 0.5rem;
 }
+
+.navBar-title {
+    padding-left: 0px;
+    font-size: 90%;
+    font-weight: 500;
+    white-space: normal;
+    line-height: inherit;
+}

wwwroot/index.html

 <!DOCTYPE html>
-<html>
+<html lang="de-ch">
 
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>CaritasPWA</title>
+    <meta name="description" content="Caritas PWA, developed by INTEGRATE AG, Switzerland">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
+    <title>Caritas PWA</title>
     <base href="/" />
     <script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>
     <script src="_content/MatBlazor/dist/matBlazor.js"></script>
-    <script src="_content/BlazorColorPicker/colorpicker.js"></script>
-    <link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />
     <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
     <link href="css/united/bootstrap.min.css" rel="stylesheet" />
     <link href="css/united/_bootswatch.min.css" rel="stylesheet" />

wwwroot/manifest.json

     {
       "src": "icons/icon-192.png",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "192x192",
+      "purpose": "any maskable"
     },
     {
       "src": "icons/icon-512.png",

wwwroot/service-worker.js

     'css/united/bootstrap.min.css',
     'css/united/_bootswatch.min.css',
     'css/united/_variables.min.css',
-    '_content/BlazorColorPicker/colorpicker.css',
-    '_content/BlazorColorPicker/colorpicker.js',
-    '_content/MatBlazor/dist/matBlazor.css',
-    '_content/MatBlazor/dist/matBlazor.js',
-    '_content/BlazorAnimate/blazorAnimateInterop.js',
-    '_content/BlazorAnimate/aos.css',
+    '_content/matblazor/dist/matblazor.css',
+    '_content/matblazor/dist/matblazor.js',
+    '_content/blazoranimate/blazoranimateinterop.js',
+    '_content/blazoranimate/aos.css',
     '_framework/blazor.webassembly.js',
     '_framework/blazor.boot.json',
-    '_framework/wasm/dotnet.5.0.7.js',
+    '_framework/dotnet.5.0.7.js',
     'https://fonts.googleapis.com/css?family=Roboto:300,400,500',
     'https://fonts.googleapis.com/icon?family=Material+Icons',
     'https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap',
 });
 
 // activate event
-self.addEventListener('activate', evt => {
-    evt.waitUntil(
-        caches.keys().then(keys => {
-            return Promise.all(keys
-                .filter(key => key !== staticCacheName)
-                .map(key => caches.delete())
-            )
+self.addEventListener('activate', event => {
+     // delete any caches that aren't in expectedCaches
+     // which will get rid of site-static-v1
+    event.waitUntil(
+        caches.keys().then(keys => Promise.all(
+            keys.map(key => {
+                if (!staticCacheName.includes(key)) {
+                    return caches.delete(key);
+                }
+            })
+        )).then(() => {
+            console.log('Now ready to handle fetches!');
         })
     );
 });
 
 
+
 self.addEventListener('fetch', evt => {
     evt.respondWith(
         caches.match(evt.request).then(cacheRes => {