Merge pull request #36 from mbaraa/feat/active-page-indicator

Feat/active page indicator
mbaraa · May 22, 2024 · 01156ac · 01156ac
2 parents 7ae80ff + 2458199
commit 01156ac
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 25 deletions.
diff --git a/static/js/router.js b/static/js/router.js
@@ -0,0 +1,36 @@
+"use strict";
+
+const links = [
+  { check: (l) => l === "/", element: document.getElementById("/") },
+  { check: (l) => l === "/about", element: document.getElementById("/about") },
+  {
+    check: (l) => l === "/profile",
+    element: document.getElementById("/profile"),
+  },
+  {
+    check: (l) => l.startsWith("/playlist"),
+    element: document.getElementById("/playlists"),
+  },
+];
+
+function updateActiveNavLink() {
+  for (const link of links) {
+    if (link.check(window.location.pathname)) {
+      link.element.classList.add("bg-accent-trans-20");
+    } else {
+      link.element.classList.remove("bg-accent-trans-20");
+    }
+  }
+}
+
+window.addEventListener("load", () => {
+  updateActiveNavLink();
+});
+
+window.addEventListener("popstate", (e) => {
+  e.stopImmediatePropagation();
+  e.preventDefault();
+  window.open(window.location.prevPath, "_self");
+});
+
+window.Router = { updateActiveNavLink };
diff --git a/static/js/utils.js b/static/js/utils.js
@@ -40,12 +40,6 @@ function getTextWidth() {
   return window.innerWidth > 768 ? 35 : 15;
 }
 
-window.addEventListener("popstate", (e) => {
-  e.stopImmediatePropagation();
-  e.preventDefault();
-  window.open(window.location.prevPath, "_self");
-});
-
 window.Utils = {
   showLoading,
   hideLoading,

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
@@ -27,8 +27,15 @@ templ mobileHeader() {
 			@themeswitch.ThemeSwitch()
 		</div>
 		<div class={ "flex", "flex-col", "justify-between", "gap-y-3" }>
-			<div class={ "font-Ubuntu", "text-secondary" }>
-				@navlink.LinkContainer("/", "Home", homeLinkContainer())
+			<div class={ "flex", "justify-center", "items-center", "flex-col", "md:flex-row", "gap-1", "h-min", "text-secondary" }>
+				<img
+					width="55"
+					height="55"
+					src="/static/images/logo.webp"
+					alt="DankMuzikk Logo"
+					class={ "w-[55px]", "rounded-md" }
+				/>
+				<h1 class={ "text-3xl", }>DankMuzikk</h1>
 			</div>
 			<div>
 				<p class={ "text-secondary", "font-Ubuntu", "text-xl" }>
@@ -57,12 +64,6 @@ templ desktopHeader() {
 		<div class={ "flex", "justify-center", "items-center", "gap-x-7" }>
 			<nav>
 				<ul class={ "m-0", "list-none", "flex", "gap-x-5" }>
-					<!-- kept for SEO -->
-					<div class="hidden">
-						<li><a href="/about">About</a></li>
-						<li><a href="/playlists">Playlists</a></li>
-						<li><a href="/profile">Profile</a></li>
-					</div>
 					<li>
 						@navlink.NavLink("About", "", "/about")
 					</li>

diff --git a/views/components/mobilenav/mobilenav.templ b/views/components/mobilenav/mobilenav.templ
@@ -11,12 +11,6 @@ templ MobileNav() {
 			class={ "bg-primary",  "h-[55px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center", "items-center" }
 		>
 			<ul class={ "w-full", "m-0", "p-5", "px-14", "list-none", "flex", "justify-between" }>
-				<!-- kept for SEO -->
-				<div class="hidden">
-					<li><a href="/about">About</a></li>
-					<li><a href="/playlists">Playlists</a></li>
-					<li><a href="/profile">Profile</a></li>
-				</div>
 				<li>
 					@navlink.LinkContainer("/", "Home", icons.Home())
 				</li>

diff --git a/views/components/navlink/navlink.templ b/views/components/navlink/navlink.templ
@@ -2,9 +2,10 @@ package navlink
 
 templ NavLink(title, imageUrl, path string, showTilte ...bool) {
 	<a
+		id={ path }
 		href={ templ.SafeURL(path) }
 		title={ title }
-		class={ "inline-block" }
+		class={ "inline-block", "rounded-md", "p-1" }
 		hx-get={ path + "?no_layout=true" }
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
@@ -39,12 +40,18 @@ templ LinkContainer(path, title string, child templ.Component) {
 		hx-trigger="click,submit"
 		onClick={ updateHref(path) }
 	>
-		@child
+		<div
+			id={ path }
+			class={ "p-1", "rounded-md" }
+		>
+			@child
+		</div>
 	</a>
 }
 
 script updateHref(path string) {
     const prevPath = window.location.href.substring((window.location.protocol+"//"+window.location.host).length);
     window.location.prevPath = prevPath;
     window.history.pushState({}, "", path)
+    Router.updateActiveNavLink();
 }
diff --git a/views/icons/home.templ b/views/icons/home.templ
@@ -1,7 +1,7 @@
 package icons
 
 templ Home() {
-	<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg class={ "m-1" } width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path d="M12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444H12.7725ZM14.2239 24.227L12.7735 24.1714C12.7728 24.19 12.7725 24.2084 12.7725 24.227H14.2239ZM18.8684 19.9115L18.8173 21.3619C18.8513 21.3631 18.8854 21.3631 18.9194 21.3619L18.8684 19.9115ZM23.5128 24.227H24.9642C24.9642 24.2084 24.9638 24.19 24.9633 24.1714L23.5128 24.227ZM22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444H22.0614ZM14.2239 27.093C13.4223 27.093 12.7725 27.7428 12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958V27.093ZM23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444C24.9642 27.7428 24.3144 27.093 23.5128 27.093V29.9958ZM14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444C15.6753 27.7428 15.0254 27.093 14.2239 27.093V29.9958ZM13.0628 28.5444V27.093C13.0457 27.093 13.0287 27.0932 13.0117 27.0938L13.0628 28.5444ZM6.09603 22.0692H4.64463C4.64463 22.0874 4.64498 22.1058 4.64567 22.1242L6.09603 22.0692ZM7.54743 9.0917C7.54743 8.29012 6.89761 7.6403 6.09603 7.6403C5.29445 7.6403 4.64463 8.29012 4.64463 9.0917H7.54743ZM0.636443 11.0433C-0.0268087 11.4933 -0.199525 12.3959 0.250641 13.0593C0.700827 13.7225 1.60342 13.8951 2.26666 13.445L0.636443 11.0433ZM6.91114 10.2926C7.57439 9.84243 7.7471 8.93983 7.29694 8.2766C6.84675 7.61336 5.94416 7.44063 5.28092 7.89081L6.91114 10.2926ZM5.28092 7.89081C4.61765 8.34094 4.44496 9.2435 4.89508 9.90675C5.34523 10.57 6.24789 10.7427 6.91114 10.2926L5.28092 7.89081ZM16.19 2.24109L15.4026 1.02186C15.3933 1.02786 15.384 1.03395 15.3749 1.04017L16.19 2.24109ZM21.5467 2.24109L22.3618 1.04017C22.3527 1.03395 22.3434 1.02786 22.3341 1.02186L21.5467 2.24109ZM30.8256 10.2926C31.489 10.7428 32.3915 10.57 32.8417 9.90675C33.2918 9.2435 33.119 8.3409 32.4558 7.89078L30.8256 10.2926ZM23.5128 27.093C22.7113 27.093 22.0614 27.7428 22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958V27.093ZM24.674 28.5444L24.725 27.0938C24.708 27.0932 24.691 27.093 24.674 27.093V28.5444ZM31.6407 22.0692L33.0911 22.1242C33.0917 22.1058 33.0921 22.0874 33.0921 22.0692H31.6407ZM33.0921 9.0917C33.0921 8.29012 32.4422 7.6403 31.6407 7.6403C30.8391 7.6403 30.1893 8.29012 30.1893 9.0917H33.0921ZM35.4704 13.4433C36.1338 13.8934 37.0364 13.7204 37.4863 13.057C37.9363 12.3936 37.7633 11.491 37.0999 11.0411L35.4704 13.4433ZM32.4558 7.89078C31.7924 7.44078 30.8896 7.61358 30.4395 8.27694C29.9896 8.94031 30.1622 9.84266 30.8256 10.2926L32.4558 7.89078ZM15.6753 28.5444V24.227H12.7725V28.5444H15.6753ZM15.6743 24.2823C15.7382 22.6091 17.1439 21.3029 18.8173 21.3619L18.9194 18.4608C15.6472 18.3457 12.8985 20.8996 12.7735 24.1714L15.6743 24.2823ZM18.9194 21.3619C20.5928 21.3029 21.9985 22.6091 22.0624 24.2823L24.9633 24.1714C24.8383 20.8996 22.0895 18.3457 18.8173 18.4608L18.9194 21.3619ZM22.0614 24.227V28.5444H24.9642V24.227H22.0614ZM14.2239 29.9958H23.5128V27.093H14.2239V29.9958ZM14.2239 27.093H13.0628V29.9958H14.2239V27.093ZM13.0117 27.0938C10.1012 27.1963 7.65673 24.9242 7.54639 22.0143L4.64567 22.1242C4.81663 26.6332 8.60428 30.1537 13.1138 29.9948L13.0117 27.0938ZM7.54743 22.0692V9.0917H4.64463V22.0692H7.54743ZM2.26666 13.445L6.91114 10.2926L5.28092 7.89081L0.636443 11.0433L2.26666 13.445ZM6.91114 10.2926L17.0051 3.44204L15.3749 1.04017L5.28092 7.89081L6.91114 10.2926ZM16.9775 3.46033C18.1285 2.71696 19.6082 2.71696 20.7592 3.46033L22.3341 1.02186C20.2245 -0.34062 17.5122 -0.34062 15.4026 1.02186L16.9775 3.46033ZM20.7316 3.44204L30.8256 10.2926L32.4558 7.89078L22.3618 1.04017L20.7316 3.44204ZM23.5128 29.9958H24.674V27.093H23.5128V29.9958ZM24.6229 29.9948C29.1325 30.1537 32.92 26.6332 33.0911 22.1242L30.1902 22.0143C30.0799 24.9242 27.6354 27.1963 24.725 27.0938L24.6229 29.9948ZM33.0921 22.0692V9.0917H30.1893V22.0692H33.0921ZM37.0999 11.0411L32.4558 7.89078L30.8256 10.2926L35.4704 13.4433L37.0999 11.0411Z" fill="var(--secondary-color)"></path>
 	</svg>
 }
diff --git a/views/icons/playlists.templ b/views/icons/playlists.templ
@@ -1,7 +1,7 @@
 package icons
 
 templ Playlist() {
-	<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg class={ "m-1" } width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M27 1.5C27 2.32842 26.3284 3 25.5 3H1.5C0.671581 3 0 2.32842 0 1.5C0 0.671581 0.671581 0 1.5 0H25.5C26.3284 0 27 0.671581 27 1.5Z" fill="var(--secondary-color)"></path>
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M23 9.50002C23 10.3284 22.3284 11 21.5 11H1.5C0.671581 11 0 10.3284 0 9.50002C0 8.6716 0.671581 8.00002 1.5 8.00002H21.5C22.3284 8.00002 23 8.6716 23 9.50002Z" fill="var(--secondary-color)"></path>
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5C15 18.3284 14.3284 19 13.5 19H1.5C0.671581 19 0 18.3284 0 17.5C0 16.6716 0.671581 16 1.5 16H13.5C14.3284 16 15 16.6716 15 17.5Z" fill="var(--secondary-color)"></path>

diff --git a/views/icons/profile.templ b/views/icons/profile.templ
@@ -1,7 +1,7 @@
 package icons
 
 templ Profile() {
-	<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg class={ "m-1" } width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8438 27H5.15726C4.09768 27 3.31523 25.9545 3.71487 24.993C5.56915 20.547 9.9254 18 14.9998 18C20.0757 18 24.432 20.547 26.2862 24.993C26.6859 25.9545 25.9034 27 24.8438 27ZM8.87501 8.99998C8.87501 5.69098 11.6235 2.99998 14.9998 2.99998C18.3776 2.99998 21.1246 5.69098 21.1246 8.99998C21.1246 12.309 18.3776 15 14.9998 15C11.6235 15 8.87501 12.309 8.87501 8.99998ZM29.9335 26.454C28.8204 21.4155 25.3384 17.697 20.7556 16.0095C23.184 14.0939 24.6004 10.9964 24.0798 7.6049C23.4765 3.6704 20.1354 0.521966 16.1023 0.0629653C10.5348 -0.571535 5.81261 3.67348 5.81261 8.99998C5.81261 11.835 7.15394 14.3609 9.24555 16.0095C4.66116 17.697 1.18075 21.4155 0.066036 26.454C-0.3382 28.2855 1.1685 30 3.08096 30H26.9186C28.8326 30 30.3393 28.2855 29.9335 26.454Z" fill="var(--secondary-color)"></path>
 	</svg>
 }
diff --git a/views/layouts/default.templ b/views/layouts/default.templ
@@ -78,6 +78,7 @@ templ Default(children ...templ.Component) {
 			@player.PlayerSticky()
 			//
 			<script src="/static/js/utils.js"></script>
+			<script src="/static/js/router.js"></script>
 			<script type="module">
 			    function registerServiceWorkers() {
 			    	if (!("serviceWorker" in navigator)) {