Why is Inspinia Sidebar Collapse not working?
Following are the codes that I have entered in my dotnet core 3.1 project.
I saw in some examples, navbar-collapse was used, but didn't find it in this template. Yet it seemed to be working fine in the full html version. I am not very good at css/jquery. Can anyone help?
_Navigation.cshtml
<nav class="navbar-inverse navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="block m-t-xs font-bold">XYZ</span>
<span class="text-muted text-xs block">System Administrator <b class="caret"></b></span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs" style="position: absolute; top: 91px; left: 0px; will-change: top, left;">
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
<div class="logo-element">
XYZ
</div>
</li>
<li class=@Html.IsSelected("Home")>
<a href="@Url.Action("Index", "Home")"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
</li>
</ul>
</div>
</nav>
_TopNavBar.cshtml
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
</div>
<ul class="nav navbar-top-links navbar-right">
@if (User.Identity.IsAuthenticated)
{
<li style="padding:20px">
<span class="m-r-sm text-muted welcome-message">Welcome @User.Identity.Name</span>
</li>
}
else
{
<li style="padding:20px">
<span class="m-r-sm text-muted welcome-message">Welcome Guest</span>
</li>
}
<li>
@*<a asp-controller="Auth" asp-action="SignOut">
<i class="fa fa-sign-out"></i> Log out
</a>*@
<a href="/Identity/LogOut">
<i class="fa fa-sign-out"></i> Log out
</a>
</li>
</ul>
</nav>
</div>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Add local styles, mostly for plugins css file -->
@if (IsSectionDefined("Styles"))
{@RenderSection("Styles", required: false)}
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/css/animate.css" />
<link href="~/lib/dualListbox/bootstrap-duallistbox.min.css" rel="stylesheet" />
<link href="~/lib/dataTables/datatables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/style.css" asp-append-version="true" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="~/css/animate.css" />
<link href="~/lib/dualListbox/bootstrap-duallistbox.min.css" rel="stylesheet" />
<link href="~/lib/dataTables/datatables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/style.css" asp-append-version="true" />
</environment>
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
<partial name="_Navigation" />
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg @ViewBag.SpecialClass">
<!-- Top Navbar -->
<partial name="_TopNavbar" />
<!--Hierarchy Selector-->
@*<partial name="_HierarchyPartial" />*@
<!-- Main view -->
@RenderBody()
<!-- Footer -->
<partial name="_Footer" />
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
<environment names="Production">
<script src="~/jquery-3.1.1.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/Popper/popper.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/metisMenu/dist/jquery.metisMenu.js"></script>
<script src="~/lib/slimScroll/jquery.slimscroll.js"></script>
<script src="~/lib/pace/pace.js"></script>
<script src="~/lib/dualListbox/jquery.bootstrap-duallistbox.js"></script>
<script src="~/js/plugins/dualListbox/jquery.bootstrap-duallistbox.js"></script>
<script src="~/datatables.min.js"></script>
<script src="~/js/plugins/dataTables/dataTables.bootstrap4.min.js"></script>
<!-- Only for demo purpose -->
<script src="~/js/skin.config.js"></script>
<script src="~/inspinia.js"></script>
<script src="~/js/script.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Development">
<script src="~/jquery-3.1.1.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/Popper/popper.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/metisMenu/dist/jquery.metisMenu.js"></script>
<script src="~/lib/pace/pace.min.js"></script>
<script src="~/lib/dualListbox/jquery.bootstrap-duallistbox.js"></script>
<script src="~/js/plugins/dualListbox/jquery.bootstrap-duallistbox.js"></script>
<script src="~/lib/slimScroll/jquery.slimscroll.min.js"></script>
<script src="~/datatables.min.js"></script>
<script src="~/js/plugins/dataTables/dataTables.bootstrap4.min.js"></script>
<script src="~/inspinia.js"></script>
<script src="~/js/script.js" asp-append-version="true"></script>
</environment>
@RenderSection("scripts", required: false)
</body>
</html>