CLASSROOMIO-T-144:Made the dashboard responsive

Co-authored-by: Ifeanyi Nwosu <[email protected]>


Merge-request: CLASSROOMIO-MR-65
Merged-by: Best Admin <[email protected]>

src/lib/components/Navigation/app.svelte

@@ -5,6 +5,8 @@
   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 Menu from 'carbon-icons-svelte/lib/Menu.svelte';
+  import Close from 'carbon-icons-svelte/lib/Close.svelte';
 
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { course } from '$lib/components/Course/store';
@@ -12,11 +14,16 @@
   import { currentOrgPath } from '$lib/utils/store/org';
   import { toggleBodyByTheme } from '$lib/utils/functions/app';
   import { goto } from '$app/navigation';
+  import { menu } from '../Org/store';
 
   export let title = '';
   export let navClass = '';
   export let isCoursePage = false;
 
+  const toggleSidebar = () => {
+    $menu.hidden = !$menu.hidden;
+  };
+
   function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
@@ -41,6 +48,15 @@
 >
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
+      <li>
+        <IconButton onClick={toggleSidebar}>
+          {#if $menu.hidden}
+            <Menu size={16} class="md:hidden text-white" />
+          {:else}
+            <Close size={16} class="md:hidden text-white" />
+          {/if}
+        </IconButton>
+      </li>
       {#if isCoursePage}
         <IconButton
           onClick={() => {
@@ -76,6 +92,7 @@
         {/if}
       </IconButton>
     </li>
+
     <li />
   </ul>
 </nav>

src/lib/components/Org/SideBar.svelte

@@ -14,6 +14,7 @@
   import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
+  import { menu } from './store';
 
   const menuItems = [
     {
@@ -55,7 +56,11 @@
 </script>
 
 <aside
-  class="w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1"
+  class={` ${
+    $menu.hidden
+      ? '-translate-x-[100%] top-[48px] md:top-0 absolute md:translate-x-0 md:relative '
+      : 'translate-x-0 absolute md:relative top-[48px] md:top-0'
+  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800   h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">

src/lib/components/Org/store.js

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export const menu = writable({
+  hidden: true
+});