Add course side nav with page navigation
This commit is contained in:
Ibitoye Rotimi Best
@@ -0,0 +1,108 @@
|
||||
<script>
|
||||
import { stores, goto } from "@sapper/app";
|
||||
import Expandable from "../../Expandable/index.svelte";
|
||||
import PageNav from "../../PageNav/index.svelte";
|
||||
// export let lectureId;
|
||||
const { page } = stores();
|
||||
|
||||
function handleMainGroupClick(href) {
|
||||
return () => {
|
||||
console.log("goto", href);
|
||||
goto(href);
|
||||
};
|
||||
}
|
||||
|
||||
const lectures = [
|
||||
{
|
||||
title: "Lecture 1",
|
||||
link: "/courses/1/lecture/1",
|
||||
},
|
||||
{
|
||||
title: "Lecture 2",
|
||||
link: "/courses/1/lecture/2",
|
||||
},
|
||||
{
|
||||
title: "Lecture 3",
|
||||
link: "/courses/1/lecture/3",
|
||||
},
|
||||
{
|
||||
title: "Lecture 4",
|
||||
link: "/courses/1/lecture/4",
|
||||
},
|
||||
{
|
||||
title: "Lecture 5",
|
||||
link: "/courses/1/lecture/5",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="React.JS" />
|
||||
<div>
|
||||
<Expandable
|
||||
label="Overview"
|
||||
handleClick={handleMainGroupClick("/courses/1")}
|
||||
isGroupActive={$page.path === "/courses/1"}
|
||||
hideSortIcon
|
||||
/>
|
||||
<Expandable label="Lectures">
|
||||
{#each lectures as lecture}
|
||||
<a
|
||||
class="item {(lecture.link === $page.path ||
|
||||
!$page.path.length > 3) &&
|
||||
'active'} pl-7 py-2"
|
||||
href={lecture.link}
|
||||
>
|
||||
# <span>{lecture.title}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</Expandable>
|
||||
<Expandable
|
||||
label="People"
|
||||
handleClick={handleMainGroupClick("/courses/1/people")}
|
||||
isGroupActive={$page.path === "/courses/1/people"}
|
||||
hideSortIcon
|
||||
/>
|
||||
<Expandable
|
||||
label="Timetable"
|
||||
handleClick={handleMainGroupClick("/courses/1/timetable")}
|
||||
isGroupActive={$page.path === "/courses/1/timetable"}
|
||||
hideSortIcon
|
||||
/>
|
||||
<Expandable
|
||||
label="Scoreboard"
|
||||
handleClick={handleMainGroupClick("/courses/1/score")}
|
||||
isGroupActive={$page.path === "/courses/1/score"}
|
||||
hideSortIcon
|
||||
/>
|
||||
<Expandable
|
||||
label="Home tasks"
|
||||
handleClick={handleMainGroupClick("/courses/1/hometasks")}
|
||||
isGroupActive={$page.path === "/courses/1/hometasks"}
|
||||
hideSortIcon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 250px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #cae2f9;
|
||||
border-left: 3px solid var(--main-primary-color);
|
||||
padding-left: 0.85rem;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background-color: #cae2f9;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import PageNav from "../../PageNav/index.svelte";
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="Home tasks" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
<div>class work</div>
|
||||
@@ -0,0 +1 @@
|
||||
<div>Home workl</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import marked from "marked";
|
||||
import readme from "../readme.js";
|
||||
</script>
|
||||
|
||||
<!-- {@html marked(readme, {
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})} -->
|
||||
|
||||
<iframe
|
||||
title="Lecture"
|
||||
src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
|
||||
frameborder="0"
|
||||
width="960"
|
||||
height="569"
|
||||
allowfullscreen="true"
|
||||
mozallowfullscreen="true"
|
||||
webkitallowfullscreen="true"
|
||||
/>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script>
|
||||
import PageNav from "../../../PageNav/index.svelte";
|
||||
import Classwork from "./Classwork.svelte";
|
||||
import Homework from "./Homework.svelte";
|
||||
import Readme from "./Readme.svelte";
|
||||
|
||||
export let path;
|
||||
export let tab;
|
||||
|
||||
$: console.log("path", path);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<PageNav
|
||||
navItems={[
|
||||
{
|
||||
label: "README.md",
|
||||
isActive: tab === "lectures",
|
||||
href: `${path}?tab=lectures`,
|
||||
},
|
||||
{
|
||||
label: "Class work",
|
||||
isActive: tab === "classwork",
|
||||
href: `${path}?tab=classwork`,
|
||||
},
|
||||
{
|
||||
label: "Hometasks",
|
||||
isActive: tab === "hometasks",
|
||||
href: `${path}?tab=hometasks`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="course">
|
||||
{#if tab === "lectures"}
|
||||
<Readme />
|
||||
{:else if tab === "classwork"}
|
||||
<Classwork />
|
||||
{:else if tab === "hometasks"}
|
||||
<Homework />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import PageNav from "../../PageNav/index.svelte";
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="People" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import PageNav from "../../PageNav/index.svelte";
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="Scoreboard" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import PageNav from "../../PageNav/index.svelte";
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="Time table" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
export default `
|
||||
<p align="center">
|
||||
<a href="https://nextjs.org">
|
||||
<img src="https://assets.vercel.com/image/upload/v1607554385/repositories/next-js/next-logo.png" height="128">
|
||||
<h1 align="center">React.js</h1>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Getting Started
|
||||
|
||||
Visit <a aria-label="next.js learn" href="https://nextjs.org/learn">https://nextjs.org/learn</a> to get started with Next.js.
|
||||
|
||||
## Documentation
|
||||
|
||||
Visit [https://nextjs.org/docs](https://nextjs.org/docs) to view the full documentation.
|
||||
|
||||
## Who is using Next.js?
|
||||
|
||||
Next.js is used by the world's leading companies. Check out the [Next.js Showcase](https://nextjs.org/showcase) to learn more.
|
||||
|
||||
## Community
|
||||
|
||||
The Next.js community can be found on [GitHub Discussions](https://github.com/vercel/next.js/discussions), where you can ask questions, voice ideas, and share your projects.
|
||||
|
||||
To chat with other community members you can join the [Next.js Discord](https://nextjs.org/discord).
|
||||
|
||||
Our [Code of Conduct](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md) applies to all Next.js community channels.
|
||||
|
||||
## Contributing
|
||||
|
||||
Please see our [contributing.md](/contributing.md).
|
||||
|
||||
## Authors
|
||||
|
||||
- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens)) – [Vercel](https://vercel.com/about/timneutkens)
|
||||
- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) – [Vercel](https://vercel.com/about/nkzawa)
|
||||
- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) – [Vercel](https://vercel.com/about/rauchg)
|
||||
- Arunoda Susiripala ([@arunoda](https://twitter.com/arunoda))
|
||||
- Tony Kovanen ([@tonykovanen](https://twitter.com/tonykovanen))
|
||||
- Dan Zajdband ([@impronunciable](https://twitter.com/impronunciable))
|
||||
|
||||
`
|
||||
@@ -0,0 +1,38 @@
|
||||
<script>
|
||||
import marked from "marked";
|
||||
import PageNav from "../PageNav/index.svelte";
|
||||
|
||||
const readme = `
|
||||
# Introduction
|
||||
Welcome to this course, we are glad you made it here
|
||||
|
||||
## What you'l learn
|
||||
|
||||
1. Build powerful, fast, user-friendly and reactive web apps.
|
||||
2. Provide amazing user experiences by leveraging the power of JavaScript with ease.
|
||||
3. Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now.
|
||||
4. Learn all about React Hooks and React Components.
|
||||
`;
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="Overview" />
|
||||
|
||||
<div class="body">
|
||||
{@html marked(readme, {
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.body {
|
||||
max-width: 600px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user