Toggle left bar in course page

src/components/Course/components/CourseNav.svelte

@@ -1,12 +1,19 @@
 <script>
+  import { onMount } from "svelte";
+  import hotkeys from "hotkeys-js";
+  import ChevronLeft32 from "carbon-icons-svelte/lib/ChevronLeft32";
+  import ChevronRight32 from "carbon-icons-svelte/lib/ChevronRight32";
   import { stores, goto } from "@sapper/app";
   import Expandable from "../../Expandable/index.svelte";
   import PageNav from "../../PageNav/index.svelte";
+  import IconButton from "../../IconButton/index.svelte";
   import { getNavItemRoute, getLectureRoute, getLectureNo } from "../function";
 
   // export let lectureId;
   export let courseId;
 
+  let show = true;
+
   const { page } = stores();
 
   function handleMainGroupClick(href) {
@@ -74,33 +81,63 @@
       hideSortIcon: true,
     },
   ];
+
+  onMount(() => {
+    hotkeys("ctrl+b", function (event, handler) {
+      event.preventDefault();
+      switch (handler.key) {
+        case "ctrl+b":
+          show = !show;
+          break;
+      }
+    });
+  });
 </script>
 
-<div class="root">
+<div class="root z-10 {!show && 'hide'}">
-  <PageNav title="React.JS" />
+  {#if show}
-  <div>
+    <PageNav title="React.JS" />
-    {#each navItems as navItem}
+    <div>
-      <Expandable
+      {#each navItems as navItem}
-        label={navItem.label}
+        <Expandable
-        handleClick={handleMainGroupClick(navItem.to)}
+          label={navItem.label}
-        isGroupActive={$page.path === navItem.to}
+          handleClick={handleMainGroupClick(navItem.to)}
-        hideSortIcon={navItem.hideSortIcon}
+          isGroupActive={$page.path === navItem.to}
-      >
+          hideSortIcon={navItem.hideSortIcon}
-        {#if Array.isArray(navItem.items)}
+        >
-          {#each navItem.items as item, index}
+          {#if Array.isArray(navItem.items)}
-            <a
+            {#each navItem.items as item, index}
-              class="item flex items-center {(item.to === $page.path ||
+              <a
-                !$page.path.length > 3) &&
+                class="item flex items-center {(item.to === $page.path ||
-                'active'} pl-7 py-2"
+                  !$page.path.length > 3) &&
-              href={item.to}
+                  'active'} pl-7 py-2"
-            >
+                href={item.to}
-              <span class="course-counter"> {getLectureNo(index + 1)} </span>
+              >
-              <span>{item.title}</span>
+                <span class="course-counter"> {getLectureNo(index + 1)} </span>
-            </a>
+                <span>{item.title}</span>
-          {/each}
+              </a>
-        {/if}
+            {/each}
-      </Expandable>
+          {/if}
-    {/each}
+        </Expandable>
+      {/each}
+    </div>
+  {/if}
+  <div class="toggler absolute bottom-0 -right-0.5">
+    <IconButton
+      value="toggle"
+      onClick={() => (show = !show)}
+      toolTipProps={{
+        title: "Toggle sidebar",
+        hotkeys: ["Ctrl", "B"],
+        direction: "right",
+      }}
+    >
+      {#if show}
+        <ChevronLeft32 class="carbon-icon" />
+      {:else}
+        <ChevronRight32 class="carbon-icon" />
+      {/if}
+    </IconButton>
   </div>
 </div>
 
@@ -113,7 +150,10 @@
     position: sticky;
     top: 0;
     border-right: 1px solid var(--border-color);
-    overflow: auto;
+
+    &.hide {
+      width: 0px;
+    }
   }
 
   .active {
@@ -136,4 +176,12 @@
       background-color: #cae2f9;
     }
   }
+
+  .toggler {
+    right: -58px;
+    z-index: 10;
+    border: 1px solid var(--border-color);
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+  }
 </style>

src/components/IconButton/index.svelte

@@ -3,11 +3,13 @@
   export let onClick;
   export let disabled = false;
   export let selected = false;
+  export let buttonClassName = "";
   export let contained = false;
   export let value;
   export let toolTipProps = {
     title: "",
     hotkeys: [],
+    direction: "",
   };
 
   function handleClick() {
@@ -15,9 +17,14 @@
   }
 </script>
 
-<ToolTip title={toolTipProps.title} hotkeys={toolTipProps.hotkeys}>
+<ToolTip
+  title={toolTipProps.title}
+  hotkeys={toolTipProps.hotkeys}
+  direction={toolTipProps.direction}
+>
   <button
-    class="root {selected && 'active'} {contained && 'contained'}"
+    class="root {selected && 'active'} {contained &&
+      'contained'} {buttonClassName}"
     {disabled}
     on:click={handleClick}
   >

src/components/ToolTip/index.svelte

@@ -1,11 +1,12 @@
 <script>
   export let title;
   export let hotkeys = [];
+  export let direction;
 </script>
 
 {#if !!title}
   <div class="tooltip">
-    <span class="tooltiptext z-20">
+    <span class="tooltiptext z-20 {direction === 'right' && 'right'}">
       {title}
       {#if Array.isArray(hotkeys) && hotkeys.length}
         <span class="shortcut">
@@ -24,7 +25,10 @@
     position: relative;
     display: inline-block;
   }
-
+  .right {
+    left: 100%;
+    right: unset !important;
+  }
   .tooltip .tooltiptext {
     color: #fff;
     padding: 8px;

src/routes/courses/[...id]/index.svelte

@@ -61,6 +61,6 @@
   }
 
   .rightBar {
-    width: 80%;
+    flex-grow: 1;
   }
 </style>