CLASSROOMIO-T-97: Better course UX 😍😍

src/lib/components/Course/components/Navigation/index.svelte

@@ -172,7 +172,7 @@
           </RoleBasedSecurity>
         </slot:fragment>
       </PageNav> -->
-      <div class="h-[90%] mt-5 overflow-y-auto">
+      <div class="h-full mt-2 overflow-y-auto">
         {#each navItems as navItem}
           {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
             <NavExpandable
@@ -211,6 +211,7 @@
                         shape="rounded-full"
                       />
                       <span>{item.title}</span>
+                      <span class="grow" />
                       {#if !item.is_unlocked}
                         <span class="text-md ml-2" title="This lesson is locked.">
                           <LockedIcon class="carbon-icon dark:text-white" />

src/lib/components/Icons/CourseIcon.svelte

@@ -1,3 +1,7 @@
+<script>
+  export let fill = '#7A797D';
+</script>
+
 <svg
   width="24"
   height="24"
@@ -8,6 +12,6 @@
 >
   <path
     d="M18 22.5H6C5.60232 22.4995 5.22105 22.3414 4.93984 22.0602C4.65864 21.7789 4.50046 21.3977 4.5 21V3C4.5004 2.6023 4.65856 2.221 4.93978 1.93978C5.221 1.65856 5.6023 1.5004 6 1.5H18C18.3977 1.50046 18.779 1.65864 19.0602 1.93984C19.3414 2.22105 19.4995 2.60232 19.5 3V15.4636L15.75 13.5886L12 15.4636V3H6V21H18V18H19.5V21C19.4995 21.3977 19.3413 21.7789 19.0601 22.0601C18.7789 22.3413 18.3977 22.4995 18 22.5ZM15.75 11.9114L18 13.0364V3H13.5V13.0364L15.75 11.9114Z"
-    fill="#7A797D"
+    {fill}
   />
 </svg>

src/lib/components/Navigation/app.svelte

@@ -4,11 +4,14 @@
   import NotificationIcon from 'carbon-icons-svelte/lib/Notification.svelte';
   import Moon from 'carbon-icons-svelte/lib/Moon.svelte';
   import Sun from 'carbon-icons-svelte/lib/Sun.svelte';
+  import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
 
   import IconButton from '$lib/components/IconButton/index.svelte';
+  import { course } from '$lib/components/Course/store';
   import { appStore } from '$lib/utils/store/app';
   import { currentOrgPath } from '$lib/utils/store/org';
   import { toggleBodyByTheme } from '$lib/utils/functions/app';
+  import { goto } from '$app/navigation';
 
   export let title = '';
   export let navClass = '';
@@ -24,23 +27,34 @@
     }
   }
 
-  function getPathName(_isCoursePage) {
+  function getPathName(_isCoursePage = false) {
     if (!_isCoursePage) {
-      return $currentOrgPath ?? '/';
+      return '/';
     }
 
-    return $currentOrgPath ? `${$currentOrgPath}/courses` : '';
+    return $course.slug ? `${$page.url.host}/course/${$course.slug}` : `${$currentOrgPath}/courses`;
   }
 </script>
 
 <nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
   <ul class="flex w-full items-center">
-    <div class="">
+    <div class="flex items-center text-white">
+      {#if isCoursePage}
+        <IconButton
+          onClick={() => {
+            goto(`${$currentOrgPath}/courses`);
+          }}
+          size="small"
+        >
+          <CourseIcon fill="#fff" />
+        </IconButton>
+      {/if}
       <a
         href={getPathName(isCoursePage)}
+        target={isCoursePage && $course.slug ? '_blank' : ''}
         title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
         id="logo"
-        class="text-lg"
+        class="text-lg {isCoursePage && 'ml-2'}"
       >
         {isCoursePage ? title : 'ClassroomIO'}
       </a>

src/lib/components/PageBody/index.svelte

@@ -19,7 +19,7 @@
 <style>
   .root {
     overflow-y: auto;
-    height: 90vh;
+    height: calc(100vh - 127px);
   }
   .head {
     top: 0px;