Add course side nav with page navigation

src/routes/ask.svelte

@@ -33,7 +33,7 @@
   <title>Спросить собшество вопрос</title>
 </svelte:head>
 
-<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
+<div class="root lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
   <h2 class="pb-2">Спросить собшество вопрос</h2>
   <div class="main-title my-1 flex">
     <div class="faculty-filter mr-1">
@@ -85,6 +85,10 @@
 </div>
 
 <style>
+  .root {
+    max-width: 600px;
+    margin: 10px auto 0;
+  }
   @media only screen and (max-width: 1002px) {
     .faculty-filter {
       margin-bottom: 10px;

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

@@ -1,65 +1,57 @@
 <script context="module">
   export async function preload({ params }) {
-    let [slug, lecture, lectureId] = params.id;
+    let [slug, courseNavItem, lectureId] = params.id;
 
-    return { slug, lecture, lectureId };
+    return { slug, courseNavItem, 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";
+  import Lecture from "../../components/Course/components/Lecture/index.svelte";
+  import HomeTask from "../../components/Course/components/HomeTask.svelte";
+  import Overview from "../../components/Course/index.svelte";
+  import People from "../../components/Course/components/People.svelte";
+  import Scoreboard from "../../components/Course/components/Scoreboard.svelte";
+  import TimeTable from "../../components/Course/components/TimeTable.svelte";
+  import CourseNav from "../../components/Course/components/CourseNav.svelte";
 
   export let slug;
-  export let lecture;
+  export let courseNavItem;
   export let lectureId;
   console.log("slug", slug);
-  console.log("lecture", lecture);
+  console.log("courseNavItem", courseNavItem);
   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>
+  <title>ReactJS</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>
+  {#if !courseNavItem}
+    <Overview />
+  {:else if courseNavItem === "score"}
+    <Scoreboard />
+  {:else if courseNavItem === "timetable"}
+    <TimeTable />
+  {:else if courseNavItem === "hometasks"}
+    <HomeTask />
+  {:else if courseNavItem === "lecture"}
+    <Lecture path={$page.path} {tab} />
+  {:else if courseNavItem === "people"}
+    <People />
+  {/if}
 </div>
 
 <style>
   .root {
-    /* min-width: 600px;
-    margin: 0 auto; */
     flex-grow: 1;
     display: flex;
     border-right: 1px solid var(--border-color);

src/routes/discussion/[id].svelte

@@ -94,6 +94,7 @@
 
 <style>
   .root {
-    margin: 15px 5px;
+    margin: 15px auto 5px;
+    max-width: 800px;
   }
 </style>

src/routes/index.svelte

@@ -152,7 +152,9 @@
 </svelte:head>
 <div class="root md:w-3/4 mx-auto md:mb-20">
   <PageNav
-    title="Разговоры 😉😁"
+    title="Talks"
+    addButtonHref="/ask"
+    addButtonLabel="New"
     navItems={[
       {
         label: "Popular",