Add classes and class pages

src/routes/_layout.svelte

@@ -8,18 +8,6 @@
   export let segment;
 </script>
 
-<Tailwindcss />
-
-<!-- <Nav {segment} /> -->
-
-<main class="flex max-w-screen-xl">
-  <LeftNav {segment} />
-  <slot />
-  <SideBar />
-</main>
-
-<Footer />
-
 <style>
   main {
     background-color: white;
@@ -37,3 +25,15 @@
     --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

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,32 @@
+<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>