This commit is contained in:
Samuele Locatelli
2023-09-28 11:39:27 +02:00
4 changed files with 84 additions and 44 deletions
@@ -1,19 +1,41 @@
@inherits LayoutComponentBase
@inject OprFiltData MDataService
<div class="page">
<main>
<div class="top-row px-4">
<div class="top-row px-4 d-flex justify-content-between">
<div>
<span>
Username
</span>
<sub>[999]</sub>
</div>
<div>MapoTAB2</div>
<div>
@* <div class="row w-100 slideMen"> *@
<div class="row w-100 slideMen">
<div class="col-4">
<MP_TAB.Client.Components.SlideMenu MenuItems="@CurrMenuItems"></MP_TAB.Client.Components.SlideMenu>
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>
</div>
<article class="content px-4">
@Body
<article class="content px-4 d-flex">
<div class="col-10">
@Body
</div>
<div class="sidebar col-2">
<NavMenu MenuItems="@CurrMenuItems" />
</div>
</article>
</main>
<div class="sidebar">
<NavMenu />
</div>
</div>
<div id="blazor-error-ui">
@@ -21,3 +43,26 @@
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
@code {
/// <summary>
/// Elenco items da menù per pagina corrente...
/// </summary>
protected List<LinkMenu> CurrMenuItems { get; set; } = new List<LinkMenu>();
/// <summary>
/// Livello corrente del menu
/// </summary>
protected string CurrLevel = "T2H";
/// <summary>
/// Init struttura dati
/// </summary>
/// <returns></returns>
protected override async Task OnInitializedAsync()
{
await Task.Delay(1);
CurrMenuItems = await MDataService.ListLinkFilt(CurrLevel);
// return base.OnInitializedAsync();
}
}
@@ -9,7 +9,8 @@ main {
}
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
/*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
padding: 0 10px 0 0;
}
.top-row {
@@ -23,7 +24,7 @@ main {
.top-row ::deep a, .top-row ::deep .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
/*margin-left: 1.5rem;*/
text-decoration: none;
}
@@ -35,7 +36,11 @@ main {
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 640.98px) {
.slideMen:not(.auth) {
display: none;
}
}
@media (max-width: 640.98px) {
.top-row:not(.auth) {
display: none;
+12 -25
View File
@@ -1,29 +1,32 @@
@inject OprFiltData MDataService
@* <div class="row w-100 slideMen"> *@
<div class="row w-100">
@* <div class="row w-100 slideMen">
<div class="col-4">
<MP_TAB.Client.Components.SlideMenu MenuItems="@CurrMenuItems"></MP_TAB.Client.Components.SlideMenu>
<MP_TAB.Client.Components.SlideMenu MenuItems="@MenuItems"></MP_TAB.Client.Components.SlideMenu>
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
<div class="top-row ps-3 navbar navbar-dark">
*@
@* <div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">MyBlazorWeb</a>
</div>
</div>
</div> *@
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<div class="bg-dark text-center py-2">
<i class="fa-solid fa-link"></i> &nbsp; <span class="fw-bold">Link diretti</span>
</div>
<nav class="flex-column">
@if(CurrMenuItems!=null && CurrMenuItems.Count>0)
@if (MenuItems != null && MenuItems.Count > 0)
{
foreach (var item in CurrMenuItems)
foreach (var item in MenuItems)
{
<div class="nav-item px-2">
<NavLink class="nav-link px-2" href="@item.NavigateUrl">
@@ -60,23 +63,7 @@
</div>
@code{
/// <summary>
/// Elenco items da menù per pagina corrente...
/// </summary>
protected List<LinkMenu> CurrMenuItems { get; set; } = new List<LinkMenu>();
/// <summary>
/// Livello corrente del menu
/// </summary>
protected string CurrLevel = "T2H";
/// <summary>
/// Init struttura dati
/// </summary>
/// <returns></returns>
protected override async Task OnInitializedAsync()
{
await Task.Delay(1);
CurrMenuItems = await MDataService.ListLinkFilt(CurrLevel);
// return base.OnInitializedAsync();
}
[Parameter]
public List<LinkMenu> MenuItems { get; set; } = new List<LinkMenu>();
}
@@ -67,7 +67,7 @@
}
.nav-item ::deep a {
color: #d7d7d7;
color: rgba(33, 36, 39, 11);
border-radius: 4px;
height: 3rem;
display: flex;
@@ -75,18 +75,20 @@
line-height: 3rem;
}
.nav-item ::deep a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item ::deep a.active {
background-color: rgb(33, 36, 39);
color: white;
}
.nav-item ::deep a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.nav-item ::deep a:hover {
background-color: rgba(33, 36, 39, 0.4);
color: white;
}
.nav-scrollable {
display: none;
background-color: #f2f2f2;
border-radius: 0.375rem;
}
.navbar-toggler:checked ~ .nav-scrollable {
@@ -103,7 +105,8 @@
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
/*height: calc(100vh - 3.5rem);*/
overflow-y: auto;
}
}