85 lines
3.7 KiB
Plaintext
85 lines
3.7 KiB
Plaintext
<nav class="bg-black py-4">
|
|
<div class="mx-auto max-w-7xl">
|
|
<div class="relative flex h-20 items-center justify-between">
|
|
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
|
<!-- Mobile menu button-->
|
|
<button @onclick="ToggleMenu" type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white" aria-controls="mobile-menu" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
@if (menuOpen)
|
|
{
|
|
<i class="fa-solid fa-xmark fa-xl"></i>
|
|
}
|
|
else
|
|
{
|
|
<i class="fa-solid fa-bars fa-xl"></i>
|
|
}
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
|
<div class="flex flex-shrink-0 items-center">
|
|
<img class="h-14 w-auto" src="images/logo.png" alt="Your Company">
|
|
</div>
|
|
<div class="items-center hidden sm:flex sm:flex-1 justify-center">
|
|
<div class="flex space-x-4">
|
|
<NavLink href="/"
|
|
Match="NavLinkMatch.All"
|
|
ActiveClass="bg-gray-900 text-white"
|
|
class="text-gray-300 hover:bg-gray-800 hover:text-white rounded-md px-3 py-2 font-medium">
|
|
Home
|
|
</NavLink>
|
|
<NavLink href="/contact"
|
|
Match="NavLinkMatch.Prefix"
|
|
ActiveClass="bg-gray-900 text-white"
|
|
class="text-gray-300 hover:bg-gray-800 hover:text-white rounded-md px-3 py-2 font-medium">
|
|
Contact
|
|
</NavLink>
|
|
<NavLink href="/about"
|
|
Match="NavLinkMatch.Prefix"
|
|
ActiveClass="bg-gray-900 text-white"
|
|
class="text-gray-300 hover:bg-gray-800 hover:text-white rounded-md px-3 py-2 font-medium">
|
|
This App
|
|
</NavLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (menuOpen)
|
|
{
|
|
<div class="sm:hidden" id="mobile-menu">
|
|
<div class="space-y-1 px-2 pb-3 pt-2">
|
|
<NavLink href="/"
|
|
Match="NavLinkMatch.All"
|
|
ActiveClass="bg-gray-900 text-white"
|
|
class="block text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 font-medium">
|
|
Home
|
|
</NavLink>
|
|
<NavLink href="/contact"
|
|
Match="NavLinkMatch.Prefix"
|
|
ActiveClass="bg-gray-900 text-white"
|
|
class="block text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 font-medium">
|
|
Contact
|
|
</NavLink>
|
|
<NavLink href="/about"
|
|
Match="NavLinkMatch.Prefix"
|
|
ActiveClass="bg-gray-900 text-white"
|
|
class="block text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 font-medium">
|
|
This App
|
|
</NavLink>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
</nav>
|
|
|
|
@code {
|
|
|
|
private bool menuOpen;
|
|
|
|
private void ToggleMenu()
|
|
{
|
|
menuOpen = !menuOpen;
|
|
}
|
|
|
|
} |