Update navigation bar with button text for Home, Comparison, Wishlist, and Account; adjust transition duration in CSS

This commit is contained in:
Fabian Schieder 2026-03-30 23:35:59 +02:00
parent 37a4b1366f
commit fccf86f4f8
2 changed files with 17 additions and 8 deletions

View File

@ -96,7 +96,14 @@
<!-- ═══ /Slide-In-Menü ═══ --> <!-- ═══ /Slide-In-Menü ═══ -->
<div class="nav__actions"> <div class="nav__actions">
<a class="nav__login nav__wishlist" href="compare.php" aria-label="Vergleich"> <a class="nav__login" href="index.php" aria-label="Home">
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
<span class="nav__btn-text">Home</span>
</a>
<a class="nav__login" href="compare.php" aria-label="Vergleich">
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="20" x2="18" y2="10"></line> <line x1="18" y1="20" x2="18" y2="10"></line>
<line x1="12" y1="20" x2="12" y2="4"></line> <line x1="12" y1="20" x2="12" y2="4"></line>
@ -104,16 +111,16 @@
</svg> </svg>
<span class="nav__btn-text">Vergleich</span> <span class="nav__btn-text">Vergleich</span>
</a> </a>
<a class="nav__login nav__wishlist" href="wunschliste.php" aria-label="Wunschliste"> <a class="nav__login" href="wunschliste.php" aria-label="Wunschliste">
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true"> <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 2H8a3 3 0 0 0-3 3v16a1 1 0 0 0 .5.87a1 1 0 0 0 1 0l5.5-3.18l5.5 3.18a1 1 0 0 0 .5.13a1 1 0 0 0 .5-.13A1 1 0 0 0 19 21V5a3 3 0 0 0-3-3Zm1 17.27l-4.5-2.6a1 1 0 0 0-1 0L7 19.27V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z" <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
stroke="currentColor" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
<span class="nav__btn-text">Wunschliste</span> <span class="nav__btn-text">Wunschliste</span>
</a> </a>
<a class="nav__login" href="account.php" aria-label="Account"> <a class="nav__login" href="account.php" aria-label="Account">
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true"> <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"/> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg> </svg>
<span class="nav__btn-text">Account</span> <span class="nav__btn-text">Account</span>
</a> </a>
@ -180,3 +187,5 @@

View File

@ -412,7 +412,7 @@ a:hover {
white-space: nowrap; white-space: nowrap;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
transition: all 0.3s ease; transition: all 0.5s ease;
margin-left: 0; margin-left: 0;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;