Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2025-12-06 10:10:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

🖼️ Navbar + Icon + Font

Browse Source
This commit is contained in:
Rico van Zelst
2023-10-26 16:57:28 +02:00
parent 23c31f88c5
commit c1194738c5
18 changed files with 986 additions and 1155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
resources/views/components/navbar.blade.php
View File

@@ -1,74 +1,29 @@
<header class="bg-white dark:bg-gray-900">
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<div class="md:flex md:items-center md:gap-12">
<a class=" flex flex-row items-center" href="/">
<span class="sr-only">Home</span>
<x-logo class="h-12 w-auto mr-3" />
<p class="text-white font-semibold">Heimerdinger.lol</p>
</a>
</div>
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">
<a href="/" class="flex items-center">
<x-logo class="w-auto mr-2 transition-transform h-9 hover:scale-125" alt="Heimerdinger Logo" />
<span class="self-center text-2xl font-medium whitespace-nowrap dark:text-white">Heimerdinger.LoL</span>
<span class="sr-only">Home</span>
</a>
<button data-collapse-toggle="navbar-default" type="button"
class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div id="navbar-default" class="hidden w-full md:block md:w-auto">
<ul
class="flex flex-col p-4 mt-4 font-medium border border-gray-100 rounded-lg md:p-0 bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#"
class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
</li>
<div class="hidden md:block">
<nav aria-label="Global">
<ul class="flex items-center gap-6 text-sm">
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
About
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Careers
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
History
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Services
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Projects
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Blog
</a>
</li>
</ul>
</nav>
</div>
<div class="flex items-center gap-4">
<div class="block md:hidden">
<button
class="rounded bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75 dark:bg-gray-800 dark:text-white dark:hover:text-white/75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</ul>
</div>
</div>
</header>
</nav>