active state for sidebar items

MuckRock · Apr 11, 2024 · 6c90648 · 6c90648
1 parent 6483d04
commit 6c90648
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  export let active = false;
   export let disabled = false;
   export let small = false;
   export let hover = false;
@@ -16,6 +17,7 @@
     {rel}
     {download}
     class="container"
+    class:active
     class:disabled
     class:small
     on:click
@@ -24,7 +26,7 @@
     <slot />
   </a>
 {:else}
-  <span class="container" class:hover class:disabled class:small>
+  <span class="container" class:active class:hover class:disabled class:small>
     <slot />
   </span>
 {/if}
@@ -74,6 +76,10 @@
     background: transparent;
   }
 
+  .container.active {
+    background-color: var(--blue-2, #b5ceed);
+  }
+
   /* Small */
   .container.small {
     font-size: var(--font-s, 0.875rem);

diff --git a/src/lib/components/sidebar/stories/SidebarItem.stories.svelte b/src/lib/components/sidebar/stories/SidebarItem.stories.svelte
@@ -31,6 +31,12 @@
   </SidebarItem>
 </Story>
 
+<Story name="Active">
+  <SidebarItem active>
+    <Home16 /> Go Home
+  </SidebarItem>
+</Story>
+
 <Story name="Hover">
   <SidebarItem hover>
     <Home16 /> Go Home

diff --git a/src/routes/app/sidebar/Documents.svelte b/src/routes/app/sidebar/Documents.svelte
@@ -5,6 +5,7 @@
   import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
   import { Globe16, Infinity16, Lock16, Organization16 } from "svelte-octicons";
+  import { page } from "$app/stores";
 
   import Flex from "$lib/components/common/Flex.svelte";
   import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
@@ -16,6 +17,8 @@
   const me: Writable<User> = getContext("me");
   const org: Writable<Org> = getContext("org");
 
+  $: query = $page.url.searchParams.get("q") || "";
+
   // +user:chris-amico-1020 +access:public
   $: mine = $me ? `+user:${slugify($me.name)}-${$me.id}` : "";
   $: minePublic = `${mine} +access:public`;
@@ -35,17 +38,23 @@
 </script>
 
 <Flex direction="column">
-  <SidebarItem hover href={searchUrl("")}
+  <SidebarItem hover href={searchUrl("")} active={query === ""}
     ><Infinity16 /> {$_("projects.allDocuments")}</SidebarItem
   >
   <SignedIn>
-    <SidebarItem hover href={searchUrl(minePublic)}
+    <SidebarItem
+      hover
+      href={searchUrl(minePublic)}
+      active={query === minePublic}
       ><Globe16 /> {$_("projects.yourPubDocuments")}</SidebarItem
     >
-    <SidebarItem hover href={searchUrl(minePrivate)}
+    <SidebarItem
+      hover
+      href={searchUrl(minePrivate)}
+      active={query === minePrivate}
       ><Lock16 /> {$_("projects.yourDocuments")}</SidebarItem
     >
-    <SidebarItem hover href={searchUrl(orgDocs)}>
+    <SidebarItem hover href={searchUrl(orgDocs)} active={query === orgDocs}>
       <Organization16 />
       {$_("projects.orgDocuments", {
         values: { name: "MuckRock" },