@if (item.hasChildren)
{
-
+
doShowChildren(item.Title)">
@if (!isComp)
{
@item.Title
@@ -37,29 +37,31 @@
{
}
- @foreach (var link in item.linkChildren)
- {
- @if (!isComp)
- {
-
-
@link
-
- }
- }
+ @foreach (var link in item.linkChildren)
+ {
+ @if (!isComp)
+ {
+
+
@link
+
+ }
+ }
}
else
{
-
- @if (!isComp)
- {
- @item.Title
- }
- else
- {
-
- }
-
+
+
+ @if (!isComp)
+ {
+
@item.Title
+ }
+ else
+ {
+
+ }
+
+
}
}
diff --git a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.cs b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.cs
index 74b442e..e055633 100644
--- a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.cs
+++ b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.cs
@@ -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");
diff --git a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.css b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.css
index 1301bdf..c70fa27 100644
--- a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.css
+++ b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.css
@@ -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;
}
\ No newline at end of file
diff --git a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.less b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.less
index bbd5288..0e45626 100644
--- a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.less
+++ b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.less
@@ -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);
}
diff --git a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.min.css b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.min.css
index a9036f4..488c6ed 100644
--- a/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.min.css
+++ b/StockMan.CORE/StockMan.CORE/Components/NewNavMenu.razor.min.css
@@ -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;}
\ No newline at end of file
+.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;}
\ No newline at end of file
diff --git a/StockMan.CORE/StockMan.CORE/wwwroot/lib/menuCompression.js b/StockMan.CORE/StockMan.CORE/wwwroot/lib/menuCompression.js
index 8bd3a4b..8b8cc6c 100644
--- a/StockMan.CORE/StockMan.CORE/wwwroot/lib/menuCompression.js
+++ b/StockMan.CORE/StockMan.CORE/wwwroot/lib/menuCompression.js
@@ -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%";
}
\ No newline at end of file