Add classes list page

src/components/Classes/Class.svelte

@@ -0,0 +1,8 @@
+<script>
+  export let classData = {};
+</script>
+
+<div class="class" />
+
+<style>
+</style>

src/components/Classes/index.svelte

@@ -0,0 +1,48 @@
+<script>
+  import Education16 from "carbon-icons-svelte/lib/Education16";
+  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+
+  export let classes = [1, 2, 3, 4, 5, 6, 7];
+</script>
+
+<div class="classes">
+  {#each classes as classData}
+    <div class="class">
+      <h4 class="class-title">
+        <a rel="prefetch" href="classes/1">React.JS 001</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>
+  .classes {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 40px;
+  }
+
+  .class {
+    border-bottom: 1px solid var(--border-color);
+    padding: 5px 0 10px;
+  }
+
+  .class-title {
+    width: fit-content;
+    font-size: 18px;
+  }
+
+  span {
+    color: #586069;
+    font-size: 12px;
+    width: 40px;
+  }
+</style>

src/components/LeftNav/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import NewQuestion from "../NewQuestion/index.svelte";
-  import Home32 from "carbon-icons-svelte/lib/Home32";
+  import Forum32 from "carbon-icons-svelte/lib/Forum32";
   import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
   import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
   import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
@@ -23,13 +23,21 @@
         /></a
       >
     </div>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === "classes" ? "page" : undefined}
+        href="classes"
+        ><Calendar32 class="carbon-icon" /> <span>Classes</span></a
+      >
+    </li>
     <li>
       <a
         class="block"
         aria-current={segment === undefined || segment === "discussion"
           ? "page"
           : undefined}
-        href="."><Home32 class="carbon-icon" /><span>Home</span></a
+        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
       >
     </li>
     <li>
@@ -40,14 +48,6 @@
         ><UserAvatar32 class="carbon-icon" /> <span>Профиль</span></a
       >
     </li>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === "timetable" ? "page" : undefined}
-        href="timetable"
-        ><Calendar32 class="carbon-icon" /> <span>Расписание</span></a
-      >
-    </li>
     <li>
       <a
         class="flex items-center"
@@ -115,11 +115,11 @@
   }
 
   [aria-current] :global(svg.carbon-icon) {
-    fill: #3182ce;
+    fill: var(--main-primary-color);
   }
 
   [aria-current] {
-    color: #3182ce;
+    color: var(--main-primary-color);
   }
 
   @media only screen and (max-width: 1002px) {

src/components/Nav/index.svelte

@@ -90,7 +90,7 @@
     content: "";
     width: calc(100% - 1em);
     height: 2px;
-    background-color: #3182ce;
+    background-color: var(--main-primary-color);
     display: block;
     bottom: -1px;
   }

src/components/PageNav/index.svelte

@@ -0,0 +1,57 @@
+<script>
+  export let title = "";
+  export let navItems = [];
+</script>
+
+<div class="header flex justify-between mb-2">
+  <h4 class="title">{title}</h4>
+  {#if Array.isArray(navItems) && navItems.length}
+    <div class="flex justify-evenly items-center">
+      {#each navItems as item}
+        <a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
+          {item.label}
+        </a>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 15px;
+  }
+
+  .title {
+    font-size: 20px;
+  }
+
+  h4 {
+    font-size: 16px;
+    font-weight: 900;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    margin: 0;
+  }
+
+  .active {
+    position: relative;
+    display: inline-block;
+  }
+
+  .active::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 3px;
+    background-color: var(--main-primary-color);
+    display: block;
+  }
+
+  @media only screen and (max-width: 1002px) {
+    .header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+</style>