Restructure ui of app

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>

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>

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>