Store last viewed org in local storage for better UX

src/lib/components/Courses/components/Card/index.svelte

@@ -48,9 +48,13 @@
   // }
 </script>
 
-<a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
+<a
+  rel="prefetch"
+  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
+  class=" text-black w-fit"
+>
   <div
-    class="border border-gray w-full max-w-[400px] relative hover:shadow-lg transition-all ease-in-out"
+    class="border border-gray w-full max-w-[350px] relative hover:shadow-lg transition-all ease-in-out"
   >
     <div class="p-4">
       <div class=" mb-5">

src/lib/components/LMS/SideBar.svelte

@@ -53,8 +53,8 @@
 <aside
   class={`${
     $menu.hidden
-      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
-      : 'translate-x-0 absolute md:relative z-[9999]'
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
+      : 'translate-x-0 absolute md:relative z-40'
   } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-[calc(100vh-48px)]`}
 >
   <div class="h-full flex flex-col">

src/lib/components/Org/SideBar.svelte

@@ -61,8 +61,8 @@
 <aside
   class={`${
     $menu.hidden
-      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
-      : 'translate-x-0 absolute md:relative z-[9999]'
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
+      : 'translate-x-0 absolute md:relative z-40'
   } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="h-full flex flex-col">

src/lib/components/OrgSelector/OrgSelector.svelte

@@ -5,15 +5,22 @@
   import { currentOrg, orgs, currentOrgPath } from '$lib/utils/store/org';
   import { goto } from '$app/navigation';
   import { newOrgModal } from '$lib/components/Org/store';
+  import type { CurrentOrg } from '$lib/utils/types/org';
 
   export let canAddOrg = true;
   let open = false;
 
   function handleAddOrg() {
-    console.log('add org modal');
     open = false;
     $newOrgModal.open = true;
   }
+
+  function onClick(org: CurrentOrg) {
+    localStorage.setItem('classroomio_org_sitename', org.siteName);
+    currentOrg.set(org);
+    goto($currentOrgPath);
+    open = false;
+  }
 </script>
 
 <div class="mt-5 relative" data-outline>
@@ -45,11 +52,7 @@
           avatarText={org.shortName}
           text={org.name}
           hasDivider={true}
-          onClick={() => {
-            currentOrg.set(org);
-            goto($currentOrgPath);
-            open = false;
-          }}
+          onClick={() => onClick(org)}
         />
       {/each}
 

src/lib/components/OrgSelector/OrgSelectorItem.svelte

@@ -15,7 +15,7 @@
 
 <div class="relative">
   <button
-    class="{disabled && 'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
+    class="{disabled && 'opacity-25'} flex items-center w-[14rem] py-2 px-3 {hasDivider &&
       'border-b border-gray-100'} {active && 'bg-primary-100 dark:bg-gray-500'}"
     on:click={onClick}
   >

src/lib/utils/services/org/index.js

@@ -91,15 +91,25 @@ export async function getOrganizations(userId) {
 
     orgs.set(orgsArray);
 
-    const _cOrg = get(currentOrg);
-    if (!_cOrg.siteName) {
+    if (localStorage) {
+      const lastOrgSiteName = localStorage.getItem('classroomio_org_sitename');
+
+      const lastOrg = orgsArray.find((org) => org.siteName === lastOrgSiteName);
+
+      if (lastOrg) {
+        currentOrg.set(lastOrg);
+      }
+    }
+
+    const _currentOrg = get(currentOrg);
+    if (!_currentOrg.siteName) {
       currentOrg.set(orgsArray[0]);
     }
   }
 
   return {
     orgs: orgsArray,
-    currentOrg: orgsArray[0],
+    currentOrg: get(currentOrg),
     error
   };
 }