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