style: Update styling for app navigation links based on active path

Author: wajeht

src/handler.ts

@@ -63,6 +63,7 @@ export async function getAppPageHandler(req: Request, res: Response) {
 	return res.render('apps-id.html', {
 		app,
 		layout: '../layouts/app.html',
+		path: `/apps/${app.id}`,
 	});
 }
 
@@ -75,6 +76,7 @@ export async function getAppChannelsPageHandler(req: Request, res: Response) {
 	return res.render('apps-id-channels.html', {
 		app,
 		layout: '../layouts/app.html',
+		path: `/apps/${app.id}/channels`,
 	});
 }
 
@@ -87,6 +89,7 @@ export async function getAppNotificationsPageHandler(req: Request, res: Response
 	return res.render('apps-id-notifications.html', {
 		app,
 		layout: '../layouts/app.html',
+		path: `/apps/${app.id}/notifications`,
 	});
 }
 

src/views/layouts/app.html

@@ -17,9 +17,9 @@ <h2 class="font-medium text-2xl">Apps / <%= app.id %></h2>
 
 						<aside>
 							<ul class="menu bg-base-100 rounded-lg p-5">
-								<li><a href="/apps/<%= app.id %>">App</a></li>
-								<li><a href="/apps/<%= app.id %>/channels">Channels</a></li>
-								<li><a href="/apps/<%= app.id %>/notifications">Notifications</a></li>
+									<li><a class="<%= path === `/apps/${app.id}` ? 'active' : '' %>" href="/apps/<%= app.id %>">App</a></li>
+									<li><a class="<%= /\/apps\/.*\/channels/.test(path) ? 'active' : '' %>" href="/apps/<%= app.id %>/channels">Channels</a></li>
+									<li><a class="<%= /\/apps\/.*\/notifications/.test(path) ? 'active' : '' %>" href="/apps/<%= app.id %>/notifications">Notifications</a></li>
 							</ul>
 						</aside>