Update January 12, 2024

=> Created a new project with .Net 8

App.razor

@@ -6,7 +6,7 @@
     <NotFound>
         <PageTitle>Not found</PageTitle>
         <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sentimos muito, mas não há nada aqui.</p>
+            <p role="alert">Sorry, there's nothing at this address.</p>
         </LayoutView>
     </NotFound>
 </Router>

Shared/MainLayout.razor → Layout/MainLayout.razor

@@ -1,13 +1,12 @@
 @inherits LayoutComponentBase
-
 <div class="page">
     <div class="sidebar">
         <NavMenu />
     </div>
 
     <main>
         <div class="top-row px-4">
-            <a href="https://github.com/rafael-figueiredo-alves/eTasks-Web" target="_blank">Sobre o projeto</a>
+            <a href="https://github.com/rafael-figueiredo-alves/eTasks-Web" target="_blank">Sobre o Projeto</a>
         </div>
 
         <article class="content px-4">

Shared/MainLayout.razor.css → Layout/MainLayout.razor.css

@@ -37,11 +37,7 @@ main {
     }
 
 @media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
+    .top-row {
         justify-content: space-between;
     }
 

Shared/NavMenu.razor → Layout/NavMenu.razor

@@ -1,6 +1,8 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@inherits eTasks.Layout.NavMenuBase
+
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">eTasks</a>
+        <a class="navbar-brand" href="">eTasks-web</a>
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -11,19 +13,12 @@
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Inicio
             </NavLink>
         </div>
     </nav>
 </div>
 
 @code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
 
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
-    }
 }

Layout/NavMenu.razor.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Components;
+
+namespace eTasks.Layout
+{
+    public class NavMenuBase : ComponentBase
+    {
+    protected bool collapseNavMenu = true;
+
+    protected string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    protected void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}
+}

Layout/NavMenu.razor.css

@@ -0,0 +1,83 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.bi-house-door-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-plus-square-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.bi-list-nested-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep a {
+        color: #d7d7d7;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.37);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+
+    .nav-scrollable {
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}

Pages/Home.razor

@@ -0,0 +1,11 @@
+@page "/"
+
+<PageTitle>eTasks</PageTitle>
+
+<h1>Seja bem vindo ao eTasks!</h1>
+
+<img src="assets/icon-192.png" />
+
+<p>Este app está em fase de desenvolvimento...</p>
+
+<p>Verifique o repositório oficial em <a href="https://github.com/rafael-figueiredo-alves/eTasks-Web" target="_blank">https://github.com/rafael-figueiredo-alves/eTasks-Web</a> </p>

Properties/launchSettings.json

@@ -1,10 +1,11 @@
 {
+  "$schema": "http://json.schemastore.org/launchsettings.json",
   "iisSettings": {
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:2523",
-      "sslPort": 44348
+      "applicationUrl": "http://localhost:58975",
+      "sslPort": 44331
     }
   },
   "profiles": {
@@ -13,7 +14,7 @@
       "dotnetRunMessages": true,
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "http://localhost:5259",
+      "applicationUrl": "http://localhost:5048",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
@@ -23,7 +24,7 @@
       "dotnetRunMessages": true,
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7079;http://localhost:5259",
+      "applicationUrl": "https://localhost:7267;http://localhost:5048",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

_Imports.razor

@@ -7,4 +7,4 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using eTasks_web
-@using eTasks_web.Shared
+@using eTasks_web.Layout

eTasks-web.csproj

@@ -1,14 +1,19 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
+    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.9" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.9" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.1" PrivateAssets="all" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
   </ItemGroup>
 
 </Project>

eTasks-web.sln

@@ -1,25 +1,25 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
-VisualStudioVersion = 17.6.33829.357
+VisualStudioVersion = 17.8.34408.163
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "eTasks-web", "eTasks-web.csproj", "{F015BFEC-B7BE-4FFD-89A7-EF0D7C6EF760}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "eTasks-web", "eTasks-web.csproj", "{35C802C7-D02A-4EB5-B89C-98550284F0AD}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{F015BFEC-B7BE-4FFD-89A7-EF0D7C6EF760}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{F015BFEC-B7BE-4FFD-89A7-EF0D7C6EF760}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{F015BFEC-B7BE-4FFD-89A7-EF0D7C6EF760}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{F015BFEC-B7BE-4FFD-89A7-EF0D7C6EF760}.Release|Any CPU.Build.0 = Release|Any CPU
+		{35C802C7-D02A-4EB5-B89C-98550284F0AD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{35C802C7-D02A-4EB5-B89C-98550284F0AD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{35C802C7-D02A-4EB5-B89C-98550284F0AD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{35C802C7-D02A-4EB5-B89C-98550284F0AD}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {A21CAED9-CC75-4502-96B1-7379EB42AC84}
+		SolutionGuid = {36E11181-1C5F-4C9B-BCA4-49DDC1F1CBA4}
 	EndGlobalSection
 EndGlobal

wwwroot/css/app.css

@@ -1,5 +1,3 @@
-@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
-
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
@@ -99,3 +97,7 @@ a, .btn-link {
     .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
     }
+
+code {
+    color: #c02d76;
+}