Set active state color

src/lib/components/studio/sidebarOrganization.svelte

@@ -1,10 +1,40 @@
 <script lang="ts">
     import { ActionMenu, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { base } from '$app/paths';
+    import { page } from '$app/state';
     import type { Organization } from '$lib/stores/organization';
 
-    export let organization: Organization;
-    export let isOpen = false;
+    let { organization, isOpen = false }: { organization: Organization; isOpen: boolean } =
+        $props();
+
+    let menuItems = $derived.by(() => {
+        const items = [
+            {
+                path: `${base}/organization-${organization.$id}`,
+                label: 'Projects'
+            },
+            {
+                path: `${base}/organization-${organization.$id}/members`,
+                label: 'Members'
+            },
+            {
+                path: `${base}/organization-${organization.$id}/usage`,
+                label: 'Usage'
+            },
+            {
+                path: `${base}/organization-${organization.$id}/billing`,
+                label: 'Billing'
+            },
+            {
+                path: `${base}/organization-${organization.$id}/settings`,
+                label: 'Settings'
+            }
+        ];
+        console.log(page.url.pathname);
+        return items.map((item) => {
+            return { ...item, isActive: page.url.pathname === item.path };
+        });
+    });
 </script>
 
 <nav class:isOpen>
@@ -12,16 +42,15 @@
         <Typography.Text color="--fgcolor-neutral-tertiary">{organization.name}</Typography.Text>
 
         <Layout.Stack gap="xs">
-            <ActionMenu.Item.Anchor href={`${base}/organization-${organization.$id}`}
-                >Projects</ActionMenu.Item.Anchor>
-            <ActionMenu.Item.Anchor href={`${base}/organization-${organization.$id}/members`}
-                >Members</ActionMenu.Item.Anchor>
-            <ActionMenu.Item.Anchor href={`${base}/organization-${organization.$id}/usage`}
-                >Usage</ActionMenu.Item.Anchor>
-            <ActionMenu.Item.Anchor href={`${base}/organization-${organization.$id}/billing`}
-                >Billing</ActionMenu.Item.Anchor>
-            <ActionMenu.Item.Anchor href={`${base}/organization-${organization.$id}/settings`}
-                >Settings</ActionMenu.Item.Anchor>
+            {#each menuItems as menuItem}
+                {#if menuItem.isActive}
+                    <ActionMenu.Item.Anchor class="navigation-item-active" href={menuItem.path}
+                        >{menuItem.label}</ActionMenu.Item.Anchor>
+                {:else}
+                    <ActionMenu.Item.Anchor href={menuItem.path}
+                        >{menuItem.label}</ActionMenu.Item.Anchor>
+                {/if}
+            {/each}
         </Layout.Stack>
     </Layout.Stack>
 </nav>
@@ -43,4 +72,8 @@
     .isOpen {
         transform: translateX(0);
     }
+
+    :global(.navigation-item-active) {
+        background-color: var(--overlay-neutral-hover);
+    }
 </style>