Move nav from left to top

src/components/Avatar/index.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let name;
+  export let src;
+  export let className;
+</script>
+
+<img
+  alt={name}
+  {src}
+  class="w-10 h-10 rounded-full bg-light-blue-100 {className}"
+/>

src/components/Nav/index.svelte

@@ -1,102 +0,0 @@
-<script>
-  import Space from "../Space/index.svelte";
-  import NewQuestion from "../NewQuestion/index.svelte";
-  export let segment;
-</script>
-
-<nav>
-  <ul>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === undefined || segment === "discussion"
-          ? "page"
-          : undefined}
-        href=".">ClassroomIO</a
-      >
-    </li>
-  </ul>
-  <Space />
-  <ul class="flex items-center">
-    <li>
-      <NewQuestion />
-    </li>
-    <li>
-      <a
-        class="flex items-center"
-        href="https://t.me/classroomio"
-        target="_blank"
-      >
-        <img
-          alt="File:Telegram logo.svg"
-          class="mr-1"
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
-          decoding="async"
-          width="25"
-          height="25"
-          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
-          data-file-width="25"
-          data-file-height="25"
-        />
-        <span>Канал</span>
-      </a>
-    </li>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === "profile" ? "page" : undefined}
-        href="profile">Войти</a
-      >
-    </li>
-  </ul>
-</nav>
-
-<style>
-  nav {
-    border-bottom: 1px solid rgba(255, 62, 0, 0.1);
-    font-weight: 300;
-    padding: 0 1em;
-    display: flex;
-    position: sticky;
-    top: 0px;
-    background-color: #fff;
-    z-index: 1;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  /* clearfix */
-  ul::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
-  li {
-    display: block;
-    float: left;
-  }
-
-  [aria-current] {
-    position: relative;
-    display: inline-block;
-  }
-
-  [aria-current]::after {
-    position: absolute;
-    content: "";
-    width: calc(100% - 1em);
-    height: 2px;
-    background-color: var(--main-primary-color);
-    display: block;
-    bottom: -1px;
-  }
-
-  a {
-    text-decoration: none;
-    padding: 1em 0.5em;
-  }
-</style>

src/components/Navigation/index.svelte

@@ -1,62 +1,77 @@
 <script>
-  import Forum32 from 'carbon-icons-svelte/lib/Forum32';
+  import Avatar from '../Avatar/index.svelte';
-  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;
   let navClass = '';
 
+  let user = {
+    avatar:
+      'https://pbs.twimg.com/profile_images/1416443682157473795/dGtFbtht_normal.jpg',
+    label: 'Elon',
+  };
+
   $: navClass = ['discussion'].includes(segment) ? 'hide' : '';
 </script>
 
-<nav class={navClass}>
+<nav
-  <ul class="flex items-center flex-col justify-evenly">
+  class="{navClass} flex w-full p-2 border-t-0 border-r-0 border-b border-l-0 border-gray-300"
+>
+  <ul class="flex w-full items-center">
     <div class="logo">
-      <a href="/" title="Go to ClassroomIO Home" id="logo" data-hveid="8"
+      <a href="/" title="Go to ClassroomIO Home" id="logo" data-hveid="8">
-        ><img
+        <img
           src="/logo-192.png"
           alt="ClassroomIO logo"
-          height="70"
+          class="rounded h-10 w-10 inline-block mx-auto"
-          width="70"
           data-atf="1"
-        /></a
+        />
-      >
+      </a>
     </div>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === undefined ? 'page' : undefined}
+        href="."
+      >
+        Dashboard
+      </a>
+    </li>
     <li>
       <a
         class="block"
         aria-current={segment === 'courses' ? 'page' : undefined}
         href="courses"
-        ><Catalog32 class="carbon-icon" />
-        <span>Courses</span></a
       >
+        Courses
+      </a>
     </li>
     <li>
       <a
         class="block"
-        aria-current={segment === undefined || segment === 'discussion'
+        aria-current={segment === 'discussions' || segment === 'discussion'
           ? 'page'
           : undefined}
-        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
+        href="discussions"
       >
+        Discussion
+      </a>
     </li>
     <li>
       <a
         class="block"
         aria-current={segment === 'profile' ? 'page' : undefined}
         href="profile"
-        ><UserAvatar32 class="carbon-icon" />
+        >People
-        <span>People</span></a
+      </a>
-      >
     </li>
-    <li class="hidden">
+    <span class="flex-grow" />
+    <Avatar src={user.avatar} name={user.label} className="mr-2" />
+    <!-- <li class="hidden">
       <a
         class="flex items-center"
         href="https://t.me/classroomio"
         target="_blank"
       >
-        <!-- <img
+        <img
           alt="File:Telegram logo.svg"
           class="mr-1"
           src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
@@ -66,12 +81,12 @@
           srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
           data-file-width="25"
           data-file-height="25"
-        /> -->
+        />
-        <!-- <span><SendAlt32 class="carbon-icon" /> Канал</span> -->
+        <span><SendAlt32 class="carbon-icon" /> Канал</span>
         <SendAlt32 class="carbon-icon" />
         <span>Канал</span>
       </a>
-    </li>
+    </li> -->
     <!-- <li class="new-question">
       <NewQuestion />
     </li> -->
@@ -79,16 +94,6 @@
 </nav>
 
 <style>
-  nav {
-    height: 90vh;
-    display: flex;
-    flex-direction: column;
-    width: 100px;
-    position: sticky;
-    top: 0;
-    border-right: 1px solid var(--border-color);
-  }
-
   ul {
     margin: 0 auto;
     padding: 0;
@@ -107,7 +112,7 @@
 
   a {
     text-decoration: none;
-    padding: 1em 0.5em;
+    padding: 0 1.5em;
     font-weight: 700;
     display: flex;
     align-items: center;
@@ -116,6 +121,17 @@
 
   [aria-current] {
     color: var(--main-primary-color);
+    position: relative;
+    display: inline-block;
+  }
+  [aria-current]::after {
+    position: absolute;
+    content: '';
+    width: calc(100% - 3em);
+    height: 2px;
+    background-color: var(--main-primary-color);
+    display: block;
+    bottom: -17px;
   }
 
   @media only screen and (max-width: 1002px) {
@@ -125,7 +141,7 @@
     ul {
       align-items: center;
     }
-    li a span {
+    li a {
       display: none;
     }
   }

src/routes/_layout.svelte

@@ -1,8 +1,7 @@
 <script>
   import { stores } from '@sapper/app';
   import Tailwindcss from '../components/Tailwindcss.svelte';
-  // import Nav from "../components/Nav.svelte";
+  import Navigation from '../components/Navigation/index.svelte';
-  import LeftNav from '../components/LeftNav/index.svelte';
   // import SideBar from "../components/SideBar/index.svelte";
   import Footer from '../components/Footer/index.svelte';
   import Apps from '../components/Apps/index.svelte';
@@ -16,9 +15,9 @@
 
 <!-- <Nav {segment} /> -->
 
-<main class="flex">
+<main>
   {#if !['login', 'signup'].includes($page.path.replace('/', ''))}
-    <LeftNav {segment} />
+    <Navigation {segment} />
   {/if}
   <slot />
   {#if $page.path.includes('courses')}

src/routes/discussions.svelte

@@ -0,0 +1,229 @@
+<script>
+  import { stores } from "@sapper/app";
+  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+  import Vote from "../components/Vote/index.svelte";
+  import Space from "../components/Space/index.svelte";
+  import HashTags from "../components/HashTags/index.svelte";
+  import PageNav from "../components/PageNav/index.svelte";
+
+  function getDiscussion(filterBy, allDiscussions) {
+    switch (filterBy) {
+      case "popular":
+        return allDiscussions.filter((a, i) => i >= 0 && i < 2);
+      case "recent":
+        return allDiscussions.filter((a, i) => i >= 2 && i < 5);
+      case "upvoted":
+        return allDiscussions.filter((a, i) => i > 4 && i < 8);
+      default:
+        return allDiscussions;
+    }
+  }
+
+  const { page } = stores();
+  let filterBy = "";
+  let discussions = [];
+
+  $: filterBy = $page.query.filter || "popular";
+
+  const _allDiscussions = [
+    {
+      id: 1,
+      title: "How do I pass Anicimov?",
+      author: {
+        name: "rotimibest",
+      },
+      tags: ["ибэит", "икс"],
+      answered: false,
+      comments: 10,
+      votes: 10,
+    },
+    {
+      id: 2,
+      title:
+        "Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?",
+      author: {
+        name: "attronaldo",
+      },
+      tags: ["иибрт", "иее"],
+      answered: false,
+      comments: 2,
+      votes: 2,
+    },
+    {
+      id: 3,
+      title: "Who is Nikolenko?",
+      author: {
+        name: "donald",
+      },
+      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
+      answered: false,
+      comments: 10,
+      votes: 10,
+    },
+    {
+      id: 4,
+      title: "Archive discussion button",
+      author: {
+        name: "acharlesvv",
+      },
+      tags: [
+        "ИЭКСУ",
+        "ИМБТ",
+        "ИМИ",
+        "ИПТДМ",
+        "ИИИР",
+        "ГФ",
+        "ХТФ",
+        "ИДЗО",
+        "УИИ",
+        "УНИ",
+      ],
+      answered: false,
+      comments: 15,
+      votes: 15,
+    },
+    {
+      id: 1,
+      title: "How do I pass Anicimov?",
+      author: {
+        name: "rotimibest",
+      },
+      tags: ["ибэит", "икс"],
+      answered: false,
+      comments: 7,
+      votes: 7,
+    },
+    {
+      id: 2,
+      title: "Where do I find the nearest restaurant?",
+      author: {
+        name: "attronaldo",
+      },
+      tags: ["иибрт", "иее"],
+      answered: false,
+      comments: 4,
+      votes: 4,
+    },
+    {
+      id: 3,
+      title: "Who is Nikolenko?",
+      author: {
+        name: "donald",
+      },
+      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
+      answered: false,
+      comments: 100,
+      votes: 100,
+    },
+    {
+      id: 4,
+      title: "Archive discussion button",
+      author: {
+        name: "acharlesvv",
+      },
+      tags: [
+        "ИЭКСУ",
+        "ИМБТ",
+        "ИМИ",
+        "ИПТДМ",
+        "ИИИР",
+        "ГФ",
+        "ХТФ",
+        "ИДЗО",
+        "УИИ",
+        "УНИ",
+      ],
+      answered: false,
+      comments: 5,
+      votes: 5,
+    },
+  ];
+  const allDiscussions = [];
+
+  _allDiscussions.forEach((d, i) => {
+    allDiscussions.push(d, _allDiscussions[_allDiscussions.length - (i + 1)]);
+  });
+
+  $: discussions = getDiscussion(filterBy, allDiscussions);
+</script>
+
+<svelte:head>
+  <title>ClassroomIO - Help students in your university</title>
+</svelte:head>
+<div class="root md:w-3/4 mx-auto md:mb-20">
+  <PageNav
+    title="Talks"
+    addButtonHref="/ask"
+    addButtonLabel="Ask"
+    navItems={[
+      {
+        label: "Popular",
+        isActive: filterBy === "popular",
+        href: "?filter=popular",
+      },
+      {
+        label: "Recent",
+        isActive: filterBy === "recent",
+        href: "?filter=recent",
+      },
+      {
+        label: "Upvoted",
+        isActive: filterBy === "upvoted",
+        href: "?filter=upvoted",
+      },
+    ]}
+  />
+  {#each discussions as discussion}
+    <div class="discussion-box">
+      <Vote value={discussion.votes} />
+      <div class="discussion-topic-author">
+        <h4>
+          <a rel="prefetch" href="discussion/{discussion.id}"
+            >{discussion.title}</a
+          >
+        </h4>
+        <span>{discussion.author.name} asked 1 day ago</span>
+        <HashTags tags={discussion.tags} />
+      </div>
+      <Space />
+      <div class="flex items-center">
+        <AddComment20 />
+        <span>{discussion.comments}</span>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .root {
+    max-width: 600px;
+    margin: 0 auto;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+  }
+  .discussion-box {
+    /* border: 1px solid var(--border-color); */
+    display: flex;
+    align-items: flex-start;
+    padding: 10px 15px;
+    /* border-radius: 10px; */
+    margin: 0px auto;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  h4 {
+    font-size: 16px;
+    font-weight: 900;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    margin: 0;
+  }
+
+  .discussion-topic-author {
+    margin-right: 20px;
+  }
+  .discussion-topic-author span {
+    color: #586069;
+    font-size: 12px;
+  }
+</style>

src/routes/index.svelte

@@ -1,229 +0,0 @@
-<script>
-  import { stores } from "@sapper/app";
-  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
-  import Vote from "../components/Vote/index.svelte";
-  import Space from "../components/Space/index.svelte";
-  import HashTags from "../components/HashTags/index.svelte";
-  import PageNav from "../components/PageNav/index.svelte";
-
-  function getDiscussion(filterBy, allDiscussions) {
-    switch (filterBy) {
-      case "popular":
-        return allDiscussions.filter((a, i) => i >= 0 && i < 2);
-      case "recent":
-        return allDiscussions.filter((a, i) => i >= 2 && i < 5);
-      case "upvoted":
-        return allDiscussions.filter((a, i) => i > 4 && i < 8);
-      default:
-        return allDiscussions;
-    }
-  }
-
-  const { page } = stores();
-  let filterBy = "";
-  let discussions = [];
-
-  $: filterBy = $page.query.filter || "popular";
-
-  const _allDiscussions = [
-    {
-      id: 1,
-      title: "How do I pass Anicimov?",
-      author: {
-        name: "rotimibest",
-      },
-      tags: ["ибэит", "икс"],
-      answered: false,
-      comments: 10,
-      votes: 10,
-    },
-    {
-      id: 2,
-      title:
-        "Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?",
-      author: {
-        name: "attronaldo",
-      },
-      tags: ["иибрт", "иее"],
-      answered: false,
-      comments: 2,
-      votes: 2,
-    },
-    {
-      id: 3,
-      title: "Who is Nikolenko?",
-      author: {
-        name: "donald",
-      },
-      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
-      answered: false,
-      comments: 10,
-      votes: 10,
-    },
-    {
-      id: 4,
-      title: "Archive discussion button",
-      author: {
-        name: "acharlesvv",
-      },
-      tags: [
-        "ИЭКСУ",
-        "ИМБТ",
-        "ИМИ",
-        "ИПТДМ",
-        "ИИИР",
-        "ГФ",
-        "ХТФ",
-        "ИДЗО",
-        "УИИ",
-        "УНИ",
-      ],
-      answered: false,
-      comments: 15,
-      votes: 15,
-    },
-    {
-      id: 1,
-      title: "How do I pass Anicimov?",
-      author: {
-        name: "rotimibest",
-      },
-      tags: ["ибэит", "икс"],
-      answered: false,
-      comments: 7,
-      votes: 7,
-    },
-    {
-      id: 2,
-      title: "Where do I find the nearest restaurant?",
-      author: {
-        name: "attronaldo",
-      },
-      tags: ["иибрт", "иее"],
-      answered: false,
-      comments: 4,
-      votes: 4,
-    },
-    {
-      id: 3,
-      title: "Who is Nikolenko?",
-      author: {
-        name: "donald",
-      },
-      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
-      answered: false,
-      comments: 100,
-      votes: 100,
-    },
-    {
-      id: 4,
-      title: "Archive discussion button",
-      author: {
-        name: "acharlesvv",
-      },
-      tags: [
-        "ИЭКСУ",
-        "ИМБТ",
-        "ИМИ",
-        "ИПТДМ",
-        "ИИИР",
-        "ГФ",
-        "ХТФ",
-        "ИДЗО",
-        "УИИ",
-        "УНИ",
-      ],
-      answered: false,
-      comments: 5,
-      votes: 5,
-    },
-  ];
-  const allDiscussions = [];
-
-  _allDiscussions.forEach((d, i) => {
-    allDiscussions.push(d, _allDiscussions[_allDiscussions.length - (i + 1)]);
-  });
-
-  $: discussions = getDiscussion(filterBy, allDiscussions);
-</script>
-
-<svelte:head>
-  <title>ClassroomIO - Help students in your university</title>
-</svelte:head>
-<div class="root md:w-3/4 mx-auto md:mb-20">
-  <PageNav
-    title="Talks"
-    addButtonHref="/ask"
-    addButtonLabel="Ask"
-    navItems={[
-      {
-        label: "Popular",
-        isActive: filterBy === "popular",
-        href: "?filter=popular",
-      },
-      {
-        label: "Recent",
-        isActive: filterBy === "recent",
-        href: "?filter=recent",
-      },
-      {
-        label: "Upvoted",
-        isActive: filterBy === "upvoted",
-        href: "?filter=upvoted",
-      },
-    ]}
-  />
-  {#each discussions as discussion}
-    <div class="discussion-box">
-      <Vote value={discussion.votes} />
-      <div class="discussion-topic-author">
-        <h4>
-          <a rel="prefetch" href="discussion/{discussion.id}"
-            >{discussion.title}</a
-          >
-        </h4>
-        <span>{discussion.author.name} asked 1 day ago</span>
-        <HashTags tags={discussion.tags} />
-      </div>
-      <Space />
-      <div class="flex items-center">
-        <AddComment20 />
-        <span>{discussion.comments}</span>
-      </div>
-    </div>
-  {/each}
-</div>
-
-<style>
-  .root {
-    max-width: 600px;
-    margin: 0 auto;
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-  }
-  .discussion-box {
-    /* border: 1px solid var(--border-color); */
-    display: flex;
-    align-items: flex-start;
-    padding: 10px 15px;
-    /* border-radius: 10px; */
-    margin: 0px auto;
-    border-bottom: 1px solid #e2e8f0;
-  }
-
-  h4 {
-    font-size: 16px;
-    font-weight: 900;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    margin: 0;
-  }
-
-  .discussion-topic-author {
-    margin-right: 20px;
-  }
-  .discussion-topic-author span {
-    color: #586069;
-    font-size: 12px;
-  }
-</style>