FSST/Geizkragen
FSST/Geizkragen
2
0
Fork 0
Code Issues Projects 1 Releases 1 Wiki Activity

Enhance navigation bar with button text for comparison, wishlist, and account

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-30 23:31:10 +02:00
parent 9def8e73d2
commit 37a4b1366f
2 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
header.php
View File

@ -102,17 +102,20 @@
<line x1="12" y1="20" x2="12" y2="4"></line> <line x1="12" y1="20" x2="12" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="14"></line> <line x1="6" y1="20" x2="6" y2="14"></line>
</svg> </svg>
<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 nav__wishlist" 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">
<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="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"
stroke="currentColor" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/> stroke="currentColor" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
<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">
<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="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"/>
</svg> </svg>
<span class="nav__btn-text">Account</span>
</a> </a>
<!-- Hamburger-Toggle --> <!-- Hamburger-Toggle -->
@ -175,3 +178,5 @@

25
style.css
View File

@ -380,7 +380,7 @@ a:hover {
box-shadow: 0 0 12px rgba(37, 99, 235, 0.12); box-shadow: 0 0 12px rgba(37, 99, 235, 0.12);
} }
/* ─── Nav Actions ─── */ /* ”€”€”€ Nav Actions ”€”€”€ */
.nav__actions { .nav__actions {
display: flex; display: flex;
align-items: center; align-items: center;
@ -399,6 +399,29 @@ a:hover {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
overflow: hidden;
}
.nav__login {
border-radius: var(--radius-full);
}
.nav__btn-text {
max-width: 0;
opacity: 0;
white-space: nowrap;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
margin-left: 0;
display: inline-block;
overflow: hidden;
}
.nav__login:hover .nav__btn-text {
max-width: 100px;
opacity: 1;
margin-left: 8px;
} }
.nav__search:hover, .nav__search:hover,