Merge pull request #232 from COS301-SE-2024/update/students

Update/students

package.json

@@ -0,0 +1 @@
+{ "dependencies": { "@types/three": "^0.168.0" } }

src/global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svelte' {
+	import type { ComponentType } from 'svelte';
+	const component: ComponentType;
+	export default component;
+}

src/package.json

@@ -74,6 +74,7 @@
 		"@threlte/extras": "^8.11.4",
 		"@threlte/xr": "^0.1.4",
 		"@types/canvas-confetti": "^1.6.4",
+		"@types/three": "^0.168.0",
 		"@vercel/analytics": "^1.3.1",
 		"@vercel/speed-insights": "^1.0.12",
 		"aws-sdk": "^2.1670.0",
@@ -86,6 +87,6 @@
 		"stream-chat": "^8.37.0",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-tweakpane-ui": "^1.3.0",
-		"three": "^0.165.0"
+		"three": "^0.168.0"
 	}
 }

src/src/lib/components/common/Header.svelte

@@ -1,3 +1,4 @@
+<!--
 <script>
 	import { Avatar, Navbar, DarkMode } from 'flowbite-svelte';
 	import BreadCrumbs from '$lib/components/common/Breadcrumbs.svelte';
@@ -9,6 +10,8 @@
 
 	$: ({ name, image, maps } = data);
 
+	let isMobile;
+
 	async function updateUserData() {
 		try {
 			const user = await getUserData();
@@ -21,6 +24,16 @@
 
 	onMount(async () => {
 		updateUserData();
+		const checkMobile = () => {
+			isMobile = window.innerWidth < 768;
+		};
+
+		checkMobile();
+		window.addEventListener('resize', checkMobile);
+
+		return () => {
+			window.removeEventListener('resize', checkMobile);
+		};
 	});
 
 	$: {
@@ -30,19 +43,50 @@
 	}
 </script>
 
-<Navbar data-testid="navbar">
-	<BreadCrumbs {maps} />
+<div class="m-4 {isMobile ? 'ml-4' : 'ml-72'}">
+	<Navbar
+		data-testid="navbar"
+		class="glassmorphic rounded-xl bg-white/60 px-4 py-2 shadow-md dark:bg-gray-900/60 transition-all duration-300 ease-in-out"
+	>
+		{#if !isMobile}
+			<BreadCrumbs {maps} />
+		{/if}
 
-	<div class="flex items-center md:order-2">
-		<DarkMode
-			class="mx-2 border text-gray-500 dark:border-gray-800 dark:text-gray-600"
-			data-testid="darkmode"
-		/>
+		<div class="flex items-center md:order-2">
+			<DarkMode
+				class="mx-2 border text-gray-500 dark:border-gray-800 dark:text-gray-600"
+				data-testid="darkmode"
+			/>
 
-		<Avatar id="avatar-menu" src={image} class="mx-2" data-testid="avatar" />
+			<Avatar id="avatar-menu" src={image} class="mx-2" data-testid="avatar" />
 
-		<div class="mx-2">
-			<div class="text-lg font-semibold">{name}</div>
+			{#if !isMobile}
+				<div class="mx-2">
+					<div class="text-lg font-semibold">{name}</div>
+				</div>
+			{/if}
 		</div>
-	</div>
-</Navbar>
+	</Navbar>
+</div>
+
+<style>
+	.glassmorphic {
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+		position: relative;
+		overflow: hidden;
+	}
+
+	.glassmorphic::before {
+		content: "";
+		position: absolute;
+		top: -50%;
+		left: -50%;
+		width: 200%;
+		height: 200%;
+		background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+		transform: rotate(30deg);
+		pointer-events: none;
+	}
+</style>
+-->

src/src/lib/components/common/Navbar.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
+
+	export let role: 'lecturer' | 'admin' | 'student';
+	export let activeUrl = '';
+
+	const navLinks = {
+		admin: [
+			{ name: 'Dashboard', href: '/dashboard' },
+			{ name: 'Announcements', href: '/announcements' },
+			{ name: 'Organisation', href: '/organisation' },
+			{ name: 'Workspaces', href: '/workspaces' },
+			{ name: 'Admins', href: '/admins' },
+			{ name: 'Lecturers', href: '/lecturers' },
+			{ name: 'Students', href: '/students' }
+		],
+		lecturer: [
+			{ name: 'Workspaces', href: '/workspaces' },
+			{ name: 'Announcements', href: '/announcements' }
+		],
+		student: [
+			{ name: 'Dashboard', href: '/dashboard' },
+			{ name: 'Workspaces', href: '/workspaces' },
+			{ name: 'Announcements', href: '/announcements' },
+			{ name: 'Grades', href: '/grades' }
+		]
+	};
+
+	const commonLinks = [
+		{ name: 'Settings', href: '/settings' },
+		{ name: 'FAQ', href: '/faq' }
+	];
+
+	const currentLinks = navLinks[role];
+</script>
+
+<Navbar class="fixed start-0 top-0 z-20 w-full border-b px-2 py-2.5 sm:px-4">
+	<NavBrand href="/">
+		<img src="images/class-connect-logo.png" class="mr-3 h-8 sm:h-10" alt="ClassConnect Logo" />
+		<span
+			class="self-center whitespace-nowrap text-xl font-semibold text-gray-800 transition-colors duration-300 dark:text-white"
+			>ClassConnect</span
+		>
+	</NavBrand>
+	<NavHamburger />
+	<NavUl>
+		{#each currentLinks as { name, href }}
+			<NavLi {href} active={activeUrl === href}>
+				{name}
+			</NavLi>
+		{/each}
+		{#each commonLinks as { name, href }}
+			<NavLi {href} active={activeUrl === href}>
+				{name}
+			</NavLi>
+		{/each}
+	</NavUl>
+</Navbar>

src/src/lib/components/common/Settings.svelte

@@ -44,13 +44,13 @@
 			class="mb-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6 2xl:col-span-2"
 		>
 			<div class="items-center sm:flex sm:space-x-4 xl:block xl:space-x-0 2xl:flex 2xl:space-x-4">
+				<h3 class="mb-4 text-xl font-semibold dark:text-white">Profile Picture</h3>
 				<img
 					class="mb-4 h-28 w-28 rounded-[100px] sm:mb-0 xl:mb-4 2xl:mb-0"
 					src={user.image}
 					alt="profile"
 				/>
 				<div>
-					<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">Profile Picture</h3>
 					<div class="mb-4 text-sm text-gray-500 dark:text-gray-400">
 						JPG, WEBP or PNG. Max size of 1 MB
 					</div>

src/src/lib/components/common/SideBar.svelte

@@ -1,3 +1,4 @@
+<!--
 <script lang="ts">
 	import {
 		GridSolid,
@@ -10,12 +11,31 @@
 		UsersGroupSolid,
 		ChartLineUpOutline,
 		ArrowLeftToBracketOutline,
-		AdjustmentsHorizontalSolid
+		AdjustmentsHorizontalSolid,
+		ObjectsColumnSolid
 	} from 'flowbite-svelte-icons';
 	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
 
 	export let role: 'lecturer' | 'admin' | 'student';
 
+	let isMobile: boolean;
+	let isOpen: boolean = false;
+
+	onMount(() => {
+		const checkMobile = () => {
+			isMobile = window.innerWidth < 768;
+			isOpen = !isMobile;
+		};
+
+		checkMobile();
+		window.addEventListener('resize', checkMobile);
+
+		return () => {
+			window.removeEventListener('resize', checkMobile);
+		};
+	});
+
 	const navLinks = {
 		admin: [
 			{ icon: GridSolid, name: 'Dashboard', href: '/dashboard' },
@@ -45,53 +65,92 @@
 	];
 
 	const currentLinks = navLinks[role];
+
+	function getClasses(href: string) {
+		const baseClasses =
+			'flex items-center rounded-lg px-4 py-3 text-gray-600 transition-all duration-300 hover:bg-green-50 hover:text-green-700 dark:text-gray-300 dark:hover:bg-green-900 dark:hover:text-green-100';
+		const activeClasses =
+			'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100 font-medium';
+		return href === $page.url.pathname ? `${baseClasses} ${activeClasses}` : baseClasses;
+	}
+
+	function toggleSidebar() {
+		isOpen = !isOpen;
+	}
 </script>
 
-<aside
-	class="flex h-screen w-64 flex-col overflow-y-auto border-r bg-primary-100 px-4 py-6 dark:border-gray-700 dark:bg-gray-900 rtl:border-l rtl:border-r-0"
->
-	<a href="/" class="mx-auto mb-6">
-		<div class="flex items-center">
-			<img class="mr-3 h-16 w-16" src="images/class-connect-logo.png" alt="ClassConnect owl logo" />
-			<div class="text-2xl font-semibold text-gray-800 dark:text-gray-300">ClassConnect</div>
-		</div>
-	</a>
-
-	<nav class="flex-1 space-y-2">
-		{#each currentLinks as { icon, name, href }}
-			<a
-				class="flex items-center rounded-lg px-4 py-2 text-gray-600 transition duration-300 hover:bg-primary-300 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-green-400 dark:hover:text-gray-800 {href ===
-				$page.url.pathname
-					? 'active-sidebar dark:text-gray-800'
-					: ''}"
-				{href}
-			>
-				<svelte:component this={icon} class="h-5 w-5" />
-				<span class="ml-4 text-base font-medium">{name}</span>
-			</a>
-		{/each}
-
-		<hr class="my-4 border-gray-300 dark:border-gray-700" />
-
-		{#each commonLinks as { icon, name, href }}
-			<a
-				class="flex items-center rounded-lg px-4 py-2 text-gray-600 transition duration-300 hover:bg-primary-300 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-green-400 dark:hover:text-gray-800 {href ===
-				$page.url.pathname
-					? 'active-sidebar dark:text-gray-800'
-					: ''}"
-				{href}
-			>
-				<svelte:component this={icon} class="h-5 w-5" />
-				<span class="ml-4 text-base font-medium">{name}</span>
-			</a>
-		{/each}
-	</nav>
-
-	<a
-		class="mt-6 flex items-center rounded-lg px-4 py-2 text-gray-600 transition duration-300 hover:bg-primary-300 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-green-400 dark:hover:text-gray-800"
-		href="/signout"
+<div class="relative">
+	<button
+		on:click={toggleSidebar}
+		class="fixed left-4 top-4 z-50 rounded-lg bg-green-500 p-2 text-white shadow-lg md:hidden"
+	>
+		<ObjectsColumnSolid class="h-6 w-6" />
+	</button>
+
+	<aside
+		class="glassmorphic fixed left-0 top-0 z-40 h-[calc(100vh-2rem)] m-4 w-64 transform overflow-y-auto bg-white/60 px-4 py-6 shadow-xl transition-all duration-300 ease-in-out dark:bg-gray-900/60 rounded-xl {isOpen ? 'translate-x-0' : '-translate-x-full'}"
 	>
-		<svelte:component this={ArrowLeftToBracketOutline} class="h-5 w-5" />
-		<span class="ml-4 text-base font-medium">Sign Out</span>
-	</a>
-</aside>
+		<a href="/" class="mx-auto mb-8">
+			<div class="flex items-center">
+				<img
+					class="mr-3 h-10 w-10"
+					src="images/class-connect-logo.png"
+					alt="ClassConnect owl logo"
+				/>
+				<div class="text-xl font-bold text-green-700 dark:text-green-300">ClassConnect</div>
+			</div>
+		</a>
+
+		<nav class="flex-1 space-y-1">
+			{#each currentLinks as { icon, name, href }}
+				<a class={getClasses(href)} {href} on:click={() => (isMobile ? (isOpen = false) : null)}>
+					<svelte:component this={icon} class="mr-3 h-5 w-5" />
+					<span class="text-sm">{name}</span>
+				</a>
+			{/each}
+
+			<hr class="my-6 border-gray-200 dark:border-gray-700" />
+
+			{#each commonLinks as { icon, name, href }}
+				<a class={getClasses(href)} {href} on:click={() => (isMobile ? (isOpen = false) : null)}>
+					<svelte:component this={icon} class="mr-3 h-5 w-5" />
+					<span class="text-sm">{name}</span>
+				</a>
+			{/each}
+		</nav>
+
+		<a
+			class="mt-6 flex items-center rounded-lg px-4 py-3 text-gray-600 transition-all duration-300 hover:bg-red-50 hover:text-red-700 dark:text-gray-300 dark:hover:bg-red-900 dark:hover:text-red-100"
+			href="/signout"
+		>
+			<svelte:component this={ArrowLeftToBracketOutline} class="mr-3 h-5 w-5" />
+			<span class="text-sm font-medium">Sign Out</span>
+		</a>
+	</aside>
+</div>
+
+<style>
+	.glassmorphic {
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+	}
+
+	aside {
+		transition: transform 0.3s ease, backdrop-filter 0.3s ease;
+		position: relative;
+		overflow: hidden;
+	}
+
+	aside::before {
+		content: "";
+		position: absolute;
+		top: -50%;
+		left: -50%;
+		width: 200%;
+		height: 200%;
+		background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+		transform: rotate(30deg);
+		pointer-events: none;
+	}
+</style>
+-->