feat: 🚀 😃 convert repo into a monorepo 🚀 😃 (#51)
* Merge main into turbo-monrepo * feat: rename apps * feat: remove supbase videos and serve all from project * feat: move supabase to root * feat: update README * docs: update link
This commit is contained in:
Rotimi Best
@@ -0,0 +1,140 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { browser } from '$app/environment';
|
||||
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 Menu from 'carbon-icons-svelte/lib/Menu.svelte';
|
||||
import Close from 'carbon-icons-svelte/lib/Close.svelte';
|
||||
import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
|
||||
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import { appStore } from '$lib/utils/store/app';
|
||||
import { currentOrgPath } from '$lib/utils/store/org';
|
||||
import { toggleBodyByMode } from '$lib/utils/functions/app';
|
||||
import { sideBar } from '../Org/store';
|
||||
|
||||
export let title = '';
|
||||
export let navClass = '';
|
||||
export let isCoursePage = false;
|
||||
|
||||
const toggleSidebar = () => {
|
||||
$sideBar.hidden = !$sideBar.hidden;
|
||||
};
|
||||
|
||||
function toggleDarkMode() {
|
||||
$appStore.isDark = !$appStore.isDark;
|
||||
|
||||
toggleBodyByMode($appStore.isDark);
|
||||
|
||||
if (browser) {
|
||||
localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
|
||||
}
|
||||
}
|
||||
|
||||
$: coursesPath = $appStore.isOrgSite
|
||||
? '/lms/mylearning'
|
||||
: isCoursePage
|
||||
? `${$currentOrgPath}/courses`
|
||||
: $currentOrgPath;
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out h-[48px]"
|
||||
>
|
||||
<ul class="flex w-full items-center">
|
||||
<div class="flex items-center text-white">
|
||||
<li class="md:hidden">
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
toggleSidebar();
|
||||
}}
|
||||
>
|
||||
{#if $sideBar.hidden}
|
||||
<Menu size={16} class=" text-white" />
|
||||
{:else}
|
||||
<Close size={16} class=" text-white" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</li>
|
||||
|
||||
{#if isCoursePage}
|
||||
<li class="hidden md:block">
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
toggleSidebar();
|
||||
}}
|
||||
>
|
||||
<Menu size={16} class=" text-white" />
|
||||
</IconButton>
|
||||
</li>
|
||||
<li class="hidden md:block">
|
||||
<IconButton onClick={() => goto(coursesPath)}>
|
||||
<ArrowLeft size={16} class="text-white" />
|
||||
</IconButton>
|
||||
</li>
|
||||
{/if}
|
||||
<a
|
||||
href={coursesPath}
|
||||
title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
|
||||
id="logo"
|
||||
class="text-lg line-clamp-1"
|
||||
>
|
||||
{isCoursePage ? title : 'ClassroomIO'}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-grow" />
|
||||
|
||||
<li>
|
||||
<NotificationIcon size={20} class="text-white mr-2" />
|
||||
</li>
|
||||
<li>
|
||||
<IconButton size="small" onClick={toggleDarkMode}>
|
||||
{#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;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
nav.hide {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { user } from '$lib/utils/store/user';
|
||||
import { isCoursePage } from '$lib/utils/functions/app';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
|
||||
export let disableSignup = false;
|
||||
export let logo;
|
||||
export let orgName;
|
||||
export let isOrgSite = false;
|
||||
export let backgroundColor = 'bg-white dark:bg-black';
|
||||
|
||||
let navClass = '';
|
||||
|
||||
const redirect = isCoursePage($page.url.pathname) ? `?redirect=${$page.url.pathname}` : '';
|
||||
|
||||
$: navClass = '';
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="{navClass} {backgroundColor} sticky top-0 z-50 flex w-full px-2 py-1 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-9 w-9 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 isOrgSite}
|
||||
<li><a class="block" href="/lms"> Go to LMS </a></li>
|
||||
{/if}
|
||||
{:else}
|
||||
<li>
|
||||
<div class="flex">
|
||||
<PrimaryButton
|
||||
label="Login"
|
||||
variant={VARIANTS.TEXT}
|
||||
onClick={() => goto('/login' + redirect)}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
{#if !disableSignup}
|
||||
<div class="flex">
|
||||
<PrimaryButton
|
||||
label="Signup"
|
||||
variant={VARIANTS.CONTAINED}
|
||||
onClick={() => 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 dark:text-white" /> Канал</span>
|
||||
<SendAlt32 class="carbon-icon dark:text-white" />
|
||||
<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,143 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { browser } from '$app/environment';
|
||||
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 Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import TextChip from '$lib/components/Chip/Text.svelte';
|
||||
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import { appStore } from '$lib/utils/store/app';
|
||||
import { Close, Menu } from 'carbon-icons-svelte';
|
||||
import { sideBar } from '$lib/components/Org/store';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { toggleBodyByMode } from '$lib/utils/functions/app';
|
||||
|
||||
export let navClass = '';
|
||||
|
||||
const toggleSidebar = () => {
|
||||
$sideBar.hidden = !$sideBar.hidden;
|
||||
};
|
||||
|
||||
function toggleDarkMode() {
|
||||
$appStore.isDark = !$appStore.isDark;
|
||||
|
||||
toggleBodyByMode($appStore.isDark);
|
||||
if (browser) {
|
||||
localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
|
||||
}
|
||||
}
|
||||
|
||||
function shortenName(name: string) {
|
||||
return name?.substring(0, 2)?.toUpperCase() || '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700 h-[48px]">
|
||||
<ul class="flex w-full items-center">
|
||||
<li class="md:hidden">
|
||||
<IconButton onClick={toggleSidebar}>
|
||||
{#if $sideBar.hidden}
|
||||
<Menu size={16} class=" text-white" />
|
||||
{:else}
|
||||
<Close size={16} class=" text-white" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</li>
|
||||
<div class="">
|
||||
<a
|
||||
href={$page.url.pathname}
|
||||
title="Go to ClassroomIO Home"
|
||||
id="logo"
|
||||
class="text-lg flex items-center"
|
||||
>
|
||||
{#if $currentOrg.avatar_url}
|
||||
<Avatar
|
||||
src={$currentOrg.avatar_url}
|
||||
name={$currentOrg.name}
|
||||
shape="rounded-md"
|
||||
width="w-7"
|
||||
height="h-7"
|
||||
className="mr-2"
|
||||
/>
|
||||
{:else}
|
||||
<TextChip
|
||||
value={shortenName($currentOrg.name)}
|
||||
className="bg-primary-200 font-bold mr-2"
|
||||
/>
|
||||
{/if}
|
||||
<span class="line-clamp-1">
|
||||
{$currentOrg.name}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-grow" />
|
||||
|
||||
<li>
|
||||
<NotificationIcon size={20} class="text-white mr-2" />
|
||||
</li>
|
||||
<li>
|
||||
<IconButton size="small" onClick={toggleDarkMode}>
|
||||
{#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