Create prime pagine

Template.Shared/Components/Layout/HeaderLayout.razor

@@ -0,0 +1,10 @@
+<div class="header">
+    <div class="header-content">
+        <h3 class="page-title">@Title</h3>
+        <MudIconButton Icon="@Icons.Material.Filled.FilterAlt" Color="Color.Dark" />
+    </div>
+</div>
+
+@code{
+    [Parameter] public string? Title { get; set; }
+}

Template.Shared/Components/Layout/HeaderLayout.razor.css

@@ -0,0 +1,7 @@
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    color: var(--lighter-color);
+    align-items: center;
+    padding-top: .5rem;
+}

Template.Shared/Components/Layout/MainLayout.razor

@@ -6,14 +6,10 @@
 <MudSnackbarProvider />
 
 <div class="page">
-    @*<div class="sidebar">
-        <NavMenu />
-    </div>*@
-
-    <NavMenu/>
+    <NavMenu />
 
     <main>
-        <article class="content px-4">
+        <article class="container">
             @Body
         </article>
     </main>

Template.Shared/Components/Layout/MainLayout.razor.css

@@ -21,29 +21,29 @@ main {
     align-items: center;
 }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
+.top-row ::deep a, .top-row ::deep .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
 
-        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-            text-decoration: underline;
-        }
+.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+    text-decoration: underline;
+}
 
-        .top-row ::deep a:first-child {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+.top-row ::deep a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 
 @media (max-width: 640.98px) {
     .top-row {
         justify-content: space-between;
     }
 
-        .top-row ::deep a, .top-row ::deep .btn-link {
-            margin-left: 0;
-        }
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 641px) {
@@ -64,14 +64,14 @@ main {
         z-index: 1;
     }
 
-        .top-row.auth ::deep a:first-child {
-            flex: 1;
-            text-align: right;
-            width: 0;
-        }
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
 
     .top-row, article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }
-}
+}

Template.Shared/Components/Layout/NavBar.razor

@@ -1,40 +0,0 @@
-<div class="container">
-    <nav>
-        <ul>
-            <li>
-                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                    <span>Home</span>
-                    <i class="ri-home-5-line"/>
-                </NavLink>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <a href="#" id="workout">
-                    <span>Workout</span>
-                    <i class="ri-empathize-line"/>
-                </a>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <a href="#" id="logbook">
-                    <span>Logbook</span>
-                    <i class="ri-health-book-line"></i>
-                </a>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <a href="#" id="settings">
-                    <span>Impostazioni</span>
-                    <i class="ri-settings-5-line"/>
-                </a>
-            </li>
-        </ul>
-    </nav>
-</div>
-
-@code {
-
-}

Template.Shared/Components/Layout/NavBar.razor.css

@@ -1,81 +0,0 @@
-a {
-    text-decoration: none;
-    color: inherit;
-}
-
-ul {
-    list-style-type: none;
-}
-
-.container {
-    max-width: 100%;
-    margin: 0 auto;
-    padding: 0;
-}
-
-nav {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    background-color: var(--ligther-color);
-    margin: 0;
-    display: flex;
-    border-radius: 40px 40px 0px 0px;
-    box-shadow: rgb(50 50 93 / 25%) 0 50px 100px 10px,
-    rgb(0 0 0 / 30%) 0 30px 60px -30px;
-}
-
-nav ul {
-    display: inline-flex;
-    align-items: center;
-    padding: 0;
-    flex: 0 0 25%;
-    justify-content: center;
-}
-
-nav :where(li a) {
-    position: relative;
-}
-
-nav ul li a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column-reverse;
-    padding: 1em;
-    line-height: 1.4;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out;
-}
-
-nav ul li a:hover {
-    color: var(--primary-color);
-}
-
-nav ul li a i {
-    font-size: 1.5rem;
-}
-
-nav ul li a span {
-    font-size: 0.9rem;
-}
-
-/* animations */
-
-nav li.active a::before, nav li.active a::after {
-    content: "";
-    position: absolute;
-    background-color: var(--primary-color);
-    z-index: -1;
-}
-
-nav li.active a::before {
-    top: 5%;
-    width: calc(100% - 0px);
-    height: 100%;
-    border-radius: 25px;
-}
-
-nav li.active a {
-    color: var(--ligther-color);
-}

Template.Shared/Components/Layout/NavMenu.razor

@@ -1,38 +1,52 @@
-<nav class="navbar navbar-expand justify-content-center">
-    <div class="container-fluid">
-        <ul class="navbar-nav nav-justified w-100 text-center">
+@if (IsVisible)
+{
+    <nav class="navbar navbar-expand justify-content-center">
+        <div class="container-fluid">
+            <ul class="navbar-nav nav-justified w-100 text-center">
 
-            <li class="nav-item">
-                <NavLink class="nav-link " href="workout" Match="NavLinkMatch.All">
-                    <div class="d-flex flex-column">
-                        <i class="ri-empathize-line"/>
-                        @* <span>Workout</span> *@
-                    </div>
-                </NavLink>
-            </li>
-            <li class="nav-item">
-                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                    <div class="d-flex flex-column">
-                        <i class="ri-home-5-line"/>
-                        @* <span>Home</span> *@
-                    </div>
-                </NavLink>
-            </li>
-            <li class="nav-item">
-                <NavLink class="nav-link" href="logbook" Match="NavLinkMatch.All">
-                    <div class="d-flex flex-column">
-                        <i class="ri-health-book-line"></i>
-                        @* <span>Log Book</span> *@
-                    </div>
-                </NavLink>
-            </li>
-            @* <li class="nav-item"> *@
-            @*     <NavLink class="nav-link d-flex flex-column" href="settings" Match="NavLinkMatch.All"> *@
-            @*         <i class="ri-settings-5-line"/> *@
-            @*         <span>Impostazioni</span> *@
-            @*     </NavLink> *@
-            @* </li> *@
-        </ul>
-    </div>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="Users" Match="NavLinkMatch.All">
+                        <div class="d-flex flex-column">
+                            <i class="ri-group-fill"></i>
+                            <span>Contatti</span>
+                        </div>
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="Calendar" Match="NavLinkMatch.All">
+                        <div class="d-flex flex-column">
+                            <i class="ri-calendar-todo-fill"></i>
+                            <span>Agenda</span>
+                        </div>
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="PersonalInfo" Match="NavLinkMatch.All">
+                        <div class="d-flex flex-column">
+                            <i class="ri-user-fill"></i>
+                            <span>Profilo</span>
+                        </div>
+                    </NavLink>
+                </li>
+            </ul>
+        </div>
+    </nav>
+}
 
-</nav>
+@code
+{
+    private bool IsVisible { get; set; } = true;
+
+    protected override Task OnInitializedAsync()
+    {
+        NavigationManager.LocationChanged += (sender, args) =>
+        {
+            var location = args.Location.Remove(0, NavigationManager.BaseUri.Length);
+
+            IsVisible = new List<string> { "Calendar", "Users", "PersonalInfo" }
+                .Contains(location);
+            StateHasChanged();
+        };
+        return Task.CompletedTask;
+    }
+}

Template.Shared/Components/Layout/NavMenu.razor.css

@@ -1,19 +1,15 @@
 .navbar {
-    background-color: var(--ligther-color);
-    border-radius: 50px 50px 0 0;
-    border: #eceff2 solid 1px;
+    background: var(--mud-palette-background-gray);
     position: fixed;
     bottom: 0;
     width: 100%;
 }
 
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
+.navbar-expand { padding: 0 !important; }
+
+.nav-item { font-size: 0.9rem; }
 
 .nav-item ::deep a {
-    color: var(--darker-color);
     display: flex;
     align-items: center;
     line-height: 1.4;
@@ -21,30 +17,31 @@
 }
 
 .nav-item ::deep a > div {
-    width: 4.3rem;
-    height: 4.3rem;
-    border-radius: 100px;
-    justify-content: center;
-    padding-bottom: 0.1rem;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out;
+    -webkit-transition: all .1s ease-out;
+    transition: all .1s ease-out;
+    min-width: 60px;
 }
 
-.nav-item ::deep a.active > div {
-    background-color: var(--primary-color);
-    color: white;
+.nav-item ::deep a.active > div { color: var(--mud-palette-primary); }
+
+.nav-item ::deep a.active > div > i {
+    /*background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);*/
+    border-radius: 10px;
 }
 
-/*.nav-item a:hover :not(.active) {*/
-/*    background-color: rgba(255, 255, 255, 0.1);*/
-/*    color: var(--primary-color);*/
-/*}*/
+.nav-item ::deep a.active > div > span { font-weight: 800; }
 
+.nav-item ::deep a:not(.active) > div { color: var(--mud-palette-drawer-icon); }
 
-.nav-item ::deep a i {
-    font-size: 2rem;
-}
+.nav-item ::deep a i { font-size: 1.5rem; }
 
 .nav-item ::deep a span {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
+    font-weight: 500;
 }
+
+@supports (-webkit-touch-callout: none) {
+    .nav-item { padding-bottom: env(safe-area-inset-bottom) !important; }
+
+    .nav-item ::deep > .nav-link { padding-bottom: 0 !important; }
+}