feat: add option to easily redirect to Genius website

static/script.js

@@ -9,6 +9,8 @@ function showAbout() {
 fullAbout && [fullAbout, summary].forEach(item => item.onclick = showAbout)
 
 window.addEventListener("load", () => {
+	const geniusURL = "https://genius.com" + document.location.pathname + document.location.search
+	document.getElementById("goto-genius").setAttribute("href", geniusURL)
 	document.querySelectorAll("#lyrics a").forEach(item => {
 		item.addEventListener("click", getAnnotation)
 	})

style/navbar.css

@@ -24,7 +24,13 @@ nav img {
 	width: 50px;
 }
 
-#choose-theme {
+#nav-icons {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.nav-icon {
 	background: none;
 	border: none;
 	cursor: pointer;

views/navbar.templ

@@ -4,7 +4,20 @@ templ navbar() {
 	<nav>
 		<div id="nav-container">
 			<a href="/"><img src="/static/logo.svg"/></a>
-			<button id="choose-theme">
+			<div id="nav-icons">
+				<a
+					title="Go to Genius.com"
+					alt="Go to Genius.com"
+					class="nav-icon"
+					id="goto-genius"
+					rel="noopener noreferrer"
+					target="_blank"
+				>
+					<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" fill="none" viewBox="0 0 24 24">
+						<path stroke="#181d31" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"></path>
+					</svg>
+				</a>
+				<button id="choose-theme" class="nav-icon">
 					<svg
 						width="25px"
 						height="25px"
@@ -23,5 +36,6 @@ templ navbar() {
 					</svg>
 				</button>
 			</div>
+		</div>
 	</nav>
 }