From 59b8722ccddbb8db96b274026a7db4eab544665c Mon Sep 17 00:00:00 2001
From: Ibitoye Rotimi Best <best.rotimi@ikizmet.com>
Date: Mon, 5 Apr 2021 07:12:51 +0300
Subject: [PATCH] Restructure ui of app

---
 package-lock.json                 |   6 +-
 src/components/LeftNav.svelte     | 127 ++++++++
 src/components/NewQuestion.svelte |  30 +-
 src/components/SideBar.svelte     |  42 +--
 src/routes/_layout.svelte         |  34 +--
 src/routes/ask.svelte             |  55 +++-
 src/routes/discussion/[id].svelte |  24 +-
 src/routes/index.svelte           | 461 +++++++++++++++---------------
 src/routes/login.svelte           |  16 +-
 9 files changed, 496 insertions(+), 299 deletions(-)
 create mode 100644 src/components/LeftNav.svelte

diff --git a/package-lock.json b/package-lock.json
index d28930b0..9f0acd15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2900,9 +2900,9 @@
       "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
     },
     "trouter": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/trouter/-/trouter-3.1.0.tgz",
-      "integrity": "sha512-3Swwu638QQWOefHLss9cdyLi5/9BKYmXZEXpH0KOFfB9YZwUAwHbDAcoYxaHfqAeFvbi/LqAK7rGkhCr1v1BJA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/trouter/-/trouter-3.2.0.tgz",
+      "integrity": "sha512-rLLXbhTObLy2MBVjLC+jTnoIKw99n0GuJs9ov10J870vDw5qhTurPzsDrudNtBf5w/CZ9ctZy2p2IMmhGcel2w==",
       "requires": {
         "regexparam": "^1.3.0"
       }
diff --git a/src/components/LeftNav.svelte b/src/components/LeftNav.svelte
new file mode 100644
index 00000000..1a351801
--- /dev/null
+++ b/src/components/LeftNav.svelte
@@ -0,0 +1,127 @@
+<script>
+  import NewQuestion from "./NewQuestion.svelte";
+  import Home32 from "carbon-icons-svelte/lib/Home32";
+  import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
+  import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
+  export let segment;
+  let navClass = "";
+
+  $: navClass = ["discussion"].includes(segment) ? "hide" : "";
+</script>
+
+<nav class={navClass}>
+  <ul class="flex items-start flex-col justify-evenly">
+    <div class="logo">
+      <a href="/" title="Go to univapros Home" id="logo" data-hveid="8"
+        ><img
+          src="/logo-192.png"
+          alt="Univapros logo"
+          height="48"
+          width="48"
+          data-atf="1"
+        /></a
+      >
+    </div>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === undefined || segment === "discussion"
+          ? "page"
+          : undefined}
+        href="."><Home32 class="carbon-icon" /><span>Home</span></a
+      >
+    </li>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === "profile" ? "page" : undefined}
+        href="profile"
+        ><UserAvatar32 class="carbon-icon" /> <span>Профиль</span></a
+      >
+    </li>
+    <li>
+      <a
+        class="flex items-center"
+        href="https://t.me/unidiscuss"
+        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><SendAlt32 class="carbon-icon" /> Канал</span> -->
+        <SendAlt32 class="carbon-icon" /> <span>Канал</span>
+      </a>
+    </li>
+    <li class="new-question">
+      <NewQuestion />
+    </li>
+  </ul>
+</nav>
+
+<style>
+  nav {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    width: 20%;
+    padding-top: 10px;
+    position: sticky;
+    top: 0;
+  }
+
+  ul {
+    margin: 0 auto;
+    padding: 0;
+  }
+
+  /* clearfix */
+  ul::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  li.new-question {
+    margin-top: 10px;
+  }
+
+  a {
+    text-decoration: none;
+    padding: 1em 0.5em;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+  }
+
+  :global(svg.carbon-icon) {
+    margin-right: 10px;
+  }
+
+  [aria-current] :global(svg.carbon-icon) {
+    fill: #3182ce;
+  }
+
+  [aria-current] {
+    color: #3182ce;
+  }
+
+  @media only screen and (max-width: 1002px) {
+    nav.hide {
+      display: none;
+    }
+    ul {
+      align-items: center;
+    }
+    li a span {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/components/NewQuestion.svelte b/src/components/NewQuestion.svelte
index 51904d02..68fe84d6 100644
--- a/src/components/NewQuestion.svelte
+++ b/src/components/NewQuestion.svelte
@@ -1,15 +1,31 @@
 <script>
-    import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
-
+  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
 </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"
+>
+  <AddComment20 class="carbon-icon fill-current w-4 h-4 mr-2" />
+  <span>Спросить</span>
+</a>
+
 <style>
   .root {
     height: fit-content;
+    border-radius: 30px;
+  }
+
+  @media only screen and (max-width: 1002px) {
+    a {
+      padding: 10px 15px;
+    }
+    a span {
+      display: none;
+    }
+
+    a :global(svg.carbon-icon) {
+      margin-right: 0;
+    }
   }
 </style>
-
-<button class="root bg-blue-700 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded inline-flex items-center float-right">
-  <AddComment20  class="fill-current w-4 h-4 mr-2" />
-  <a href="/ask">Спросить</a>
-</button>
\ No newline at end of file
diff --git a/src/components/SideBar.svelte b/src/components/SideBar.svelte
index eba3568c..9f34425f 100644
--- a/src/components/SideBar.svelte
+++ b/src/components/SideBar.svelte
@@ -2,34 +2,27 @@
   // your script goes here
   const contributors = [
     {
-      name: 'Koskting'
+      name: "Koskting",
     },
     {
-      name: 'Koskting'
+      name: "Koskting",
     },
     {
-      name: 'Koskting'
+      name: "Koskting",
     },
     {
-      name: 'Koskting'
+      name: "Koskting",
     },
     {
-      name: 'Koskting'
+      name: "Koskting",
     },
   ];
 </script>
 
-<style>
-  .sidebar-root {
-    width: 250px;
-    min-width: 250px;
-    height: fit-content;
-  }
-
-</style>
-
 <!-- markup (zero or more items) goes here -->
-<div class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md md:mt-12">
+<div
+  class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md md:mt-12"
+>
   <h4 class="border-b border-gray text-base font-bold pb-1">Самые полезные</h4>
   {#each contributors as contributor}
     <a class="flex pt-3" href="/{contributor.name}">
@@ -39,8 +32,23 @@
         width="23"
         height="20"
         alt="@jamesmosier"
+      />
+      <span class="hover:text-blue-700 hover:underline">{contributor.name}</span
       >
-      <span class="hover:text-blue-700 hover:underline">{contributor.name}</span>
     </a>
-	{/each}
+  {/each}
 </div>
+
+<style>
+  .sidebar-root {
+    width: 250px;
+    min-width: 250px;
+    height: fit-content;
+  }
+
+  @media only screen and (max-width: 1002px) {
+    .sidebar-root {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index aae905b0..150df213 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,12 +1,25 @@
 <script>
   import Tailwindcss from "../components/Tailwindcss.svelte";
-  import Nav from "../components/Nav.svelte";
+  // import Nav from "../components/Nav.svelte";
+  import LeftNav from "../components/LeftNav.svelte";
   import SideBar from "../components/SideBar.svelte";
   import Footer from "../components/Footer.svelte";
 
   export let segment;
 </script>
 
+<Tailwindcss />
+
+<!-- <Nav {segment} /> -->
+
+<main class="flex max-w-screen-xl">
+  <LeftNav {segment} />
+  <slot />
+  <SideBar />
+</main>
+
+<Footer />
+
 <style>
   main {
     background-color: white;
@@ -19,23 +32,4 @@
   :global(a:hover) {
     text-decoration: underline;
   }
-
-  @media only screen and (max-width: 768px) {
-    main {
-      flex-direction: column;
-      align-items: center;
-      /* padding: 10px; */
-    }
-  }
 </style>
-
-<Tailwindcss />
-
-<Nav {segment} />
-
-<main class="flex max-w-screen-xl">
-  <slot />
-  <SideBar />
-</main>
-
-<Footer />
diff --git a/src/routes/ask.svelte b/src/routes/ask.svelte
index 5d682122..0923b1b3 100644
--- a/src/routes/ask.svelte
+++ b/src/routes/ask.svelte
@@ -1,19 +1,28 @@
 <script>
   import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
-	import TextEditor from "../components/TextEditor.svelte";
+  import TextEditor from "../components/TextEditor.svelte";
 
-  let questionTitle = '';
-  let questionTags = [];
-  let questionDescription = '';
+  let questionTitle = "";
+  let questionDescription = "";
   let facultyFilterOpened = false;
 
   const faculties = [
-    'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+    "ИЭКСУ",
+    "ИМБТ",
+    "ИМИ",
+    "ИПТДМ",
+    "ИИИР",
+    "ГФ",
+    "ХТФ",
+    "ИДЗО",
+    "УИИ",
+    "УНИ",
   ];
   let checkbox = faculties.reduce((acc, cur) => {
     acc[cur] = false;
     return acc;
   }, {});
+  $: clickedTotal = Object.values(checkbox).filter((box) => !!box).length;
 
   function handleFacultyFilters() {
     facultyFilterOpened = facultyFilterOpened ? false : true;
@@ -21,29 +30,34 @@
 </script>
 
 <svelte:head>
-	<title>Спросить собшество вопрос</title>
+  <title>Спросить собшество вопрос</title>
 </svelte:head>
 
 <div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
   <h2 class="pb-2">Спросить собшество вопрос</h2>
-  <div class="my-1 flex">
-    <div class="mr-1">
+  <div class="main-title my-1 flex">
+    <div class="faculty-filter mr-1">
       <button
         class="flex border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative"
         on:click={handleFacultyFilters}
       >
-        <span>Факултеты</span> <ChevronDown24 class="ml-2" />
+        <span class="flex flex-row"
+          >Факултеты <span>&nbsp;({clickedTotal})</span></span
+        >
+        <ChevronDown24 class="ml-2" />
       </button>
 
       {#if facultyFilterOpened}
-        <div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute">
+        <div
+          class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute"
+        >
           {#each faculties as faculty}
             <div class="block px-4 py-2 border-b">
               <input
                 type="checkbox"
                 class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"
                 bind:checked={checkbox[faculty]}
-              >
+              />
               <span>{faculty}</span>
             </div>
           {/each}
@@ -60,12 +74,23 @@
       type="text"
       name="discussion[title]"
       id="discussion_title"
-      value="{questionTitle}"
-    >
+      value={questionTitle}
+    />
   </div>
 
   <TextEditor
-    value="{questionDescription}"
+    value={questionDescription}
     placeholder="Задайте вопрос или начните разговор"
   />
-</div>
\ No newline at end of file
+</div>
+
+<style>
+  @media only screen and (max-width: 1002px) {
+    .faculty-filter {
+      margin-bottom: 10px;
+    }
+    .main-title {
+      flex-direction: column;
+    }
+  }
+</style>
diff --git a/src/routes/discussion/[id].svelte b/src/routes/discussion/[id].svelte
index 0d91a70e..3d171ba5 100644
--- a/src/routes/discussion/[id].svelte
+++ b/src/routes/discussion/[id].svelte
@@ -25,12 +25,6 @@
   export let discussion;
 </script>
 
-<style>
-  .root {
-    margin-top: 15px;
-  }
-</style>
-
 <svelte:head>
   <title>{discussion.title}</title>
 </svelte:head>
@@ -44,11 +38,13 @@
     <header class="flex items-center justify-between leading-none p-2">
       <a
         class="flex items-center no-underline hover:underline text-black"
-        href="/">
+        href="/"
+      >
         <img
           alt="Placeholder"
           class="block rounded-full"
-          src="https://picsum.photos/32/32/?random" />
+          src="https://picsum.photos/32/32/?random"
+        />
         <p class="ml-2 text-sm">{discussion.author.name}</p>
         <p class="ml-2 text-sm text-gray-500">12h ago</p>
       </a>
@@ -70,13 +66,15 @@
         <header class="flex items-center justify-between leading-none p-2">
           <a
             class="flex items-center no-underline hover:underline text-black"
-            href="/">
+            href="/"
+          >
             <img
               alt="Placeholder"
               class="block rounded-full"
               width="24"
               height="20"
-              src={comment.avatar} />
+              src={comment.avatar}
+            />
             <p class="ml-2 text-sm">{comment.name}</p>
             <p class="ml-2 text-sm text-gray-500">12h ago</p>
           </a>
@@ -93,3 +91,9 @@
   <hr />
   <TextEditor value={userComment} placeholder="Предлогайте ваш ответ" />
 </div>
+
+<style>
+  .root {
+    margin: 15px 5px;
+  }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 16d0dc98..4b61e374 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,244 +1,259 @@
 <script>
-	import { stores } from "@sapper/app";
-	import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
-	import Vote from "../components/Vote.svelte";
-	import Space from "../components/Space.svelte";
-	import HashTags from "../components/HashTags.svelte";
+  import { stores } from "@sapper/app";
+  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+  import Vote from "../components/Vote.svelte";
+  import Space from "../components/Space.svelte";
+  import HashTags from "../components/HashTags.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;
-		}
-	}
+  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 = [];
+  const { page } = stores();
+  let filterBy = "";
+  let discussions = [];
 
-	$: filterBy = $page.query.filter || "popular";
+  $: 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 = [
+    {
+      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 = [];
 
-	$: discussions = getDiscussion(filterBy, allDiscussions);
+  _allDiscussions.forEach((d, i) => {
+    allDiscussions.push(d, _allDiscussions[_allDiscussions.length - (i + 1)]);
+  });
+
+  $: discussions = getDiscussion(filterBy, allDiscussions);
 </script>
 
+<svelte:head>
+  <title>Unidiscuss - Help students in your university</title>
+</svelte:head>
+<div class="root md:w-3/4 mx-auto md:mb-20">
+  <div class="header flex justify-between mb-2">
+    <h4 class="title">Разговоры 😉😁</h4>
+    <div class="flex justify-evenly items-center">
+      <a
+        class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
+        href="?filter=popular"
+      >
+        Popular
+      </a>
+      <a
+        class="mr-5 text-sm {filterBy === 'recent' && 'active'}"
+        href="?filter=recent"
+      >
+        Recent
+      </a>
+      <a
+        class="mr-5 text-sm {filterBy === 'upvoted' && 'active'}"
+        href="?filter=upvoted"
+      >
+        Upvoted
+      </a>
+    </div>
+  </div>
+  {#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 #eaecef;
-		border-right: 1px solid #eaecef;
-	}
+  .root {
+    max-width: 600px;
+    margin: 0 auto;
+    border-left: 1px solid #eaecef;
+    border-right: 1px solid #eaecef;
+  }
 
-	.root .header {
-		border-bottom: 1px solid #eaecef;
-		padding: 15px;
-	}
+  .root .header {
+    border-bottom: 1px solid #eaecef;
+    padding: 15px;
+  }
 
-	.root .title {
-		font-size: 20px;
-	}
-	.discussion-box {
-		/* border: 1px solid #eaecef; */
-		display: flex;
+  .root .title {
+    font-size: 20px;
+  }
+  .discussion-box {
+    /* border: 1px solid #eaecef; */
+    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;
-	}
+  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;
-	}
+  .discussion-topic-author {
+    margin-right: 20px;
+  }
+  .discussion-topic-author span {
+    color: #586069;
+    font-size: 12px;
+  }
 
-	.active {
-		position: relative;
-		display: inline-block;
-	}
+  .active {
+    position: relative;
+    display: inline-block;
+  }
 
-	.active::after {
-		position: absolute;
-		content: "";
-		width: 100%;
-		height: 3px;
-		background-color: #3182ce;
-		display: block;
-	}
+  .active::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 3px;
+    background-color: #3182ce;
+    display: block;
+  }
+
+  @media only screen and (max-width: 1002px) {
+    .header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
 </style>
-
-<svelte:head>
-	<title>Unidiscuss - Help students in your university</title>
-</svelte:head>
-<div class="root md:w-3/4 mx-auto md:mb-20">
-	<div class="header flex justify-between mb-2">
-		<h4 class="title">Разговоры 😉😁</h4>
-		<div class="flex justify-evenly items-center">
-			<a
-				class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
-				href="?filter=popular">
-				Popular
-			</a>
-			<a
-				class="mr-5 text-sm {filterBy === 'recent' && 'active'}"
-				href="?filter=recent">
-				Recent
-			</a>
-			<a
-				class="mr-5 text-sm {filterBy === 'upvoted' && 'active'}"
-				href="?filter=upvoted">
-				Upvoted
-			</a>
-		</div>
-	</div>
-	{#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>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index f49f52fd..87d099ff 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -1,8 +1,16 @@
 
+<script>
+
+ function onTelegramAuth(user) {
+    alert('Logged in as ' + user.first_name + ' ' + user.last_name + ' (' + user.id + (user.username ? ', @' + user.username : '') + ')');
+  }
+</script>
+
 <svelte:head>
-	<title>Login</title>
+	<title>Join Unidiscuss</title>
 </svelte:head>
 
-<div class="">
-  <h2>Login page here</h2>
-</div>
+<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
+  <p>Login/Sign up into Unidiscuss</p>
+  <script async src="https://telegram.org/js/telegram-widget.js?14" data-telegram-login="unidiscuss_bot" data-size="large" data-auth-url="login-redirect" data-request-access="write"></script>
+</div>
\ No newline at end of file