2 changed files with 0 additions and 95 deletions
@ -1,33 +0,0 @@ |
|||
<div class="top-row pl-4 navbar navbar-dark"> |
|||
<a class="navbar-brand" href="">SkiaSharp on Blazor</a> |
|||
<button class="navbar-toggler" @onclick="ToggleNavMenu"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> |
|||
<ul class="nav flex-column"> |
|||
<li class="nav-item px-3"> |
|||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All"> |
|||
<span class="oi oi-home" aria-hidden="true"></span> Raster Canvas |
|||
</NavLink> |
|||
</li> |
|||
<li class="nav-item px-3"> |
|||
<NavLink class="nav-link" href="gpu"> |
|||
<span class="oi oi-plus" aria-hidden="true"></span> GPU Canvas |
|||
</NavLink> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
@code { |
|||
private bool collapseNavMenu = true; |
|||
|
|||
private string? NavMenuCssClass => |
|||
collapseNavMenu ? "collapse" : null; |
|||
|
|||
private void ToggleNavMenu() |
|||
{ |
|||
collapseNavMenu = !collapseNavMenu; |
|||
} |
|||
} |
|||
@ -1,62 +0,0 @@ |
|||
.navbar-toggler { |
|||
background-color: rgba(255, 255, 255, 0.1); |
|||
} |
|||
|
|||
.top-row { |
|||
height: 3.5rem; |
|||
background-color: rgba(0,0,0,0.4); |
|||
} |
|||
|
|||
.navbar-brand { |
|||
font-size: 1.1rem; |
|||
} |
|||
|
|||
.oi { |
|||
width: 2rem; |
|||
font-size: 1.1rem; |
|||
vertical-align: text-top; |
|||
top: -2px; |
|||
} |
|||
|
|||
.nav-item { |
|||
font-size: 0.9rem; |
|||
padding-bottom: 0.5rem; |
|||
} |
|||
|
|||
.nav-item:first-of-type { |
|||
padding-top: 1rem; |
|||
} |
|||
|
|||
.nav-item:last-of-type { |
|||
padding-bottom: 1rem; |
|||
} |
|||
|
|||
.nav-item ::deep a { |
|||
color: #d7d7d7; |
|||
border-radius: 4px; |
|||
height: 3rem; |
|||
display: flex; |
|||
align-items: center; |
|||
line-height: 3rem; |
|||
} |
|||
|
|||
.nav-item ::deep a.active { |
|||
background-color: rgba(255,255,255,0.25); |
|||
color: white; |
|||
} |
|||
|
|||
.nav-item ::deep a:hover { |
|||
background-color: rgba(255,255,255,0.1); |
|||
color: white; |
|||
} |
|||
|
|||
@media (min-width: 641px) { |
|||
.navbar-toggler { |
|||
display: none; |
|||
} |
|||
|
|||
.collapse { |
|||
/* Never collapse the sidebar for wide screens */ |
|||
display: block; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue