From 026be1911fd758b00f5421715e80ec213b9d2c80 Mon Sep 17 00:00:00 2001
From: Ibitoye Rotimi Best <best.rotimi@ikizmet.com>
Date: Sat, 8 May 2021 11:47:18 +0300
Subject: [PATCH] Add course side nav with page navigation

---
 package-lock.json                             | 746 ++++++++++--------
 package.json                                  |   3 +-
 src/components/Chip/index.svelte              |   8 +-
 .../Course/components/CourseNav.svelte        | 108 +++
 .../Course/components/HomeTask.svelte         |  13 +
 .../components/Lecture/Classwork.svelte       |   1 +
 .../Course/components/Lecture/Homework.svelte |   1 +
 .../Course/components/Lecture/Readme.svelte   |  20 +
 .../Course/components/Lecture/index.svelte    |  51 ++
 .../Course/components/People.svelte           |  13 +
 .../Course/components/Scoreboard.svelte       |  13 +
 .../Course/components/TimeTable.svelte        |  13 +
 .../{Courses => Course}/components/readme.js  |   0
 src/components/Course/index.svelte            |  38 +
 .../Courses/components/Course.svelte          |  75 --
 .../Courses/components/CourseNav.svelte       |  74 --
 src/components/Expandable/index.svelte        |  37 +-
 src/components/LeftNav/index.svelte           |   1 -
 .../{NewQuestion => NewButton}/index.svelte   |  15 +-
 src/components/PageNav/index.svelte           |   8 +-
 src/components/PrimaryButton/index.svelte     |  10 +
 src/components/Tailwindcss.svelte             |   8 +-
 src/components/TextEditor/index.svelte        | 118 +--
 src/components/UserCard/index.svelte          |  28 +
 src/routes/ask.svelte                         |   6 +-
 src/routes/courses/[...id].svelte             |  58 +-
 src/routes/discussion/[id].svelte             |   3 +-
 src/routes/index.svelte                       |   4 +-
 tailwind.config.js                            |   5 +-
 29 files changed, 884 insertions(+), 594 deletions(-)
 create mode 100644 src/components/Course/components/CourseNav.svelte
 create mode 100644 src/components/Course/components/HomeTask.svelte
 create mode 100644 src/components/Course/components/Lecture/Classwork.svelte
 create mode 100644 src/components/Course/components/Lecture/Homework.svelte
 create mode 100644 src/components/Course/components/Lecture/Readme.svelte
 create mode 100644 src/components/Course/components/Lecture/index.svelte
 create mode 100644 src/components/Course/components/People.svelte
 create mode 100644 src/components/Course/components/Scoreboard.svelte
 create mode 100644 src/components/Course/components/TimeTable.svelte
 rename src/components/{Courses => Course}/components/readme.js (100%)
 create mode 100644 src/components/Course/index.svelte
 delete mode 100644 src/components/Courses/components/Course.svelte
 delete mode 100644 src/components/Courses/components/CourseNav.svelte
 rename src/components/{NewQuestion => NewButton}/index.svelte (54%)
 create mode 100644 src/components/PrimaryButton/index.svelte
 create mode 100644 src/components/UserCard/index.svelte

diff --git a/package-lock.json b/package-lock.json
index 9f0acd15..19815ce5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1043,41 +1043,38 @@
       }
     },
     "@fullhuman/postcss-purgecss": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
-      "integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
+      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
       "dev": true,
       "requires": {
-        "postcss": "7.0.32",
-        "purgecss": "^2.3.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "purgecss": "^3.1.3"
+      }
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
       }
     },
     "@polka/url": {
@@ -1146,6 +1143,14 @@
         "picomatch": "^2.2.2"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.2.tgz",
+      "integrity": "sha512-aj2/rJsGb2whAZ/BQWHWWQRSbhH0r/l1ozOByiv+ZNjBD84GMvb5dhAyfpeasFky+EJrAwX5eaqft8NQMZFWvA==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@tailwindcss/typography": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.3.1.tgz",
@@ -1229,6 +1234,16 @@
         "color-convert": "^1.9.0"
       }
     },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -1238,48 +1253,11 @@
         "sprintf-js": "~1.0.2"
       }
     },
-    "autoprefixer": {
-      "version": "9.8.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
-      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.12.0",
-        "caniuse-lite": "^1.0.30001109",
-        "colorette": "^1.2.1",
-        "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
-        "postcss": "^7.0.32",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
     },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
@@ -1296,6 +1274,12 @@
       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1306,6 +1290,15 @@
         "concat-map": "0.0.1"
       }
     },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
     "browserslist": {
       "version": "4.16.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
@@ -1409,6 +1402,31 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chokidar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      },
+      "dependencies": {
+        "fsevents": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -1452,9 +1470,9 @@
       "dev": true
     },
     "color-string": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
-      "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz",
+      "integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==",
       "dev": true,
       "requires": {
         "color-name": "^1.0.0",
@@ -1610,6 +1628,18 @@
         "minimist": "^1.1.1"
       }
     },
+    "didyoumean": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
+      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
+      "dev": true
+    },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.3.633",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz",
@@ -1655,15 +1685,48 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
-    "fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+    "fast-glob": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
       "dev": true,
       "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
+    "fastq": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
+      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
       }
     },
     "fs.realpath": {
@@ -1716,6 +1779,51 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "dev": true,
+      "requires": {
+        "glob-parent": "^2.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+          "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+          "dev": true,
+          "requires": {
+            "is-glob": "^2.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -1723,9 +1831,9 @@
       "dev": true
     },
     "graceful-fs": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
       "dev": true
     },
     "has": {
@@ -1810,12 +1918,6 @@
         "resolve-from": "^3.0.0"
       }
     },
-    "indexes-of": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
-      "dev": true
-    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -1838,6 +1940,15 @@
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-core-module": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
@@ -1853,12 +1964,39 @@
       "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
       "dev": true
     },
+    "is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
       "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
       "dev": true
     },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
     "is-reference": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
@@ -1934,12 +2072,13 @@
       }
     },
     "jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dev": true,
       "requires": {
-        "graceful-fs": "^4.1.6"
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
       }
     },
     "lodash": {
@@ -1954,6 +2093,12 @@
       "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
       "dev": true
     },
+    "lodash.topath": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
+      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
+      "dev": true
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -1980,6 +2125,30 @@
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "dev": true
     },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      },
+      "dependencies": {
+        "picomatch": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
+          "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
+          "dev": true
+        }
+      }
+    },
     "mime": {
       "version": "2.4.7",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.7.tgz",
@@ -2004,6 +2173,11 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
+    "mini-svg-data-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
+      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -2019,6 +2193,12 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
+    "modern-normalize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
+      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
+      "dev": true
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -2059,22 +2239,10 @@
       "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
       "dev": true
     },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
-    },
-    "normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
-      "dev": true
-    },
-    "num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
     "object-assign": {
@@ -2130,6 +2298,35 @@
         "no-case": "^2.2.0"
       }
     },
+    "parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "dev": true,
+      "requires": {
+        "glob-base": "^0.3.0",
+        "is-dotfile": "^1.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -2224,41 +2421,13 @@
       }
     },
     "postcss-js": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
-      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
+      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
       "dev": true,
       "requires": {
         "camelcase-css": "^2.0.1",
-        "postcss": "^7.0.18"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "postcss": "^8.1.6"
       }
     },
     "postcss-load-config": {
@@ -2272,52 +2441,21 @@
       }
     },
     "postcss-nested": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
-      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
+      "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.32",
-        "postcss-selector-parser": "^6.0.2"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "postcss-selector-parser": "^6.0.4"
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
-      "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz",
+      "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
-        "indexes-of": "^1.0.1",
-        "uniq": "^1.0.1",
         "util-deprecate": "^1.0.2"
       }
     },
@@ -2334,51 +2472,37 @@
       "dev": true
     },
     "purgecss": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
-      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
+      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
       "dev": true,
       "requires": {
-        "commander": "^5.0.0",
+        "commander": "^6.0.0",
         "glob": "^7.0.0",
-        "postcss": "7.0.32",
+        "postcss": "^8.2.1",
         "postcss-selector-parser": "^6.0.2"
       },
       "dependencies": {
         "commander": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
           "dev": true
-        },
-        "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
         }
       }
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -2388,10 +2512,19 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "reduce-css-calc": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
-      "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
       "dev": true,
       "requires": {
         "css-unit-converter": "^1.1.1",
@@ -2506,6 +2639,12 @@
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
       "dev": true
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
     "rollup": {
       "version": "2.35.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz",
@@ -2555,6 +2694,15 @@
         }
       }
     },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -2709,33 +2857,38 @@
       }
     },
     "tailwindcss": {
-      "version": "1.9.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.6.tgz",
-      "integrity": "sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.1.2.tgz",
+      "integrity": "sha512-T5t+wwd+/hsOyRw2HJuFuv0LTUm3MUdHm2DJ94GPVgzqwPPFa9XxX0KlwLWupUuiOUj6uiKURCzYPHFcuPch/w==",
       "dev": true,
       "requires": {
-        "@fullhuman/postcss-purgecss": "^2.1.2",
-        "autoprefixer": "^9.4.5",
-        "browserslist": "^4.12.0",
+        "@fullhuman/postcss-purgecss": "^3.1.3",
         "bytes": "^3.0.0",
-        "chalk": "^3.0.0 || ^4.0.0",
-        "color": "^3.1.2",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.5.1",
+        "color": "^3.1.3",
         "detective": "^5.2.0",
-        "fs-extra": "^8.0.0",
+        "didyoumean": "^1.2.1",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.5",
+        "fs-extra": "^9.1.0",
         "html-tags": "^3.1.0",
-        "lodash": "^4.17.20",
+        "lodash": "^4.17.21",
+        "lodash.topath": "^4.5.2",
+        "modern-normalize": "^1.0.0",
         "node-emoji": "^1.8.1",
-        "normalize.css": "^8.0.1",
-        "object-hash": "^2.0.3",
-        "postcss": "^7.0.11",
-        "postcss-functions": "^3.0.0",
-        "postcss-js": "^2.0.0",
-        "postcss-nested": "^4.1.1",
-        "postcss-selector-parser": "^6.0.0",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^2.1.1",
+        "parse-glob": "^3.0.4",
+        "postcss-functions": "^3",
+        "postcss-js": "^3.0.3",
+        "postcss-nested": "5.0.5",
+        "postcss-selector-parser": "^6.0.4",
         "postcss-value-parser": "^4.1.0",
         "pretty-hrtime": "^1.0.3",
-        "reduce-css-calc": "^2.1.6",
-        "resolve": "^1.14.2"
+        "quick-lru": "^5.1.1",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.20.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -2748,9 +2901,9 @@
           }
         },
         "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -2778,86 +2931,22 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
           "dev": true,
           "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "3.2.1",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-              "dev": true,
-              "requires": {
-                "color-convert": "^1.9.0"
-              }
-            },
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "dev": true,
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              },
-              "dependencies": {
-                "supports-color": {
-                  "version": "5.5.0",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-                  "dev": true,
-                  "requires": {
-                    "has-flag": "^3.0.0"
-                  }
-                }
-              }
-            },
-            "color-convert": {
-              "version": "1.9.3",
-              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-              "dev": true,
-              "requires": {
-                "color-name": "1.1.3"
-              }
-            },
-            "color-name": {
-              "version": "1.1.3",
-              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-              "dev": true
-            },
-            "has-flag": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-              "dev": true
-            },
-            "supports-color": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
           }
         },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2894,6 +2983,15 @@
       "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
       "dev": true
     },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
     "totalist": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
@@ -2947,16 +3045,10 @@
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
       "dev": true
     },
-    "uniq": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
-      "dev": true
-    },
     "universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
       "dev": true
     },
     "upper-case": {
diff --git a/package.json b/package.json
index ab045f25..3f0a8a0a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "start": "node __sapper__/build"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.3.2",
     "compression": "^1.7.1",
     "marked": "^1.2.7",
     "polka": "next",
@@ -34,7 +35,7 @@
     "sapper": "^0.28.0",
     "svelte": "^3.17.3",
     "svelte-preprocess": "^4.3.0",
-    "tailwindcss": "^1.8.10",
+    "tailwindcss": "^2.1.2",
     "typescript": "^4.1.3"
   }
 }
diff --git a/src/components/Chip/index.svelte b/src/components/Chip/index.svelte
index d555bd8e..5bb0c0f3 100644
--- a/src/components/Chip/index.svelte
+++ b/src/components/Chip/index.svelte
@@ -3,6 +3,8 @@
   export let className;
 </script>
 
+<p class={className ? className : "bg-set"}>{value}</p>
+
 <style>
   p {
     display: inline-block;
@@ -18,9 +20,7 @@
   }
 
   .bg-set {
-    /* color: #586069;
-    background-color: #d1d5da80; */
+    color: #586069;
+    background-color: #d1d5da80;
   }
 </style>
-
-<p class="{className} bg-set">{value}</p>
diff --git a/src/components/Course/components/CourseNav.svelte b/src/components/Course/components/CourseNav.svelte
new file mode 100644
index 00000000..ba64ddfd
--- /dev/null
+++ b/src/components/Course/components/CourseNav.svelte
@@ -0,0 +1,108 @@
+<script>
+  import { stores, goto } from "@sapper/app";
+  import Expandable from "../../Expandable/index.svelte";
+  import PageNav from "../../PageNav/index.svelte";
+  // export let lectureId;
+  const { page } = stores();
+
+  function handleMainGroupClick(href) {
+    return () => {
+      console.log("goto", href);
+      goto(href);
+    };
+  }
+
+  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="Overview"
+      handleClick={handleMainGroupClick("/courses/1")}
+      isGroupActive={$page.path === "/courses/1"}
+      hideSortIcon
+    />
+    <Expandable label="Lectures">
+      {#each lectures as lecture}
+        <a
+          class="item {(lecture.link === $page.path ||
+            !$page.path.length > 3) &&
+            'active'} pl-7 py-2"
+          href={lecture.link}
+        >
+          # <span>{lecture.title}</span>
+        </a>
+      {/each}
+    </Expandable>
+    <Expandable
+      label="People"
+      handleClick={handleMainGroupClick("/courses/1/people")}
+      isGroupActive={$page.path === "/courses/1/people"}
+      hideSortIcon
+    />
+    <Expandable
+      label="Timetable"
+      handleClick={handleMainGroupClick("/courses/1/timetable")}
+      isGroupActive={$page.path === "/courses/1/timetable"}
+      hideSortIcon
+    />
+    <Expandable
+      label="Scoreboard"
+      handleClick={handleMainGroupClick("/courses/1/score")}
+      isGroupActive={$page.path === "/courses/1/score"}
+      hideSortIcon
+    />
+    <Expandable
+      label="Home tasks"
+      handleClick={handleMainGroupClick("/courses/1/hometasks")}
+      isGroupActive={$page.path === "/courses/1/hometasks"}
+      hideSortIcon
+    />
+  </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);
+    padding-left: 0.85rem;
+  }
+
+  .item:hover {
+    background-color: #cae2f9;
+  }
+</style>
diff --git a/src/components/Course/components/HomeTask.svelte b/src/components/Course/components/HomeTask.svelte
new file mode 100644
index 00000000..6913aa0b
--- /dev/null
+++ b/src/components/Course/components/HomeTask.svelte
@@ -0,0 +1,13 @@
+<script>
+  import PageNav from "../../PageNav/index.svelte";
+</script>
+
+<div class="root">
+  <PageNav title="Home tasks" />
+</div>
+
+<style>
+  .root {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/Course/components/Lecture/Classwork.svelte b/src/components/Course/components/Lecture/Classwork.svelte
new file mode 100644
index 00000000..6405a849
--- /dev/null
+++ b/src/components/Course/components/Lecture/Classwork.svelte
@@ -0,0 +1 @@
+<div>class work</div>
diff --git a/src/components/Course/components/Lecture/Homework.svelte b/src/components/Course/components/Lecture/Homework.svelte
new file mode 100644
index 00000000..f5cce8a3
--- /dev/null
+++ b/src/components/Course/components/Lecture/Homework.svelte
@@ -0,0 +1 @@
+<div>Home workl</div>
diff --git a/src/components/Course/components/Lecture/Readme.svelte b/src/components/Course/components/Lecture/Readme.svelte
new file mode 100644
index 00000000..7c404a8f
--- /dev/null
+++ b/src/components/Course/components/Lecture/Readme.svelte
@@ -0,0 +1,20 @@
+<script>
+  import marked from "marked";
+  import readme from "../readme.js";
+</script>
+
+<!-- {@html marked(readme, {
+  breaks: true,
+  gfm: true,
+})} -->
+
+<iframe
+  title="Lecture"
+  src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
+  frameborder="0"
+  width="960"
+  height="569"
+  allowfullscreen="true"
+  mozallowfullscreen="true"
+  webkitallowfullscreen="true"
+/>
diff --git a/src/components/Course/components/Lecture/index.svelte b/src/components/Course/components/Lecture/index.svelte
new file mode 100644
index 00000000..152c6a66
--- /dev/null
+++ b/src/components/Course/components/Lecture/index.svelte
@@ -0,0 +1,51 @@
+<script>
+  import PageNav from "../../../PageNav/index.svelte";
+  import Classwork from "./Classwork.svelte";
+  import Homework from "./Homework.svelte";
+  import Readme from "./Readme.svelte";
+
+  export let path;
+  export let tab;
+
+  $: console.log("path", path);
+</script>
+
+<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`,
+      },
+    ]}
+  />
+
+  <div class="course">
+    {#if tab === "lectures"}
+      <Readme />
+    {:else if tab === "classwork"}
+      <Classwork />
+    {:else if tab === "hometasks"}
+      <Homework />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .course {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 40px;
+  }
+</style>
diff --git a/src/components/Course/components/People.svelte b/src/components/Course/components/People.svelte
new file mode 100644
index 00000000..5571393d
--- /dev/null
+++ b/src/components/Course/components/People.svelte
@@ -0,0 +1,13 @@
+<script>
+  import PageNav from "../../PageNav/index.svelte";
+</script>
+
+<div class="root">
+  <PageNav title="People" />
+</div>
+
+<style>
+  .root {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/Course/components/Scoreboard.svelte b/src/components/Course/components/Scoreboard.svelte
new file mode 100644
index 00000000..28d1078a
--- /dev/null
+++ b/src/components/Course/components/Scoreboard.svelte
@@ -0,0 +1,13 @@
+<script>
+  import PageNav from "../../PageNav/index.svelte";
+</script>
+
+<div class="root">
+  <PageNav title="Scoreboard" />
+</div>
+
+<style>
+  .root {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/Course/components/TimeTable.svelte b/src/components/Course/components/TimeTable.svelte
new file mode 100644
index 00000000..80b30a0b
--- /dev/null
+++ b/src/components/Course/components/TimeTable.svelte
@@ -0,0 +1,13 @@
+<script>
+  import PageNav from "../../PageNav/index.svelte";
+</script>
+
+<div class="root">
+  <PageNav title="Time table" />
+</div>
+
+<style>
+  .root {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/Courses/components/readme.js b/src/components/Course/components/readme.js
similarity index 100%
rename from src/components/Courses/components/readme.js
rename to src/components/Course/components/readme.js
diff --git a/src/components/Course/index.svelte b/src/components/Course/index.svelte
new file mode 100644
index 00000000..258c7b37
--- /dev/null
+++ b/src/components/Course/index.svelte
@@ -0,0 +1,38 @@
+<script>
+  import marked from "marked";
+  import PageNav from "../PageNav/index.svelte";
+
+  const readme = `
+# Introduction
+ Welcome to this course, we are glad you made it here
+
+ ## What you'l learn
+
+      1. Build powerful, fast, user-friendly and reactive web apps.
+      2. Provide amazing user experiences by leveraging the power of JavaScript with ease.
+      3. Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now.
+      4. Learn all about React Hooks and React Components.
+`;
+</script>
+
+<div class="root">
+  <PageNav title="Overview" />
+
+  <div class="body">
+    {@html marked(readme, {
+      breaks: true,
+      gfm: true,
+    })}
+  </div>
+</div>
+
+<style>
+  .root {
+    width: 100%;
+  }
+
+  .body {
+    max-width: 600px;
+    margin: 10px;
+  }
+</style>
diff --git a/src/components/Courses/components/Course.svelte b/src/components/Courses/components/Course.svelte
deleted file mode 100644
index 509f149e..00000000
--- a/src/components/Courses/components/Course.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<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 = [
-  //   "Today",
-  //   "Yesterday",
-  //   "April 24, 2021",
-  //   "April 17, 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 {
-    margin: 10px 10px 5px;
-    color: #171717;
-    font-size: 0.875rem;
-    font-weight: 400;
-  } */
-  .course {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 0 40px;
-  }
-
-  /* .lecture {
-    border: 1px solid var(--border-color);
-    padding: 15px;
-    margin-bottom: 20px;
-    border-radius: 6px;
-  }
-
-  .lecture-title {
-    width: fit-content;
-    font-size: 18px;
-  }
-
-  span {
-    color: #586069;
-    font-size: 12px;
-    width: 40px;
-  } */
-</style>
diff --git a/src/components/Courses/components/CourseNav.svelte b/src/components/Courses/components/CourseNav.svelte
deleted file mode 100644
index 9b2a9905..00000000
--- a/src/components/Courses/components/CourseNav.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<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>
diff --git a/src/components/Expandable/index.svelte b/src/components/Expandable/index.svelte
index e89b8277..b09aed26 100644
--- a/src/components/Expandable/index.svelte
+++ b/src/components/Expandable/index.svelte
@@ -4,6 +4,9 @@
   let isExpanded = true;
   export let handleClick = () => {};
   export let label = "";
+  export let hideSortIcon = false;
+  export let isGroupActive = false;
+  // export let subMenuItems = [];
 
   function onClick() {
     isExpanded = !isExpanded;
@@ -13,18 +16,25 @@
 
 <div>
   <div
-    class="relative flex items-center"
+    class="item relative flex items-center {isGroupActive && 'active'}"
     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>
+    {#if !hideSortIcon}
+      <CaretSortDown20
+        class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
+      />
+    {/if}
+    <span class="pl-6 py-2 font-bold">{label}</span>
   </div>
   {#if isExpanded}
     <div class="flex flex-col">
+      <!-- {#each subMenuItems as item}
+        <a class="item {item.isActive && 'active'} pl-6 py-2" href={item.link}>
+          # <span>{item.title}</span>
+        </a>
+      {/each} -->
       <slot />
     </div>
   {/if}
@@ -33,12 +43,25 @@
 <style>
   :global(svg.carbon-icon-sort) {
     position: absolute;
-    top: -5px;
+    top: 3px;
     left: 0;
   }
   :global(svg.carbon-icon-minimize) {
     transform: rotate(270deg);
-    top: 2px;
+    top: 10px;
     left: -6px;
   }
+
+  .active {
+    background-color: #cae2f9;
+    border-left: 3px solid var(--main-primary-color);
+  }
+
+  .active span {
+    padding-left: 1.3rem;
+  }
+
+  .item:hover {
+    background-color: #cae2f9;
+  }
 </style>
diff --git a/src/components/LeftNav/index.svelte b/src/components/LeftNav/index.svelte
index e5122fac..a01c2bff 100644
--- a/src/components/LeftNav/index.svelte
+++ b/src/components/LeftNav/index.svelte
@@ -1,5 +1,4 @@
 <script>
-  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";
diff --git a/src/components/NewQuestion/index.svelte b/src/components/NewButton/index.svelte
similarity index 54%
rename from src/components/NewQuestion/index.svelte
rename to src/components/NewButton/index.svelte
index 68fe84d6..b9152e09 100644
--- a/src/components/NewQuestion/index.svelte
+++ b/src/components/NewButton/index.svelte
@@ -1,13 +1,15 @@
 <script>
-  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+  import AddAlt32 from "carbon-icons-svelte/lib/AddAlt32";
+  export let href;
+  export let label = "";
 </script>
 
 <a
-  class="root bg-blue-700 hover:bg-blue-900 text-white font-bold py-3 px-8 rounded inline-flex items-center float-right"
-  href="/ask"
+  class="root bg-blue-700 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded inline-flex items-center float-right"
+  {href}
 >
-  <AddComment20 class="carbon-icon fill-current w-4 h-4 mr-2" />
-  <span>Спросить</span>
+  <AddAlt32 class="carbon-icon fill-current w-4 h-4 mr-1" />
+  {label}
 </a>
 
 <style>
@@ -20,9 +22,6 @@
     a {
       padding: 10px 15px;
     }
-    a span {
-      display: none;
-    }
 
     a :global(svg.carbon-icon) {
       margin-right: 0;
diff --git a/src/components/PageNav/index.svelte b/src/components/PageNav/index.svelte
index 71c2793f..dc295d2b 100644
--- a/src/components/PageNav/index.svelte
+++ b/src/components/PageNav/index.svelte
@@ -1,13 +1,16 @@
 <script>
+  import NewButton from "../NewButton/index.svelte";
   export let title = "";
   export let navItems = [];
+  export let addButtonHref;
+  export let addButtonLabel;
   let dynamicRootClass = "";
 
   $: dynamicRootClass =
     Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
 </script>
 
-<div class="header flex justify-between mb-2 {dynamicRootClass}">
+<div class="header flex items-center justify-between mb-2 {dynamicRootClass}">
   {#if !!title}
     <h4 class="title">{title}</h4>
   {/if}
@@ -18,6 +21,9 @@
           {item.label}
         </a>
       {/each}
+      {#if addButtonHref}
+        <NewButton href={addButtonHref} label={addButtonLabel} />
+      {/if}
     </div>
   {/if}
 </div>
diff --git a/src/components/PrimaryButton/index.svelte b/src/components/PrimaryButton/index.svelte
new file mode 100644
index 00000000..16c3800b
--- /dev/null
+++ b/src/components/PrimaryButton/index.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let label;
+  export let className = "";
+</script>
+
+<button
+  class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded {className}"
+>
+  {label}
+</button>
diff --git a/src/components/Tailwindcss.svelte b/src/components/Tailwindcss.svelte
index e1caaebd..d2cf3c3b 100644
--- a/src/components/Tailwindcss.svelte
+++ b/src/components/Tailwindcss.svelte
@@ -3,8 +3,14 @@
   @tailwind components;
   @tailwind utilities;
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-size: revert;
     font-weight: revert;
+    margin: 0.8em 0;
   }
 </style>
diff --git a/src/components/TextEditor/index.svelte b/src/components/TextEditor/index.svelte
index cd451680..22512455 100644
--- a/src/components/TextEditor/index.svelte
+++ b/src/components/TextEditor/index.svelte
@@ -1,16 +1,71 @@
 <script>
-  import marked from 'marked';
+  import marked from "marked";
+  import PrimaryButton from "../PrimaryButton/index.svelte";
 
   let isWriteMode = true;
   export let value = ``;
   export let placeholder = ``;
-  const activeClassName = 'border-b-2 border-blue-700';;
+  const activeClassName = "border-b-2 border-blue-700";
 
-  const handleTabClick = tab => event => {
-    isWriteMode = tab === 1
-  }
+  const handleTabClick = (tab) => (event) => {
+    isWriteMode = tab === 1;
+  };
 </script>
 
+<div class="root mt-5 border border-gray rounded-md">
+  <div class="p-2 pb-0">
+    <button
+      on:click={handleTabClick(1)}
+      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
+    >
+      Write
+    </button>
+    <button
+      on:click={handleTabClick(2)}
+      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
+    >
+      Preview
+    </button>
+  </div>
+
+  <div class="m-2 mb-0 p-0">
+    {#if isWriteMode}
+      <textarea
+        bind:value
+        {placeholder}
+        class="border border-gray rounded-md p-2"
+      />
+    {:else}
+      <article class="preview prose prose-sm sm:prose p-2">
+        {@html marked(value)}
+      </article>
+    {/if}
+  </div>
+  {#if !isWriteMode}
+    <hr />
+  {/if}
+  <div class="flex justify-between items-center px-2 pb-1">
+    <div class="flex items-center text-sm">
+      <svg
+        class="octicon mr-2"
+        height="16"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
+        />
+      </svg>
+      <span>Styling with Markdown is supported</span>
+    </div>
+
+    <PrimaryButton label="Answer" />
+  </div>
+</div>
+
 <style>
   .root {
     width: 100%;
@@ -32,56 +87,3 @@
     fill: currentColor;
   }
 </style>
-
-<div class="root mt-5 border border-gray rounded-md">
-  <div class="p-2 pb-0">
-    <button
-      on:click={handleTabClick(1)}
-      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
-    >
-      Write
-    </button>
-    <button
-      on:click={handleTabClick(2)}
-      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
-    >
-      Preview
-    </button>
-  </div>
-
-  <div class="m-2 mb-0 p-0">
-    {#if isWriteMode}
-      <textarea
-        bind:value
-        placeholder="{placeholder}"
-        class="border border-gray rounded-md p-2"
-      ></textarea>
-    {:else}
-      <article class="preview prose prose-sm sm:prose p-2">
-        {@html marked(value)}
-      </article>
-    {/if}
-  </div>
-  {#if !isWriteMode}
-    <hr>
-  {/if}
-  <div class="flex justify-between items-center px-2 pb-1">
-    <div class="flex items-center text-sm">
-      <svg
-        class="octicon mr-2"
-        height="16"
-        viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        aria-hidden="true"
-      >
-        <path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
-      </svg>
-      <span>Styling with Markdown is supported</span>
-    </div>
-
-    <button class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded">
-      Answer
-    </button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/components/UserCard/index.svelte b/src/components/UserCard/index.svelte
new file mode 100644
index 00000000..76f1d75f
--- /dev/null
+++ b/src/components/UserCard/index.svelte
@@ -0,0 +1,28 @@
+<script>
+</script>
+
+<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
+  <img
+    class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
+    src="https://tailwindcss.com/sarah-dayan.jpg"
+    alt=""
+    width="384"
+    height="512"
+  />
+  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
+    <blockquote>
+      <p class="text-lg font-semibold">
+        “Tailwind CSS is the only framework that I've seen scale on large teams.
+        It’s easy to customize, adapts to any design, and the build size is
+        tiny.”
+      </p>
+    </blockquote>
+    <figcaption class="font-medium">
+      <div class="text-cyan-600">Sarah Dayan</div>
+      <div class="text-gray-500">Staff Engineer, Algolia</div>
+    </figcaption>
+  </div>
+</figure>
+
+<style>
+</style>
diff --git a/src/routes/ask.svelte b/src/routes/ask.svelte
index b38fcfb1..9b51d14a 100644
--- a/src/routes/ask.svelte
+++ b/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;
diff --git a/src/routes/courses/[...id].svelte b/src/routes/courses/[...id].svelte
index f12e28d7..0a28021b 100644
--- a/src/routes/courses/[...id].svelte
+++ b/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);
diff --git a/src/routes/discussion/[id].svelte b/src/routes/discussion/[id].svelte
index f899a986..505d4b26 100644
--- a/src/routes/discussion/[id].svelte
+++ b/src/routes/discussion/[id].svelte
@@ -94,6 +94,7 @@
 
 <style>
   .root {
-    margin: 15px 5px;
+    margin: 15px auto 5px;
+    max-width: 800px;
   }
 </style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 1f4987bf..65ffaec1 100644
--- a/src/routes/index.svelte
+++ b/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",
diff --git a/tailwind.config.js b/tailwind.config.js
index 71309e32..dbc56dcf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,5 +12,8 @@ module.exports = {
     extend: {}
   },
   variants: {},
-  plugins: [require("@tailwindcss/typography")]
+  plugins: [
+    require("@tailwindcss/typography"),
+    require('@tailwindcss/forms')
+  ]
 };