fix grafici

This commit is contained in:
zaccaria.majid
2023-02-06 16:58:20 +01:00
parent d729f00fb4
commit c58234db5a
6 changed files with 59 additions and 45 deletions
@@ -25,10 +25,10 @@
{
@foreach (var item in NavMenuLinks)
{
<div class="navItem">
<div>
@if (item.hasChildren)
{
<div>
<div class="navLinkItem" @onclick="()=>doShowChildren(item.Title)">
@if (!isComp)
{
<h5 class=""><i class="@item.Icon px-2"></i>@item.Title</h5>
@@ -37,29 +37,31 @@
{
<i class="@item.Icon"></i>
}
@foreach (var link in item.linkChildren)
{
@if (!isComp)
{
<div class="linkChildren">
<h6 class="navLinkChildrenText">@link</h6>
</div>
}
}
</div>
@foreach (var link in item.linkChildren)
{
@if (!isComp)
{
<div class="linkChildren" id="@item.Title">
<h6 class="navLinkChildrenText">@link</h6>
</div>
}
}
}
else
{
<NavLink href="@item.Title" class="navLinkItem" style="text-decoration: none; color: #000;">
@if (!isComp)
{
<h5 class=""><i class="@item.Icon px-2"></i>@item.Title</h5>
}
else
{
<i class="@item.Icon"></i>
}
</NavLink>
<a href="@item.Title" style="text-decoration: none; color: #000;">
<div class="navLinkItem">
@if (!isComp)
{
<h5 class=""><i class="@item.Icon px-2"></i>@item.Title</h5>
}
else
{
<i class="@item.Icon"></i>
}
</div>
</a>
}
</div>
}
@@ -32,6 +32,10 @@ namespace StockMan.CORE.Components
JSRuntime.InvokeVoidAsync("closeNav");
isComp = true;
}
protected void doShowChildren(string id)
{
JSRuntime.InvokeVoidAsync("doShowChildren", id);
}
protected void deCompress()
{
JSRuntime.InvokeVoidAsync("openNav");
@@ -10,7 +10,7 @@
border-radius: 1.5rem;
background-color: #F0F0F0;
box-shadow: 3px 3px 10px 0px #D1D1D1;
transition: 0.5s;
transition: 0.35s;
}
#myBtn {
transition: 0.25s;
@@ -21,6 +21,7 @@
text-align: center;
display: flex;
justify-content: space-between;
transition: 1s;
}
.icon {
margin-top: 0.5rem;
@@ -37,9 +38,6 @@
display: grid;
height: 100%;
}
.links .navItem {
padding: 1rem;
}
.decoration {
text-decoration: none;
}
@@ -56,17 +54,19 @@
width: 50%;
transition: 0.25s;
}
@keyframes navBtnShow {
0% {
display: none;
}
100% {
display: block;
}
}
.linkChildren {
align-content: center;
height: 0%;
display: none;
transition: 1s;
}
.navLinkItem {
text-decoration: none;
padding: 1rem;
border-radius: 1rem;
transition: background-color 300ms ease-out 100ms;
}
.navLinkItem:hover {
background-color: rgba(179, 157, 219, 0.2);
color: #7e57c2;
}
@@ -10,7 +10,7 @@
border-radius: 1.5rem;
background-color: #F0F0F0;
box-shadow: 3px 3px 10px 0px #D1D1D1;
transition: 0.5s;
transition: 0.35s;
}
#myBtn {
@@ -23,6 +23,7 @@
text-align: center;
display: flex;
justify-content: space-between;
transition: 1s;
}
.icon {
@@ -44,7 +45,7 @@
}
.links .navItem {
padding: 1rem;
//margin-right: 50%;
}
@@ -67,20 +68,22 @@
transition: 0.25s;
}
@keyframes navBtnShow {
0% {
display: none;
}
100% {
display: block;
}
}
.linkChildren {
align-content: center;
height: 0%;
display: none;
transition: 1s;
}
.navLinkItem {
text-decoration: none;
padding: 1rem;
border-radius: 1rem;
transition: background-color 300ms ease-out 100ms
}
.navLinkItem:hover {
background-color: rgba(179, 157, 219, 0.2);
color: rgb(126, 87, 194);
}
@@ -1 +1 @@
.navMenu{background-color:#f00;height:100%;width:100%;margin:.8rem .8rem .8rem .8rem;padding:1rem;width:18rem;height:97vh;position:sticky;border-radius:1.5rem;background-color:#f0f0f0;box-shadow:3px 3px 10px 0 #d1d1d1;transition:.5s;}#myBtn{transition:.25s;border:0;background:none;}.title{text-align:center;display:flex;justify-content:space-between;}.icon{margin-top:.5rem;padding:.8rem;background-color:#d9d9d9;border-radius:50%;}.title h4{margin-top:.7rem;}.links{align-content:center;text-align:center;display:grid;height:100%;}.links .navItem{padding:1rem;}.decoration{text-decoration:none;}.bot{position:absolute;bottom:1rem;}.navLinkIcon{padding:0;margin:0;}.navLinkIcon,.navLinkText{width:50%;transition:.25s;}@keyframes navBtnShow{0%{display:none;}100%{display:block;}}.linkChildren{align-content:center;}.navLinkItem{text-decoration:none;}
.navMenu{background-color:#f00;height:100%;width:100%;margin:.8rem .8rem .8rem .8rem;padding:1rem;width:18rem;height:97vh;position:sticky;border-radius:1.5rem;background-color:#f0f0f0;box-shadow:3px 3px 10px 0 #d1d1d1;transition:.35s;}#myBtn{transition:.25s;border:0;background:none;}.title{text-align:center;display:flex;justify-content:space-between;transition:1s;}.icon{margin-top:.5rem;padding:.8rem;background-color:#d9d9d9;border-radius:50%;}.title h4{margin-top:.7rem;}.links{align-content:center;text-align:center;display:grid;height:100%;}.decoration{text-decoration:none;}.bot{position:absolute;bottom:1rem;}.navLinkIcon{padding:0;margin:0;}.navLinkIcon,.navLinkText{width:50%;transition:.25s;}.linkChildren{align-content:center;height:0%;display:none;transition:1s;}.navLinkItem{text-decoration:none;padding:1rem;border-radius:1rem;transition:background-color 300ms ease-out 100ms;}.navLinkItem:hover{background-color:rgba(179,157,219,.2);color:#7e57c2;}
@@ -5,4 +5,9 @@ function openNav() {
function closeNav() {
document.getElementById("mySidebar").style.width = "5rem";
}
function doShowChildren(id) {
document.getElementById(id).style.display = "block";
document.getElementsByClassName("linkChildren").style.height = "100%";
}