Redesign course page

src/components/Courses/components/Course.svelte

@@ -1,30 +1,61 @@
 <script>
+  import marked from "marked";
   import Education16 from "carbon-icons-svelte/lib/Education16";
   import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+  import readme from "./readme.js";
 
-  export let lectures = [
+  // export let lectures = [
-    "Today",
+  //   "Today",
-    "Yesterday",
+  //   "Yesterday",
-    "April 24, 2021",
+  //   "April 24, 2021",
-    "April 17, 2021",
+  //   "April 17, 2021",
-    "March 25, 2021",
+  //   "March 25, 2021",
-  ];
+  // ];
 </script>
 
+<div class="course">
+  {@html marked(readme, {
+    breaks: true,
+    gfm: true,
+  })}
+  <!-- {#each lectures as lecture, key}
+    <p class="lesson-date">{lecture}</p>
+    <div class="lecture">
+      <h4 class="lecture-title text-blue-700">
+        <a rel="prefetch" href="courses/1">Lecture {lectures.length - key}</a>
+      </h4>
+      <p>
+        Here is some description about the course that you should know. It will
+        begin on the first and end on the second of the next month.
+      </p>
+      <div class="flex mt-3 mb-2">
+        <span class="flex mr-2"
+          ><Education16 class="mr-2" />
+          5</span
+        >
+        <span class="flex"
+          ><Catalog16 class="mr-2" />
+          20</span
+        >
+      </div>
+    </div>
+  {/each} -->
+</div>
+
 <style>
-  .lesson-date {
+  /* .lesson-date {
     margin: 10px 10px 5px;
     color: #171717;
     font-size: 0.875rem;
     font-weight: 400;
-  }
+  } */
-  .class {
+  .course {
     max-width: 600px;
     margin: 0 auto;
     padding: 0 40px;
   }
 
-  .lecture {
+  /* .lecture {
     border: 1px solid var(--border-color);
     padding: 15px;
     margin-bottom: 20px;
@@ -34,33 +65,11 @@
   .lecture-title {
     width: fit-content;
     font-size: 18px;
-    /* color: var(--main-primary-color); */
   }
 
   span {
     color: #586069;
     font-size: 12px;
     width: 40px;
-  }
+  } */
 </style>
-
-<div class="class">
-  {#each lectures as lecture, key}
-    <p class="lesson-date">{lecture}</p>
-    <div class="lecture">
-      <h4 class="lecture-title text-blue-700">
-        <a rel="prefetch" href="classes/1">Lecture {lectures.length - key}</a>
-      </h4>
-      <p>
-        Here is some description about the course that you should know. It will
-        begin on the first and end on the second of the next month.
-      </p>
-      <div class="flex mt-3 mb-2">
-        <span class="flex mr-2"><Education16 class="mr-2" />
-          5</span>
-        <span class="flex"><Catalog16 class="mr-2" />
-          20</span>
-      </div>
-    </div>
-  {/each}
-</div>

src/components/Courses/components/CourseNav.svelte

@@ -0,0 +1,74 @@
+<script>
+  import { stores } from "@sapper/app";
+  import Expandable from "../../Expandable/index.svelte";
+  import PageNav from "../../PageNav/index.svelte";
+  // export let lectureId;
+  const { page } = stores();
+
+  function handleLecturesClick(goTo) {
+    return () => {
+      console.log("goto", goTo);
+    };
+  }
+
+  const lectures = [
+    {
+      title: "Lecture 1",
+      link: "/courses/1/lecture/1",
+    },
+    {
+      title: "Lecture 2",
+      link: "/courses/1/lecture/2",
+    },
+    {
+      title: "Lecture 3",
+      link: "/courses/1/lecture/3",
+    },
+    {
+      title: "Lecture 4",
+      link: "/courses/1/lecture/4",
+    },
+    {
+      title: "Lecture 5",
+      link: "/courses/1/lecture/5",
+    },
+  ];
+</script>
+
+<div class="root">
+  <PageNav title="React.JS" />
+  <div>
+    <Expandable
+      label="Lectures"
+      handleClick={handleLecturesClick("/courses/1/lecture/1")}
+    >
+      {#each lectures as lecture}
+        <a
+          class="{(lecture.link === $page.path || !$page.path.length > 3) &&
+            'active'} pl-4 py-2"
+          href={lecture.link}
+        >
+          # <span>{lecture.title}</span>
+        </a>
+      {/each}
+    </Expandable>
+  </div>
+</div>
+
+<style>
+  .root {
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    width: 250px;
+    position: sticky;
+    top: 0;
+    border-right: 1px solid var(--border-color);
+    overflow: auto;
+  }
+
+  .active {
+    background-color: #cae2f9;
+    border-left: 3px solid var(--main-primary-color);
+  }
+</style>

src/components/Courses/components/readme.js

@@ -0,0 +1,42 @@
+export default `
+<p align="center">
+  <a href="https://nextjs.org">
+    <img src="https://assets.vercel.com/image/upload/v1607554385/repositories/next-js/next-logo.png" height="128">
+    <h1 align="center">React.js</h1>
+  </a>
+</p>
+
+## Getting Started
+
+Visit <a aria-label="next.js learn" href="https://nextjs.org/learn">https://nextjs.org/learn</a> to get started with Next.js.
+
+## Documentation
+
+Visit [https://nextjs.org/docs](https://nextjs.org/docs) to view the full documentation.
+
+## Who is using Next.js?
+
+Next.js is used by the world's leading companies. Check out the [Next.js Showcase](https://nextjs.org/showcase) to learn more.
+
+## Community
+
+The Next.js community can be found on [GitHub Discussions](https://github.com/vercel/next.js/discussions), where you can ask questions, voice ideas, and share your projects.
+
+To chat with other community members you can join the [Next.js Discord](https://nextjs.org/discord).
+
+Our [Code of Conduct](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md) applies to all Next.js community channels.
+
+## Contributing
+
+Please see our [contributing.md](/contributing.md).
+
+## Authors
+
+- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens)) – [Vercel](https://vercel.com/about/timneutkens)
+- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) – [Vercel](https://vercel.com/about/nkzawa)
+- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) – [Vercel](https://vercel.com/about/rauchg)
+- Arunoda Susiripala ([@arunoda](https://twitter.com/arunoda))
+- Tony Kovanen ([@tonykovanen](https://twitter.com/tonykovanen))
+- Dan Zajdband ([@impronunciable](https://twitter.com/impronunciable))
+
+`

src/components/Courses/index.svelte

@@ -3,7 +3,7 @@
   import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
   import Chip from "../Chip/index.svelte";
 
-  export let classes = [
+  export let courses = [
     {
       chipClassName: "bg-green-600 text-white",
       chipLabel: "In progress",
@@ -15,19 +15,49 @@
   ];
 </script>
 
+<div class="courses">
+  {#each courses as courseData, index}
+    <div class="course">
+      <h4 class="course-title">
+        <a rel="prefetch" href="courses/1"
+          >QA Automation 0{courses.length - index}</a
+        >
+        <Chip
+          value={courseData.chipLabel}
+          className={courseData.chipClassName}
+        />
+      </h4>
+      <p>
+        Here is some description about the course that you should know. It will
+        begin on the first and end on the second of the next month.
+      </p>
+      <div class="flex mt-3 mb-2">
+        <span class="flex mr-2"
+          ><Education16 class="mr-2" />
+          5</span
+        >
+        <span class="flex"
+          ><Catalog16 class="mr-2" />
+          20</span
+        >
+      </div>
+    </div>
+  {/each}
+</div>
+
 <style>
-  .classes {
+  .courses {
     max-width: 600px;
     margin: 0 auto;
     padding: 0 40px;
   }
 
-  .class {
+  .course {
     border-bottom: 1px solid var(--border-color);
     padding: 5px 0 10px;
   }
 
-  .class-title {
+  .course-title {
     width: fit-content;
     font-size: 18px;
   }
@@ -38,24 +68,3 @@
     width: 40px;
   }
 </style>
-
-<div class="classes">
-  {#each classes as classData, index}
-    <div class="class">
-      <h4 class="class-title">
-        <a rel="prefetch" href="classes/1">QA Automation 0{classes.length - index}</a>
-        <Chip value={classData.chipLabel} className={classData.chipClassName} />
-      </h4>
-      <p>
-        Here is some description about the course that you should know. It will
-        begin on the first and end on the second of the next month.
-      </p>
-      <div class="flex mt-3 mb-2">
-        <span class="flex mr-2"><Education16 class="mr-2" />
-          5</span>
-        <span class="flex"><Catalog16 class="mr-2" />
-          20</span>
-      </div>
-    </div>
-  {/each}
-</div>

src/components/Expandable/index.svelte

@@ -0,0 +1,44 @@
+<script>
+  import CaretSortDown20 from "carbon-icons-svelte/lib/CaretSortDown20";
+
+  let isExpanded = true;
+  export let handleClick = () => {};
+  export let label = "";
+
+  function onClick() {
+    isExpanded = !isExpanded;
+    handleClick();
+  }
+</script>
+
+<div>
+  <div
+    class="relative flex items-center"
+    role="button"
+    tabindex="0"
+    on:click={onClick}
+  >
+    <CaretSortDown20
+      class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
+    />
+    <span class="ml-6 mb-2 {isExpanded ? '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: -5px;
+    left: 0;
+  }
+  :global(svg.carbon-icon-minimize) {
+    transform: rotate(270deg);
+    top: 2px;
+    left: -6px;
+  }
+</style>

src/components/LeftNav/index.svelte

@@ -2,6 +2,7 @@
   import NewQuestion from "../NewQuestion/index.svelte";
   import Forum32 from "carbon-icons-svelte/lib/Forum32";
   import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
+  import Catalog32 from "carbon-icons-svelte/lib/Catalog32";
   import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
   import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
   export let segment;
@@ -11,7 +12,7 @@
 </script>
 
 <nav class={navClass}>
-  <ul class="flex items-start flex-col justify-evenly">
+  <ul class="flex items-center flex-col justify-evenly">
     <div class="logo">
       <a href="/" title="Go to univapros Home" id="logo" data-hveid="8"
         ><img
@@ -26,9 +27,8 @@
     <li>
       <a
         class="block"
-        aria-current={segment === "classes" ? "page" : undefined}
+        aria-current={segment === "courses" ? "page" : undefined}
-        href="classes"
+        href="courses"><Catalog32 class="carbon-icon" /> <span>Courses</span></a
-        ><Calendar32 class="carbon-icon" /> <span>Classes</span></a
       >
     </li>
     <li>
@@ -69,21 +69,23 @@
         <SendAlt32 class="carbon-icon" /> <span>Канал</span>
       </a>
     </li>
-    <li class="new-question">
+    <!-- <li class="new-question">
       <NewQuestion />
-    </li>
+    </li> -->
   </ul>
 </nav>
 
 <style>
   nav {
-    height: 100vh;
+    height: 95vh;
     display: flex;
     flex-direction: column;
-    width: 20%;
+    width: fit-content;
     padding-top: 10px;
     position: sticky;
     top: 0;
+    border-right: 1px solid var(--border-color);
+    overflow: auto;
   }
 
   ul {
@@ -98,9 +100,9 @@
     clear: both;
   }
 
-  li.new-question {
+  /* li.new-question {
     margin-top: 10px;
-  }
+  } */
 
   a {
     text-decoration: none;
@@ -108,6 +110,7 @@
     font-weight: 700;
     display: flex;
     align-items: center;
+    flex-direction: column;
   }
 
   :global(svg.carbon-icon) {

src/components/PageNav/index.svelte

@@ -1,10 +1,16 @@
 <script>
   export let title = "";
   export let navItems = [];
+  let dynamicRootClass = "";
+
+  $: dynamicRootClass =
+    Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
 </script>
 
-<div class="header flex justify-between mb-2">
+<div class="header flex justify-between mb-2 {dynamicRootClass}">
-  <h4 class="title">{title}</h4>
+  {#if !!title}
+    <h4 class="title">{title}</h4>
+  {/if}
   {#if Array.isArray(navItems) && navItems.length}
     <div class="flex justify-evenly items-center">
       {#each navItems as item}
@@ -20,6 +26,10 @@
   .header {
     border-bottom: 1px solid var(--border-color);
     padding: 15px;
+    min-height: 61px;
+    position: sticky;
+    top: 0;
+    background-color: #fff;
   }
 
   .title {
@@ -48,6 +58,11 @@
     display: block;
   }
 
+  .header.bring-down {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   @media only screen and (max-width: 1002px) {
     .header {
       flex-direction: column;

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" />
+  <PageNav title="Courses" />
-  <Classes />
+  <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>