Sidebar activestates

src/lib/Sidebar.svelte

@@ -2,8 +2,11 @@
 	import UserStore from '$lib/UserStore';
 	import { onDestroy } from 'svelte';
 	import Apiclient from './Apiclient';
+	import { page } from '$app/stores';
 
 	$: logged_in = false;
+	$: currentPage = $page.path;
+	console.log(currentPage)
 
 	const unsubscribe = UserStore.subscribe((value) => {
 		logged_in = value.isLoggedIn;
@@ -21,7 +24,6 @@
 	class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600"
 >
 	<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">LinkyLinky</h2>
-
 	<div class="relative mt-6">
 		<span class="absolute inset-y-0 left-0 flex items-center pl-3">
 			<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
@@ -45,7 +47,9 @@
 	<div class="flex flex-col justify-between flex-1 mt-6">
 		<nav>
 			<a
-				class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200"
+				class="flex items-center px-4 py-2 text-gray-700 rounded-md dark:text-gray-200"
+				class:dark:bg-gray-700={currentPage == '/'}
+				class:bg-gray-200={currentPage == '/'}
 				href="./"
 			>
 				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -66,6 +70,8 @@
 			{#if logged_in}
 				<a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
+					class:dark:bg-gray-700={currentPage == '/links'}
+					class:bg-gray-200={currentPage == '/links'}
 					href="./links"
 				>
 					<svg
@@ -87,6 +93,8 @@
 				</a>
 				<a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
+					class:dark:bg-gray-700={currentPage == '/visits'}
+					class:bg-gray-200={currentPage == '/visits'}
 					href="./visits"
 				>
 					<svg
@@ -115,6 +123,8 @@
 
 				<!-- <a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
+					class:dark:bg-gray-700={currentPage=="/"}
+				class:bg-gray-200={currentPage=="/"}
 					href="#"
 				>
 					<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -160,6 +170,8 @@
 			{:else}
 				<a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
+					class:dark:bg-gray-700={currentPage == '/login'}
+					class:bg-gray-200={currentPage == '/login'}
 					href="./login"
 				>
 					<svg