From 8361913b28ff92f8f7e9a20235994a5214d721c6 Mon Sep 17 00:00:00 2001
From: emmaroche <20088680@mail.wit.ie>
Date: Wed, 27 Nov 2024 13:23:04 +0000
Subject: [PATCH 1/2] Add border to lab navbar

---
 src/lib/ui/learning-objects/content/Lab.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/ui/learning-objects/content/Lab.svelte b/src/lib/ui/learning-objects/content/Lab.svelte
index abb19599..ca87a7ab 100644
--- 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}

From 95f242e942fa5607491e0bc8fc2bed2f9ab004eb Mon Sep 17 00:00:00 2001
From: emmaroche <20088680@mail.wit.ie>
Date: Wed, 27 Nov 2024 13:26:38 +0000
Subject: [PATCH 2/2] Add active styling to theme menu

---
 src/lib/ui/themes/LayoutMenu.svelte | 6 +++++-
 src/lib/ui/utils/MenuItem.svelte    | 9 +++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte
index b75b293d..c1906799 100644
--- 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
index 3c03d787..6542c818 100644
--- 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>