Added some basic pages

frontend/src/app/courses/[courseCode]/course-profile/page.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { Course } from '@/types';
+
+export default function CourseProfile({ params }: { params: { courseCode: string }}) {
+    const course: Course = useMemo(() => {
+        // query backend here
+        return {
+            coursecode: params.courseCode.toUpperCase(),
+            coursename: 'Course Name',
+            coursedescription: 'Some sort of description'
+        }
+    }, [params.courseCode])
+
+    return (
+        <main>
+            <h1>{course.coursename}</h1>
+            <h2>{course.coursecode}</h2>
+            <h2>{course.coursedescription}</h2>
+        </main>
+    );
+}

frontend/src/app/courses/[courseCode]/exams/[examId]/page.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+
+export default function Exam({ params }: { params: { courseCode: string, examId: number }}) {
+    const exam = useMemo(() => {
+        // query backend here
+        return {
+            examid: params.examId,
+            examyear: 2023,
+            examsemester: 1,
+            examtype: 'Final'
+        }
+    }, [params.examId])
+
+    return (
+        <main>
+            <h1>{`${params.courseCode} ${exam.examtype}`}</h1>
+            <h2>{`${exam.examyear} Semester ${exam.examsemester}`}</h2>
+            There will be some questions here
+        </main>
+    );
+}

frontend/src/app/courses/[courseCode]/exams/page.tsx

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { Course } from '@/types';
+
+export default function Exams({ params }: { params: { courseCode: string }}) {
+    const course: Course = useMemo(() => {
+        // query backend here
+        return {
+            coursecode: params.courseCode.toUpperCase(),
+            coursename: 'Course Name',
+            coursedescription: 'Some sort of description'
+        }
+    }, [params.courseCode])
+
+    return (
+        <main>
+            <h1>Exams for {course.coursecode}</h1>
+            There will be some cards here
+        </main>
+    );
+}

frontend/src/app/courses/[courseCode]/notes/page.tsx

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { Course } from '@/types';
+
+export default function Notes({ params }: { params: { courseCode: string }}) {
+    const course: Course = useMemo(() => {
+        // query backend here
+        return {
+            coursecode: params.courseCode.toUpperCase(),
+            coursename: 'Course Name',
+            coursedescription: 'Some sort of description'
+        }
+    }, [params.courseCode])
+
+    return (
+        <main>
+            <h1>Study material for {course.coursecode}</h1>
+            There will be some cards here
+        </main>
+    );
+}

frontend/src/components/Navigation.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react';
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation';
 import clsx from 'clsx'
 import { AnimatePresence, motion, useIsPresent } from 'framer-motion'
 
@@ -33,7 +33,7 @@ function TopLevelNavItem({
   children: React.ReactNode
 }) {
   return (
-    <li className="md:hidden">
+    <li>
       <Link
         href={href}
         className="block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
@@ -239,13 +239,25 @@ export const navigation: Array<NavGroup> = [
 ]
 
 export function Navigation(props: React.ComponentPropsWithoutRef<'nav'>) {
+  const {courseCode} = useParams<{courseCode: string}>()
+
+  const sideNavigation: Array<NavGroup> = useMemo(() => [
+    {
+      title: `Exams`,
+      links: [
+        { title: '2023 S1', href: `/courses/${courseCode}/exams/1` },
+        { title: '2022 S1', href: `/courses/${courseCode}/exams/2` },
+        { title: '2021 S1', href: `/courses/${courseCode}/exams/3` },
+      ],
+    },
+  ], [courseCode])
+
   return (
     <nav {...props}>
       <ul role="list">
-        <TopLevelNavItem href="/">API</TopLevelNavItem>
-        <TopLevelNavItem href="#">Documentation</TopLevelNavItem>
-        <TopLevelNavItem href="#">Support</TopLevelNavItem>
-        {navigation.map((group, groupIndex) => (
+        <TopLevelNavItem href={`/courses/${courseCode}/course-profile`}>Course Profile</TopLevelNavItem>
+        <TopLevelNavItem href={`/courses/${courseCode}/notes`}>Notes</TopLevelNavItem>
+        {sideNavigation.map((group, groupIndex) => (
           <NavigationGroup
             key={group.title}
             group={group}

frontend/src/types.ts

@@ -0,0 +1,5 @@
+export type Course = {
+    coursecode: string
+    coursename: string
+    coursedescription: string
+}