CLASSROOMIO-T-32: Landing page with editor v1

src/components/Course/components/Navigation/NavExpandable.svelte

@@ -0,0 +1,66 @@
+<script>
+  import CaretSortDown20 from 'carbon-icons-svelte/lib/CaretSortDown20';
+
+  let isExpanded = true;
+  export let handleClick = () => {};
+  export let label = '';
+  export let hideSortIcon = false;
+  export let isGroupActive = false;
+  // export let subMenuItems = [];
+
+  function onClick() {
+    // isExpanded = !isExpanded;
+    handleClick();
+  }
+</script>
+
+<div>
+  <div
+    class="item relative flex items-center {isGroupActive && 'active'}"
+    role="button"
+    tabindex="0"
+    on:click={onClick}
+  >
+    {#if !hideSortIcon}
+      <CaretSortDown20
+        class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
+      />
+    {/if}
+    <span class="font-bold">{label}</span>
+  </div>
+  {#if isExpanded}
+    <div class="flex flex-col">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  :global(svg.carbon-icon-sort) {
+    position: absolute;
+    top: 8px;
+    left: 0;
+  }
+  :global(svg.carbon-icon-minimize) {
+    transform: rotate(270deg);
+    top: 13px;
+    left: -6px;
+  }
+
+  .active {
+    background-color: #cae2f9;
+    border-left: 3px solid var(--main-primary-color);
+  }
+
+  .active span {
+    padding-left: 1.3rem;
+  }
+
+  .item span {
+    padding: 12px 24px;
+  }
+
+  .item:hover {
+    background-color: #cae2f9;
+  }
+</style>

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

@@ -7,7 +7,7 @@
   import Settings20 from 'carbon-icons-svelte/lib/Settings20';
   import ChevronLeft16 from 'carbon-icons-svelte/lib/ChevronLeft16';
   import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
-  import Expandable from '../../../Expandable/index.svelte';
+  import NavExpandable from './NavExpandable.svelte';
   import PageNav from '../../../PageNav/index.svelte';
   import IconButton from '../../../IconButton/index.svelte';
   import Avatar from '../../../Avatar/index.svelte';
@@ -152,7 +152,7 @@
       <div class="navItems">
         {#each navItems as navItem}
           {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
-            <Expandable
+            <NavExpandable
               label={navItem.label}
               handleClick={handleMainGroupClick(navItem.to)}
               isGroupActive={(path || $page.path) === navItem.to}
@@ -190,7 +190,7 @@
                   </a>
                 {/each}
               {/if}
-            </Expandable>
+            </NavExpandable>
           {/if}
         {/each}
       </div>