CLASSROOMIO-T-5: Educators Settings CRUD

Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-7
Merged-by: Digdippa Team <digdippa@gmail.com>

src/components/Org/SideBar.svelte

@@ -1,6 +1,5 @@
 <script>
   import { stores } from '@sapper/app';
-  import UserAvatar from 'carbon-icons-svelte/lib/UserAvatar20';
   import Help from 'carbon-icons-svelte/lib/Help20';
 
   import TextChip from '../../components/Chip/Text.svelte';
@@ -9,7 +8,9 @@
   import CourseIcon from '../../components/Icons/CourseIcon.svelte';
   import SiteSettingsIcon from '../../components/Icons/SiteSettingsIcon.svelte';
   import AudienceIcon from '../../components/Icons/AudienceIcon.svelte';
+  import Avatar from '../../components/Avatar/index.svelte';
   import { currentOrg } from '../../utils/store/org';
+  import { profile } from '../../utils/store/user';
 
   let orgSiteName = '';
   let activeClass = 'bg-gray-200';
@@ -32,10 +33,20 @@
 <aside class="root bg-gray-100 h-full">
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
-      <TextChip
-        value={$currentOrg.shortName}
-        className="bg-blue-200 font-bold"
-      />
+      {#if $currentOrg.avatar_url}
+        <Avatar
+          src={$currentOrg.avatar_url}
+          name={$currentOrg.name}
+          shape="rounded-md"
+          width="w-7"
+          height="h-7"
+        />
+      {:else}
+        <TextChip
+          value={$currentOrg.shortName}
+          className="bg-blue-200 font-bold"
+        />
+      {/if}
 
       <OrgSelector />
 
@@ -101,7 +112,12 @@
             `/org/${orgSiteName}/settings`
           ) && activeClass}"
         >
-          <UserAvatar />
+          <Avatar
+            src={$profile.avatar_url}
+            name={$profile.username}
+            width="w-7"
+            height="h-7"
+          />
           <p class="ml-2">Settings</p>
         </li>
       </a>