cyhan/bim-dogma-poc
2
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

네비게이션 상단바 이동, 가로 스크롤 고정.

Browse Source
This commit is contained in:
Lectom C Han
2026-01-09 19:29:06 +09:00
parent 7b93467c6e
commit dde7290ab7
9 changed files with 303 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
SchemaEditor/Components/Layout/NavMenu.razor
View File

@@ -1,39 +1,44 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">SchemaEditor</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="editor">
<span class="bi bi-table-view" aria-hidden="true"></span> Editor
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="data">
<span class="bi bi-database" aria-hidden="true"></span> Data Explorer
</NavLink>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
<nav class="navbar navbar-expand-lg navbar-dark top-nav">
<div class="container-fluid">
<a class="navbar-brand" href="">SchemaEditor</a>
<button title="Navigation menu"
class="navbar-toggler"
type="button"
aria-expanded="@(!collapseNavMenu)"
@onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="@NavMenuCssClass">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="editor">
<span class="bi bi-table-view" aria-hidden="true"></span> Editor
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="data">
<span class="bi bi-database" aria-hidden="true"></span> Data Explorer
</NavLink>
</li>
</ul>
<a class="nav-link small text-light" href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
</div>
</nav>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse navbar-collapse" : "navbar-collapse show";
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}