68 lines
2.9 KiB
Plaintext
68 lines
2.9 KiB
Plaintext
<script>
|
|
function toggleSidebar() {
|
|
let sidebar = document.querySelector(".sidebar");
|
|
sidebar.classList.toggle("collapsed");
|
|
}
|
|
</script>
|
|
|
|
<div class="sidebar collapsed">
|
|
<div class="flex-grow-1 d-flex flex-column">
|
|
<div class="title">
|
|
<img src="images/logoLight.svg" alt="PhenikaaX" style="height: 35px;" onclick="toggleSidebar()" />
|
|
<button class="btn button" onclick="toggleSidebar()">
|
|
<i class="mdi mdi-menu" style="color: white; font-size: 35px"></i>
|
|
</button>
|
|
</div>
|
|
<hr />
|
|
@foreach (var nav in Navs)
|
|
{
|
|
<div class="nav-item px-3">
|
|
<NavLink class="nav-link" href="@nav.Path" Match="@nav.Match">
|
|
<div class="d-flex align-items-center">
|
|
<div class="nav-icon">
|
|
<span class="mdi @nav.Icon mdi-36px" aria-hidden="true"></span>
|
|
</div>
|
|
<span class="nav-label">@nav.Label</span>
|
|
</div>
|
|
</NavLink>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="user">
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
public class NavModel
|
|
{
|
|
public string Icon { get; set; } = "";
|
|
public string Path { get; set; } = "";
|
|
public string Label { get; set; } = "";
|
|
public NavLinkMatch Match { get; set; }
|
|
}
|
|
|
|
public NavModel[] Navs = [
|
|
new(){Icon = "mdi-view-dashboard", Path="/", Label = "Dashboard", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-file-cog", Path="/script-manager", Label = "Script Manager", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-file-code", Path="/script-editor", Label = "Script Editor", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-flag-checkered", Path="/missions", Label = "Missions", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-map-legend", Path="/navigation-maps", Label = "Maps", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-robot-mower", Path="/robots", Label = "Robots", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-robot-industrial", Path="/robots/model", Label = "Robot Models", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-monitor-eye", Path="/robots/monitor", Label = "Monitor", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-traffic-light", Path="/traffic-manager", Label = "Traffic", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-factory", Path="/open-acs", Label = "Open ACS", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-math-log", Path="/logs", Label = "Logs", Match = NavLinkMatch.All},
|
|
new(){Icon = "mdi-account", Path="/user", Label = "User", Match = NavLinkMatch.All},
|
|
];
|
|
|
|
private bool collapseNavMenu = true;
|
|
|
|
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
|
|
|
|
private void ToggleNavMenu()
|
|
{
|
|
collapseNavMenu = !collapseNavMenu;
|
|
}
|
|
}
|