Merge pull request #867 from emmaroche/ux/theme-updates

implement active theme menu styling and improve lab navbar separation
tutors-sdk · Nov 27, 2024 · 40c31bf · 40c31bf
2 parents 97c7867 + 95f242e
commit 40c31bf
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/lib/ui/learning-objects/content/Lab.svelte b/src/lib/ui/learning-objects/content/Lab.svelte
@@ -57,7 +57,7 @@
 
   <div class="max-w-l flex">
     <div class="mr-2 hidden h-auto w-72 lg:block">
-      <div class="card bg-surface-100 dark:bg-surface-950 sticky top-6 m-2 h-auto rounded-xl py-4">
+      <div class="card bg-surface-100 dark:bg-surface-950 dark:border-primary-500 border-[1px] sticky top-6 m-2 h-auto rounded-xl py-4">
         <nav class="nav-list">
           <ul>
             {@html lab.navbarHtml}

diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte
@@ -6,8 +6,12 @@
   import { layout } from "$lib/runes";
   import MenuItem from "$lib/ui/utils/MenuItem.svelte";
 
+  let selectedTheme = localStorage.getItem("selectedTheme") || "tutors";
+
   function changeTheme(theme: string): void {
     setTheme(theme);
+    selectedTheme = theme;
+    localStorage.setItem("selectedTheme", theme);
   }
 
   function toggleDisplayMode(): void {
@@ -45,7 +49,7 @@
   <h6>Themes</h6>
   <ul class="list">
     {#each themes as theme}
-      <MenuItem type="lightMode" text={theme.name} onClick={() => changeTheme(theme.name)} />
+      <MenuItem type="lightMode" isActive={selectedTheme === theme.name} text={theme.name} onClick={() => changeTheme(theme.name)}/>
     {/each}
   </ul>
 {/snippet}

diff --git a/src/lib/ui/utils/MenuItem.svelte b/src/lib/ui/utils/MenuItem.svelte
@@ -6,18 +6,19 @@
     link?: string;
     targetStr?: string;
     onClick?: () => void;
+    isActive?: boolean; 
   }
-  let { type, link, text, targetStr, onClick }: Props = $props();
+  let { type, link, text, targetStr, onClick, isActive = false}: Props = $props();
 </script>
 
-<li class="option !p-0 hover:preset-tonal">
+<li class="option !p-0">
   {#if link}
-    <a href={link} class="btn flex w-full justify-between" target={targetStr}>
+    <a href={link} class="btn flex w-full justify-between group {isActive ? 'bg-gray-200 dark:bg-gray-700' : 'hover:preset-tonal'}" target={targetStr}>
       <div class="ml-2">{text}</div>
       <Icon {type} />
     </a>
   {:else}
-    <button class="btn flex w-full justify-between" onclick={onClick}>
+    <button class="btn flex w-full justify-between group {isActive ? 'bg-gray-200 dark:bg-gray-700' : 'hover:preset-tonal'}" onclick={onClick}>
       <div class="ml-2">{text}</div>
       <Icon {type} />
     </button>