diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(lab)/layout.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(lab)/layout.tsx
index 5fc8b3389..2c83478fe 100644
--- a/src/app/virtual-lab/lab/[virtualLabId]/(lab)/layout.tsx
+++ b/src/app/virtual-lab/lab/[virtualLabId]/(lab)/layout.tsx
@@ -6,12 +6,18 @@ import SimpleErrorComponent from '@/components/GenericErrorFallback';
import VirtualLabTopMenu from '@/components/VirtualLab/VirtualLabTopMenu';
import VirtualLabSidebar from '@/components/VirtualLab/VirtualLabSidebar';
-export default function VirtualLabPageLayout({ children }: { children: ReactNode }) {
+export default function VirtualLabPageLayout({
+ children,
+ params,
+}: {
+ children: ReactNode;
+ params: { virtualLabId: string };
+}) {
return (
-
+
diff --git a/src/components/VirtualLab/VirtualLabSidebar/VirtualLabsSelect.tsx b/src/components/VirtualLab/VirtualLabSidebar/VirtualLabsSelect.tsx
index 0ba69068f..8bae745b5 100644
--- a/src/components/VirtualLab/VirtualLabSidebar/VirtualLabsSelect.tsx
+++ b/src/components/VirtualLab/VirtualLabSidebar/VirtualLabsSelect.tsx
@@ -1,11 +1,17 @@
+'use client';
+
import { ConfigProvider, Select, Spin } from 'antd';
import { LoadingOutlined, SwapOutlined } from '@ant-design/icons';
import { useAtomValue } from 'jotai';
import { loadable } from 'jotai/utils';
+import { usePathname, useRouter } from 'next/navigation';
import { virtualLabOfUserAtom } from '@/state/virtual-lab/lab';
export default function VirtualLabsSelect() {
const virtualLabs = useAtomValue(loadable(virtualLabOfUserAtom));
+ const router = useRouter();
+ const path = usePathname();
+
if (virtualLabs.state === 'loading') {
return } />;
}
@@ -35,8 +41,10 @@ export default function VirtualLabsSelect() {
>
}
- defaultValue="1"
- onChange={() => {}}
+ defaultValue="Switch Virtual Lab"
+ onChange={(selected) => {
+ router.push(`/virtual-lab/lab/${selected}/${path.split('/').reverse()[0]}`);
+ }}
options={virtualLabOptions}
/>
diff --git a/src/components/VirtualLab/VirtualLabSidebar/index.tsx b/src/components/VirtualLab/VirtualLabSidebar/index.tsx
index 425af2447..7ce55b8d1 100644
--- a/src/components/VirtualLab/VirtualLabSidebar/index.tsx
+++ b/src/components/VirtualLab/VirtualLabSidebar/index.tsx
@@ -1,11 +1,34 @@
'use client';
+import { Spin } from 'antd';
import { usePathname } from 'next/navigation';
+import { loadable } from 'jotai/utils';
+import { useAtomValue } from 'jotai';
+import { LoadingOutlined } from '@ant-design/icons';
+
import VirtualLabsSelect from './VirtualLabsSelect';
+import { virtualLabDetailAtomFamily } from '@/state/virtual-lab/lab';
import VerticalLinks, { LinkItem } from '@/components/VerticalLinks';
-export default function VirtualLabSidebar() {
+type Props = {
+ virtualLabId: string;
+};
+
+export default function VirtualLabSidebar({ virtualLabId }: Props) {
const currentPage = usePathname().split('/').pop();
+ const virtualLab = useAtomValue(loadable(virtualLabDetailAtomFamily(virtualLabId)));
+
+ const renderVirtualLabTitle = () => {
+ if (virtualLab.state === 'loading') {
+ return } />;
+ }
+ if (virtualLab.state === 'hasData') {
+ return (
+ {virtualLab.data.name}
+ );
+ }
+ return null;
+ };
const linkItems: LinkItem[] = [
{ key: 'lab', content: 'The Virtual Lab', href: 'lab' },
@@ -32,8 +55,8 @@ export default function VirtualLabSidebar() {
{ key: 'admin', content: 'Admin', href: 'admin' },
];
return (
-
-
Institute of Neuroscience
+
+ {renderVirtualLabTitle()}