feat: course types - self paced and live class (#309)
* working on the course type * trying to mark it persist * almost done here * fixed sendig emtpy options bug * created migration file * created migration file * made updates based on PR review * merge * update course type card * add redirect logic with classroomio.com/new * make new course modal only open/close with url * feat: page active state (#315) * finished the active link state * updated the active link state based on review * simplify code --------- Co-authored-by: Rotimi Best <best@classroomio.com> * add type to course card --------- Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Em_Dev
@@ -1,4 +1,4 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
|
||||
import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
|
||||
import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
|
||||
@@ -7,9 +7,11 @@
|
||||
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
|
||||
import CourseIcon from '$lib/Icons/CourseIcon.svelte';
|
||||
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
let showsubNav = false;
|
||||
let showNav = false;
|
||||
let activeLink = '';
|
||||
|
||||
function handleShow() {
|
||||
showsubNav = !showsubNav;
|
||||
@@ -23,7 +25,7 @@
|
||||
{
|
||||
key: 'coursemanagement',
|
||||
title: 'Course Management',
|
||||
subtitle: 'Simple course management tools '
|
||||
subtitle: 'Simple course management tools'
|
||||
},
|
||||
{
|
||||
key: 'ai',
|
||||
@@ -41,6 +43,10 @@
|
||||
subtitle: 'Seamlessly collaborate with your students'
|
||||
}
|
||||
];
|
||||
|
||||
$: activeLink = $page.url.pathname;
|
||||
$: activeHash = $page.url.hash;
|
||||
$: isSuperpowersActive = superpowers.some((sp) => activeHash.includes(sp.key));
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -62,20 +68,25 @@
|
||||
|
||||
<nav class="w-[40%] hidden md:hidden lg:block">
|
||||
<ul class="flex items-center justify-between w-full gap-2">
|
||||
<!-- -->
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
|
||||
<button class="flex items-center" on:click={() => (showNav = !showNav)}
|
||||
>Our Superpowers <ChevronDown class="ml-2" /></button
|
||||
<button
|
||||
class="flex items-center hover:bg-gray-100 px-4 py-2 rounded-md"
|
||||
on:click={() => (showNav = !showNav)}
|
||||
class:active={isSuperpowersActive}
|
||||
>
|
||||
Our Superpowers <ChevronDown class="ml-2" />
|
||||
</button>
|
||||
{#if showNav}
|
||||
<div
|
||||
class="absolute w-[24rem] top-10 -left-10 border px-5 py-5 rounded-[30px] shadow-slate-700 z-[3001] bg-white"
|
||||
>
|
||||
{#each superpowers as superpower}
|
||||
<a
|
||||
class="flex justify-between items-center w-full rounded-lg hover:bg-slate-100 p-5 mb-4"
|
||||
class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 p-5 mb-4"
|
||||
href="/#{superpower.key}"
|
||||
on:click={() => (showNav = !showNav)}
|
||||
on:click={() => {
|
||||
showNav = !showNav;
|
||||
}}
|
||||
>
|
||||
{#if superpower.key === 'coursemanagement'}
|
||||
<CourseIcon />
|
||||
@@ -99,31 +110,33 @@
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
<!-- More Features -->
|
||||
<!-- <a href="/#morefeatures">
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer">More features</li>
|
||||
</a> -->
|
||||
<!-- Pricing -->
|
||||
<a href="/pricing">
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li>
|
||||
<a
|
||||
href="/pricing"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Pricing</li>
|
||||
</a>
|
||||
<!-- Docs -->
|
||||
<a href="/docs" target="_blank">
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Docs</li>
|
||||
<a
|
||||
href="/docs"
|
||||
target="_blank"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/docs')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Docs</li>
|
||||
</a>
|
||||
<!-- Blog -->
|
||||
<a href="/blog">
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Blog</li>
|
||||
|
||||
<a
|
||||
href="/blog"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/blog')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Blog</li>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="justify-between items-center flex-row hidden md:hidden lg:flex">
|
||||
<!-- <button
|
||||
class="bg-blue-700 text-white text-sm font-medium px-4 py-1.5 rounded-md mr-5"
|
||||
>
|
||||
Sign Up
|
||||
</button> -->
|
||||
<a href="/discord" target="_blank">
|
||||
<img
|
||||
loading="lazy"
|
||||
@@ -155,7 +168,6 @@
|
||||
on:click={handleShowNav}><TextAlignJustify size={24} /></button
|
||||
>
|
||||
|
||||
<!-- burger menu -->
|
||||
{#if showNav}
|
||||
<div
|
||||
in:fly={{ x: 20, duration: 700 }}
|
||||
@@ -173,20 +185,25 @@
|
||||
/>
|
||||
<button on:click={handleShowNav}><CloseLarge size={24} class="mr-5" /></button>
|
||||
</div>
|
||||
<nav class="">
|
||||
<nav>
|
||||
<ul class="flex items-center flex-col lg:flex-row justify-between w-full">
|
||||
<!-- -->
|
||||
<li class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer w-full">
|
||||
<button
|
||||
class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg"
|
||||
on:click={handleShow}
|
||||
class:active={isSuperpowersActive}
|
||||
>
|
||||
Our Superpowers <ChevronDown />
|
||||
</button>
|
||||
{#if showsubNav}
|
||||
<div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
|
||||
{#each superpowers as superpower}
|
||||
<a href="/#{superpower.key}" on:click={handleShowNav}>
|
||||
<a
|
||||
href="/#{superpower.key}"
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
}}
|
||||
>
|
||||
<p
|
||||
class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5"
|
||||
>
|
||||
@@ -197,36 +214,43 @@
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
<!-- Pricing -->
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
|
||||
on:click={handleShowNav}
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
}}
|
||||
href="/pricing"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
>
|
||||
<li>Pricing</li>
|
||||
</a>
|
||||
<!-- Docs -->
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
|
||||
on:click={handleShowNav}
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
}}
|
||||
class:active={activeLink.startsWith('/docs')}
|
||||
href="/docs"
|
||||
target="_blank"
|
||||
>
|
||||
<li>Docs</li>
|
||||
</a>
|
||||
|
||||
<!-- Blog -->
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
|
||||
on:click={handleShowNav}
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
}}
|
||||
class:active={activeLink.startsWith('/blog')}
|
||||
href="/blog"
|
||||
>
|
||||
<li>Blog</li>
|
||||
</a>
|
||||
<!-- More Features -->
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
|
||||
on:click={handleShowNav}
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
}}
|
||||
class:active={activeHash.includes('morefeatures')}
|
||||
href="/#morefeatures"
|
||||
>
|
||||
<li>More features</li>
|
||||
@@ -234,10 +258,6 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="flex items-start flex-col gap-y-2 mt-5 border-t-[1px] pt-5">
|
||||
<!-- <button
|
||||
class="text-black font-semibold rounded-md mr-10 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
|
||||
>Sign Up</button
|
||||
> -->
|
||||
<a
|
||||
href="/discord"
|
||||
target="_blank"
|
||||
@@ -274,3 +294,10 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.active {
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user