CLASSROOMIO-T-80: Replace sapper with sveltekit

2023-08-02 19:35:27 +01:00
parent 8ffdf319b3
commit 7dfbb05451
320 changed files with 5207 additions and 18330 deletions
@@ -0,0 +1,160 @@
+<script>
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { user } from '$lib/utils/store/user';
+  import { appStore } from '$lib/utils/store/app';
+  import { isCoursePage } from '$lib/utils/functions/app';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  export let disableLogin;
+  export let logo;
+  export let orgName;
+
+  let navClass = '';
+
+  const redirect = isCoursePage($page.url.pathname)
+    ? `?redirect=${$page.url.pathname}`
+    : '';
+
+  $: navClass = '';
+</script>
+
+<nav
+  class="{navClass} bg-white sticky top-0 z-50 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 ${orgName || 'ClassroomIO'} Home`}
+        id="logo"
+        data-hveid="8"
+      >
+        <img
+          src={logo || '/logo-192.png'}
+          alt={`${orgName || 'ClassroomIO'} logo`}
+          class="rounded h-10 w-10 inline-block mx-auto"
+          data-atf="1"
+        />
+      </a>
+    </div>
+
+    {#if $user.isLoggedIn}
+      <li class="hidden">
+        <a class="block" href="dashboard"> Dashboard </a>
+      </li>
+
+      <li class="hidden">
+        <a class="block" href="courses"> Courses </a>
+      </li>
+
+      <li class="hidden">
+        <a class="block" href="discussions"> Discussion </a>
+      </li>
+
+      <li class="hidden">
+        <a class="block" href="people">People </a>
+      </li>
+    {/if}
+
+    <span class="flex-grow" />
+
+    {#if $user.isLoggedIn}
+      {#if $appStore.isStudentDomain}
+        <li><a class="block" href="/lms"> Go to LMS </a></li>
+      {/if}
+    {:else}
+      <li>
+        {#if !disableLogin}
+          <div class="flex">
+            <PrimaryButton
+              label="Login"
+              variant={VARIANTS.NONE}
+              className="py-3 px-6 mx-2 app-background-color"
+              onClick={() => {
+                console.log('clicked login');
+                goto('/login' + redirect);
+              }}
+            />
+            <PrimaryButton
+              label="Sign Up"
+              variant={VARIANTS.CONTAINED}
+              className="py-3 px-6 mx-2"
+              onClick={() => {
+                console.log('clicked signup');
+                goto('/signup' + redirect);
+              }}
+            />
+          </div>
+        {/if}
+      </li>
+    {/if}
+    <!-- <li class="hidden">
+      <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><SendAlt32 class="carbon-icon" /> Канал</span>
+        <SendAlt32 class="carbon-icon" />
+        <span>Канал</span>
+      </a>
+    </li> -->
+    <!-- <li class="new-question">
+      <NewQuestion />
+    </li> -->
+  </ul>
+</nav>
+
+<style>
+  ul {
+    margin: 0 auto;
+    padding: 0;
+  }
+
+  /* clearfix */
+  ul::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  /* li.new-question {
+    margin-top: 10px;
+  } */
+
+  a {
+    text-decoration: none;
+    color: var(--main-primary-color);
+    padding: 0 1.5em;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  @media only screen and (max-width: 1002px) {
+    nav.hide {
+      display: none;
+    }
+    ul {
+      align-items: center;
+    }
+
+    a {
+      padding: 0 0.5em;
+    }
+  }
+</style>