fixed menu

alex-wolf-ps · Feb 11, 2020 · 2257c3b · 2257c3b
1 parent 3992128
commit 2257c3b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 33 deletions.
diff --git a/BethanysPieShopHRM.UI/Pages/_Host.cshtml b/BethanysPieShopHRM.UI/Pages/_Host.cshtml
@@ -35,14 +35,5 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
     <!-- Bootstrap JS -->
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
-
-    <script>
-        function nav() {
-            $("a").click(function (e) {
-                e.preventDefault();
-                $(this).next('.sub-menu').toggle();
-            });
-        }
-    </script>
 </body>
 </html>
diff --git a/BethanysPieShopHRM.UI/Shared/LeftNav.razor b/BethanysPieShopHRM.UI/Shared/LeftNav.razor
@@ -9,13 +9,13 @@
         <nav id="sidebar">
             <ul class="list-unstyled components">
                 <li>
-                    <NavLink href="/" Match="NavLinkMatch.All">
+                    <NavLink href="/">
                         Home
                     </NavLink>
                 </li>
                 <li>
-                    <a data-toggle="collapse" class="dropdown-toggle">Tasks</a>
-                    <ul class="list-unstyled sub-menu" id="tasks">
+                    <a @onclick="(() => ToggleNav1(1))" data-toggle="collapse" class="dropdown-toggle">Tasks</a>
+                    <ul class="list-unstyled sub-menu @( this.IsHidden1 ? "toggle-hide": "toggle-show")" id="tasks">
                         <li>
                             <NavLink href="/tasks">
                                 View tasks
@@ -29,8 +29,8 @@
                     </ul>
                 </li>
                 <li>
-                    <a data-toggle="collapse" class="dropdown-toggle">Employees</a>
-                    <ul class="list-unstyled sub-menu" id="employees">
+                    <a @onclick="(() => ToggleNav1(2))" data-toggle="collapse" class="dropdown-toggle">Employees</a>
+                    <ul class="list-unstyled sub-menu @( this.IsHidden2 ? "toggle-hide": "toggle-show")" id="employees">
                         <li>
                             <NavLink href="/employeeoverview">
                                 View Employees
@@ -44,8 +44,8 @@
                     </ul>
                 </li>
                 <li>
-                    <a data-toggle="collapse" class="dropdown-toggle">Opportunities</a>
-                    <ul class="list-unstyled sub-menu" id="jobs">
+                    <a @onclick="(() => ToggleNav1(3))" data-toggle="collapse" class="dropdown-toggle">Opportunities</a>
+                    <ul class="list-unstyled sub-menu @( this.IsHidden3 ? "toggle-hide": "toggle-show")" id="jobs">
                         <li>
                             <NavLink href="/jobs">
                                 Jobs
@@ -59,8 +59,8 @@
                     </ul>
                 </li>
                 <li>
-                    <a data-toggle="collapse" class="dropdown-toggle">Expenses</a>
-                    <ul class="list-unstyled sub-menu" id="training">
+                    <a @onclick="(() => ToggleNav1(4))" data-toggle="collapse" class="dropdown-toggle">Expenses</a>
+                    <ul class="list-unstyled sub-menu @( this.IsHidden4 ? "toggle-hide": "toggle-show")" id="training">
                         <li>
                             <NavLink href="/expenses">
                                 Expenses
@@ -74,8 +74,8 @@
                     </ul>
                 </li>
                 <li>
-                    <a data-toggle="collapse" class="dropdown-toggle">Feedback</a>
-                    <ul class="list-unstyled sub-menu" id="feedback">
+                    <a @onclick="(() => ToggleNav1(5))" data-toggle="collapse" class="dropdown-toggle">Feedback</a>
+                    <ul class="list-unstyled sub-menu @( this.IsHidden5 ? "toggle-hide": "toggle-show")" id="feedback">
                         <li>
                             <NavLink href="/surveys">
                                 Surveys
@@ -96,4 +96,35 @@
             </ul>
         </nav>
     </div>
-</div>
+</div>
+
+@code{
+    public bool IsHidden1 { get; set; } = true;
+    public bool IsHidden2 { get; set; } = true;
+    public bool IsHidden3 { get; set; } = true;
+    public bool IsHidden4 { get; set; } = true;
+    public bool IsHidden5 { get; set; } = true;
+
+    public void ToggleNav1(int navId)
+    {
+        switch (navId)
+        {
+            case 1:
+                IsHidden1 = !IsHidden1;
+                break;
+            case 2:
+                IsHidden2 = !IsHidden2;
+                break;
+            case 3:
+                IsHidden3 = !IsHidden3;
+                break;
+            case 4:
+                IsHidden4 = !IsHidden4;
+                break;
+            case 5:
+                IsHidden5 = !IsHidden5;
+                break;
+        }
+
+    }
+}
diff --git a/BethanysPieShopHRM.UI/Shared/MainLayout.razor b/BethanysPieShopHRM.UI/Shared/MainLayout.razor
@@ -20,15 +20,4 @@
         </div>
     </div>
 
-</div>
-
-@code{
-    [Inject]
-   protected IJSRuntime JsRuntime { get; set; }
-
-   protected override void OnAfterRender(bool firstRender)
-   {
-       if (firstRender)
-           JsRuntime.InvokeVoidAsync("nav");
-   }
-}
+</div>
diff --git a/BethanysPieShopHRM.UI/wwwroot/css/site.css b/BethanysPieShopHRM.UI/wwwroot/css/site.css
@@ -304,4 +304,12 @@ a[data-toggle="collapse"] {
 
 .sub-menu {
     display: none;
+}
+
+#sidebar .toggle-hide {
+    display: none;
+}
+
+#sidebar .toggle-show {
+    display: block;
 }