beau/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add mobile friendly nav bar

Browse Source
This commit is contained in:
Beau Findlay
2024-03-14 21:47:11 +00:00
parent 76fbd3ae9f
commit 94f4726e3a
4 changed files with 270 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor
View File

@@ -1,11 +1,85 @@
<nav class="flex items-center justify-center py-8 md:py-12 space-x-8">
<NavLink href="/" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
Home
</NavLink>
<NavLink href="/contact" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
Contact
</NavLink>
<NavLink href="/about" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
This App
</NavLink>
</nav>
<nav class="bg-black">
<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;
}
}