CLASSROOMIO-T-80: Replace sapper with sveltekit
This commit is contained in:
Rotimi Best
@@ -0,0 +1,101 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import NotificationIcon from 'carbon-icons-svelte/lib/Notification.svelte';
|
||||
import Moon from 'carbon-icons-svelte/lib/Moon.svelte';
|
||||
import Sun from 'carbon-icons-svelte/lib/Sun.svelte';
|
||||
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import { appStore } from '$lib/utils/store/app';
|
||||
import { toggleBodyByTheme } from '$lib/utils/functions/app';
|
||||
|
||||
export let navClass = '';
|
||||
|
||||
function toggleTheme() {
|
||||
$appStore.isDark = !$appStore.isDark;
|
||||
|
||||
toggleBodyByTheme($appStore.isDark);
|
||||
localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
|
||||
<ul class="flex w-full items-center">
|
||||
<div class="">
|
||||
<a
|
||||
href={$page.url.pathname}
|
||||
title="Go to ClassroomIO Home"
|
||||
id="logo"
|
||||
class="text-lg"
|
||||
>
|
||||
ClassroomIO
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-grow" />
|
||||
|
||||
<li>
|
||||
<NotificationIcon size={20} class="text-white mr-2" />
|
||||
</li>
|
||||
<li>
|
||||
<IconButton size="small" onClick={toggleTheme}>
|
||||
{#if $appStore.isDark}
|
||||
<Sun size={16} class="text-white" />
|
||||
{:else}
|
||||
<Moon size={16} class="text-white" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</li>
|
||||
<li />
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
ul::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* li.new-question {
|
||||
margin-top: 10px;
|
||||
} */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* [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) {
|
||||
nav.hide {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import NotificationIcon from 'carbon-icons-svelte/lib/Notification.svelte';
|
||||
import MoonIcon from 'carbon-icons-svelte/lib/Moon.svelte';
|
||||
import SunIcon from 'carbon-icons-svelte/lib/Sun.svelte';
|
||||
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import { appStore } from '$lib/utils/store/app';
|
||||
import { toggleBodyByTheme } from '$lib/utils/functions/app';
|
||||
|
||||
export let navClass = '';
|
||||
|
||||
function toggleTheme() {
|
||||
$appStore.isDark = !$appStore.isDark;
|
||||
|
||||
toggleBodyByTheme($appStore.isDark);
|
||||
localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
|
||||
<ul class="flex w-full items-center">
|
||||
<div class="">
|
||||
<a
|
||||
href={$page.url.pathname}
|
||||
title="Go to ClassroomIO Home"
|
||||
id="logo"
|
||||
class="text-lg"
|
||||
>
|
||||
ClassroomIO
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-grow" />
|
||||
|
||||
<li>
|
||||
<NotificationIcon size={20} class="text-white mr-2" />
|
||||
</li>
|
||||
<li>
|
||||
<IconButton size="small" onClick={toggleTheme}>
|
||||
{#if $appStore.isDark}
|
||||
<SunIcon size={16} class="text-white" />
|
||||
{:else}
|
||||
<MoonIcon size={16} class="text-white" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</li>
|
||||
<li />
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
ul::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* li.new-question {
|
||||
margin-top: 10px;
|
||||
} */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* [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) {
|
||||
nav.hide {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user