Redesign course page

src/routes/_layout.svelte

@@ -8,11 +8,23 @@
   export let segment;
 </script>
 
+<Tailwindcss />
+
+<!-- <Nav {segment} /> -->
+
+<main class="flex">
+  <LeftNav {segment} />
+  <slot />
+  <!-- <SideBar /> -->
+</main>
+
+<Footer />
+
 <style>
   main {
     background-color: white;
     /* padding: 15px 2em; */
-    margin: 0 auto;
+    /* margin: 0 auto; */
     box-sizing: border-box;
     /* max-width: 900px; */
   }
@@ -25,15 +37,3 @@
     --border-color: #eaecef;
   }
 </style>
-
-<Tailwindcss />
-
-<!-- <Nav {segment} /> -->
-
-<main class="flex max-w-screen-xl">
-  <LeftNav {segment} />
-  <slot />
-  <SideBar />
-</main>
-
-<Footer />

src/routes/classes/[id].svelte

@@ -1,31 +0,0 @@
-<script>
-  import { stores } from "@sapper/app";
-  import PageNav from "../../components/PageNav/index.svelte";
-  import Class from "../../components/Classes/Class.svelte";
-
-  const { page } = stores();
-  const path = $page.path;
-  let tab = "";
-
-  $: tab = $page.query.tab || "lectures";
-</script>
-
-<style>
-  .root {
-    min-width: 600px;
-    margin: 0 auto;
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-  }
-</style>
-
-<svelte:head>
-  <title>QA Automation</title>
-</svelte:head>
-
-<div class="root">
-  <PageNav
-    title="QA Automation"
-    navItems={[{ label: 'Lectures', isActive: tab === 'lectures', href: `${path}?tab=lectures` }, { label: 'Class work', isActive: tab === 'classwork', href: `${path}?tab=classwork` }, { label: 'Hometasks', isActive: tab === 'hometasks', href: `${path}?tab=hometasks` }]} />
-  <Class />
-</div>

src/routes/classes[id].svelte

@@ -1,32 +0,0 @@
-<script>
-  import { stores } from "@sapper/app";
-  import PageNav from "../components/PageNav/index.svelte";
-  import Class from "../components/Classes/Class.svelte";
-
-  const { page } = stores();
-  let path = "";
-  let discussions = [];
-
-  $: path = $page.path || "lectures";
-  console.log($page.path);
-</script>
-
-<style>
-  .root {
-    min-width: 600px;
-    margin: 0 auto;
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-  }
-</style>
-
-<svelte:head>
-  <title>QA Automation</title>
-</svelte:head>
-
-<div class="root">
-  <PageNav
-    title="QA Automation"
-    navItems={[{ label: 'Lectures', isActive: path.includes('lectures'), href: `${path}lectures` }, { label: 'Class work', isActive: path.includes('classwork'), href: `${path}classwork` }, { label: 'Hometasks', isActive: path.includes('hometasks'), href: `${path}hometasks` }]} />
-  <Class />
-</div>

src/routes/courses.svelte

@@ -1,7 +1,7 @@
 <script>
-  import PageNav from "../components/PageNav/index.svelte";
-  import Classes from "../components/Classes/index.svelte";
   import { stores } from "@sapper/app";
+  import PageNav from "../components/PageNav/index.svelte";
+  import Courses from "../components/Courses/index.svelte";
 
   const { page } = stores();
   let tab = "";
@@ -10,12 +10,12 @@
 </script>
 
 <svelte:head>
-  <title>Classes</title>
+  <title>Courses</title>
 </svelte:head>
 
 <div class="root">
-  <PageNav title="Classes" />
-  <Classes />
+  <PageNav title="Courses" />
+  <Courses />
 </div>
 
 <style>

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

@@ -0,0 +1,67 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [slug, lecture, lectureId] = params.id;
+
+    return { slug, lecture, lectureId };
+  }
+</script>
+
+<script>
+  import { stores } from "@sapper/app";
+  import PageNav from "../../components/PageNav/index.svelte";
+  import Course from "../../components/Courses/components/Course.svelte";
+  import CourseNav from "../../components/Courses/components/CourseNav.svelte";
+
+  export let slug;
+  export let lecture;
+  export let lectureId;
+  console.log("slug", slug);
+  console.log("lecture", lecture);
+  console.log("lectureId", lectureId);
+
+  const { page } = stores();
+  const path = $page.path;
+  let tab = "";
+
+  $: tab = $page.query.tab || "lectures";
+</script>
+
+<svelte:head>
+  <title>QA Automation</title>
+</svelte:head>
+
+<div class="root">
+  <CourseNav />
+  <div>
+    <PageNav
+      navItems={[
+        {
+          label: "README.md",
+          isActive: tab === "lectures",
+          href: `${path}?tab=lectures`,
+        },
+        {
+          label: "Class work",
+          isActive: tab === "classwork",
+          href: `${path}?tab=classwork`,
+        },
+        {
+          label: "Hometasks",
+          isActive: tab === "hometasks",
+          href: `${path}?tab=hometasks`,
+        },
+      ]}
+    />
+    <Course />
+  </div>
+</div>
+
+<style>
+  .root {
+    /* min-width: 600px;
+    margin: 0 auto; */
+    flex-grow: 1;
+    display: flex;
+    border-right: 1px solid var(--border-color);
+  }
+</style>