Use links instead of onclick to change tab (6266163e) · Commits · Jakob Moser / karaokatalog-ui

frontend/TabBar.mjs

+2 −2

Changes for frontend/TabBar.mjs: 2 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		@@ -16,10 +16,10 @@ const TabBar = {
		"div.tab-bar-container",
		tabs.map(tab => {
		return m(
		"div.tab-item",
		m.route.Link,
		{
		class: currentView === tab.id ? "active" : "",
		onclick: () => onViewChange(tab.id),
		href: `/${tab.id}`,
		role: "button", // Für Barrierefreiheit
		tabindex: 0, // Für Tastaturnavigation
		onkeypress: e => {

+4 −3

Changes for frontend/style.css: 4 added lines, 3 removed lines.
Original line number	Diff line number	Diff line
		@@ -61,7 +61,7 @@ input[type="search"]::placeholder {
		box-sizing: border-box;
		}

		.tab-item {
		.tab-bar-container a {
		flex-grow: 1;
		display: flex; /* Für vertikales Zentrieren des Texts */
		align-items: center;
		@@ -83,13 +83,14 @@ input[type="search"]::placeholder {
		color 0.2s ease-in-out,
		border-bottom-color 0.2s ease-in-out;
		user-select: none;
		text-decoration: none;
		}

		.tab-item:hover {
		.tab-bar-container a:hover {
		background-color: rgba(255, 255, 255, 0.1); /* Leichter Hover-Effekt */
		}

		.tab-item.active {
		.tab-bar-container a.active {
		color: #ffffff; /* Reines Weiß für aktiven Tab */
		border-bottom-color: #ff4081; /* Material Accent Pink für den Indikator */
		}