From de542865801bd233743bb7dd30218dff4e6b07fd Mon Sep 17 00:00:00 2001
From: Uwe Ilgenstein <uwe.ilgenstein@dataport.de>
Date: Wed, 18 Sep 2024 09:55:33 +0200
Subject: [PATCH] BC-7985 - Adapt sidebar active selection to rooms changes
 (#3390)

* implement selective sidebar selection for /rooms/:id

* fix sidebar selection for board

* move sidebar selection to composable

* add/fix tests
---
 src/layouts/LoggedIn.unit.ts                  |  12 +-
 src/modules/data/board/BoardApi.composable.ts |   4 +-
 .../board/BoardPageInformation.composable.ts  |   4 +
 .../BoardPageInformation.composable.unit.ts   |  31 +-
 src/modules/data/room/RoomDetails.state.ts    |  25 --
 src/modules/data/room/RoomDetails.store.ts    |  44 +++
 src/modules/data/room/index.ts                |   2 +-
 src/modules/feature/board/board/Board.unit.ts |   1 +
 src/modules/page/room/RoomDetails.page.vue    |  18 +-
 src/modules/ui/layout/sidebar/Sidebar.unit.ts |   8 +-
 .../sidebar/SidebarCategoryItem.unit.ts       |   7 +
 .../ui/layout/sidebar/SidebarItem.unit.ts     |  20 +-
 src/modules/ui/layout/sidebar/SidebarItem.vue |  27 +-
 .../sidebar/SidebarSelection.composable.ts    |  74 +++++
 .../SidebarSelection.composable.unit.ts       | 302 ++++++++++++++++++
 src/pages/Home.page.vue                       |   1 +
 src/router/routes.ts                          |   5 +
 src/types/board/BoardContext.ts               |   3 +
 18 files changed, 513 insertions(+), 75 deletions(-)
 delete mode 100644 src/modules/data/room/RoomDetails.state.ts
 create mode 100644 src/modules/data/room/RoomDetails.store.ts
 create mode 100644 src/modules/ui/layout/sidebar/SidebarSelection.composable.ts
 create mode 100644 src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
 create mode 100644 src/pages/Home.page.vue
 create mode 100644 src/types/board/BoardContext.ts

diff --git a/src/layouts/LoggedIn.unit.ts b/src/layouts/LoggedIn.unit.ts
index 3b7e538584..d1168afeb6 100644
--- a/src/layouts/LoggedIn.unit.ts
+++ b/src/layouts/LoggedIn.unit.ts
@@ -19,6 +19,8 @@ import { h, nextTick } from "vue";
 import { VApp } from "vuetify/lib/components/index.mjs";
 import LoggedInLayout from "./LoggedIn.layout.vue";
 import { Topbar } from "@ui-layout";
+import { createTestingPinia } from "@pinia/testing";
+import setupStores from "@@/tests/test-utils/setupStores";
 
 jest.mock("vue-router", () => ({
 	useRoute: () => ({ path: "rooms/courses-list" }),
@@ -43,12 +45,20 @@ const setup = () => {
 		},
 	});
 
+	setupStores({
+		envConfigModule: EnvConfigModule,
+	});
+
 	const wrapper = mount(VApp, {
 		slots: {
 			default: h(LoggedInLayout),
 		},
 		global: {
-			plugins: [createTestingVuetify(), createTestingI18n()],
+			plugins: [
+				createTestingVuetify(),
+				createTestingI18n(),
+				createTestingPinia(),
+			],
 			provide: {
 				[AUTH_MODULE_KEY.valueOf()]: authModule,
 				[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
diff --git a/src/modules/data/board/BoardApi.composable.ts b/src/modules/data/board/BoardApi.composable.ts
index e05522f8db..1f8493c72a 100644
--- a/src/modules/data/board/BoardApi.composable.ts
+++ b/src/modules/data/board/BoardApi.composable.ts
@@ -17,6 +17,7 @@ import {
 	CourseRoomsApiFactory,
 	SubmissionContainerElementContentBody,
 } from "@/serverApi/v3";
+import { BoardContextType } from "@/types/board/BoardContext";
 import { AnyContentElement } from "@/types/board/ContentElement";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
@@ -185,7 +186,7 @@ export const useBoardApi = () => {
 		});
 	};
 
-	type ContextInfo = { id: string; name: string };
+	type ContextInfo = { id: string; type: BoardContextType; name: string };
 
 	const getContextInfo = async (
 		boardId: string
@@ -205,6 +206,7 @@ export const useBoardApi = () => {
 		}
 		return {
 			id: roomResponse.data.roomId,
+			type: context.type,
 			name: roomResponse.data.title,
 		};
 	};
diff --git a/src/modules/data/board/BoardPageInformation.composable.ts b/src/modules/data/board/BoardPageInformation.composable.ts
index 5520dd25b0..4612de5f09 100644
--- a/src/modules/data/board/BoardPageInformation.composable.ts
+++ b/src/modules/data/board/BoardPageInformation.composable.ts
@@ -4,6 +4,7 @@ import { createSharedComposable } from "@vueuse/core";
 import { ref, Ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useBoardApi } from "./BoardApi.composable";
+import { BoardContextType } from "@/types/board/BoardContext";
 
 const useBoardPageInformation = () => {
 	const { t } = useI18n();
@@ -20,6 +21,7 @@ const useBoardPageInformation = () => {
 	const pageTitle: Ref<string> = ref(getPageTitle());
 	const roomId: Ref<string | undefined> = ref(undefined);
 	const breadcrumbs: Ref<Breadcrumb[]> = ref([]);
+	const contextType: Ref<BoardContextType | undefined> = ref();
 
 	function getBreadcrumbs(
 		contextInfo: { id: string; name: string } | undefined
@@ -44,12 +46,14 @@ const useBoardPageInformation = () => {
 		const contextInfo = await getContextInfo(id);
 		pageTitle.value = getPageTitle(contextInfo?.name);
 		breadcrumbs.value = getBreadcrumbs(contextInfo);
+		contextType.value = contextInfo?.type;
 		roomId.value = contextInfo?.id;
 	};
 
 	return {
 		createPageInformation,
 		breadcrumbs,
+		contextType,
 		pageTitle,
 		roomId,
 	};
diff --git a/src/modules/data/board/BoardPageInformation.composable.unit.ts b/src/modules/data/board/BoardPageInformation.composable.unit.ts
index fd85ba2585..fdfe1001d7 100644
--- a/src/modules/data/board/BoardPageInformation.composable.unit.ts
+++ b/src/modules/data/board/BoardPageInformation.composable.unit.ts
@@ -2,6 +2,7 @@ import { mountComposable } from "@@/tests/test-utils/mountComposable";
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
 import { useBoardApi } from "./BoardApi.composable";
 import { useSharedBoardPageInformation } from "./BoardPageInformation.composable";
+import { BoardContextType } from "@/types/board/BoardContext";
 
 jest.mock("./BoardApi.composable");
 const mockedUseBoardApi = jest.mocked(useBoardApi);
@@ -36,13 +37,25 @@ describe("BoardPageInformation.composable", () => {
 		const setup = () => {
 			mockedBoardApiCalls.getContextInfo.mockResolvedValue({
 				id: "courseId",
+				type: BoardContextType.Course,
 				name: "Course #1",
 			});
 
-			const { createPageInformation, breadcrumbs, pageTitle, roomId } =
-				mountComposable(() => useSharedBoardPageInformation());
-
-			return { createPageInformation, breadcrumbs, pageTitle, roomId };
+			const {
+				createPageInformation,
+				breadcrumbs,
+				contextType,
+				pageTitle,
+				roomId,
+			} = mountComposable(() => useSharedBoardPageInformation());
+
+			return {
+				createPageInformation,
+				breadcrumbs,
+				contextType,
+				pageTitle,
+				roomId,
+			};
 		};
 
 		it("should return two breadcrumbs: 1. course page and and 2. course-overview page", async () => {
@@ -74,6 +87,16 @@ describe("BoardPageInformation.composable", () => {
 
 			expect(roomId.value).toEqual("courseId");
 		});
+
+		it("should set context type", async () => {
+			const { createPageInformation, contextType } = setup();
+
+			const fakeId = "abc123-2";
+
+			await createPageInformation(fakeId);
+
+			expect(contextType.value).toEqual(BoardContextType.Course);
+		});
 	});
 
 	describe("when board context does not exist", () => {
diff --git a/src/modules/data/room/RoomDetails.state.ts b/src/modules/data/room/RoomDetails.state.ts
deleted file mode 100644
index 58ef05ca6c..0000000000
--- a/src/modules/data/room/RoomDetails.state.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Room } from "@/types/room/Room";
-import { delay } from "@/utils/helpers";
-import { ref } from "vue";
-import { roomsData } from "./rooms-mock-data";
-
-export const useRoomDetailsState = () => {
-	const room = ref<Room | undefined>();
-	const isLoading = ref(true);
-	const isRoom = ref(false);
-
-	const fetchRoom = async (id: string) => {
-		await delay(100);
-		// TODO call API
-		room.value = roomsData.find((r) => r.id === id);
-		isRoom.value = room.value != null;
-		isLoading.value = false;
-	};
-
-	return {
-		fetchRoom,
-		isLoading,
-		isRoom,
-		room,
-	};
-};
diff --git a/src/modules/data/room/RoomDetails.store.ts b/src/modules/data/room/RoomDetails.store.ts
new file mode 100644
index 0000000000..a0dd51c2ac
--- /dev/null
+++ b/src/modules/data/room/RoomDetails.store.ts
@@ -0,0 +1,44 @@
+import { Room } from "@/types/room/Room";
+import { delay } from "@/utils/helpers";
+import { ref } from "vue";
+import { roomsData } from "./rooms-mock-data";
+import { defineStore } from "pinia";
+
+export enum RoomVariant {
+	ROOM = "room",
+	COURSE_ROOM = "courseRoom",
+}
+
+export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
+	const isLoading = ref(true);
+	const room = ref<Room>();
+	const roomVariant = ref<RoomVariant>();
+
+	const fetchRoom = async (id: string) => {
+		await delay(100);
+		// TODO call API
+		room.value = roomsData.find((r) => r.id === id);
+		roomVariant.value =
+			room.value != null ? RoomVariant.ROOM : RoomVariant.COURSE_ROOM;
+		isLoading.value = false;
+	};
+
+	const resetState = () => {
+		isLoading.value = true;
+		room.value = undefined;
+	};
+
+	const deactivateRoom = () => {
+		resetState();
+		isLoading.value = false;
+	};
+
+	return {
+		deactivateRoom,
+		fetchRoom,
+		isLoading,
+		resetState,
+		room,
+		roomVariant,
+	};
+});
diff --git a/src/modules/data/room/index.ts b/src/modules/data/room/index.ts
index e86232bd40..c730814c25 100644
--- a/src/modules/data/room/index.ts
+++ b/src/modules/data/room/index.ts
@@ -1,5 +1,5 @@
 export { useCourseApi } from "./courseApi.composable";
 export { useRoomsState } from "./Rooms.state";
-export { useRoomDetailsState } from "./RoomDetails.state";
+export { useRoomDetailsStore, RoomVariant } from "./RoomDetails.store";
 export { useCourseInfoApi } from "./courseInfoApi.composable";
 export { useCourseList } from "./courseList.composable";
diff --git a/src/modules/feature/board/board/Board.unit.ts b/src/modules/feature/board/board/Board.unit.ts
index 05ee7cd409..8a93c14a6c 100644
--- a/src/modules/feature/board/board/Board.unit.ts
+++ b/src/modules/feature/board/board/Board.unit.ts
@@ -129,6 +129,7 @@ describe("Board", () => {
 		mockedUseSharedBoardPageInformation.mockReturnValue({
 			createPageInformation: jest.fn(),
 			breadcrumbs: ref([]),
+			contextType: ref(),
 			pageTitle: ref("page-title"),
 			roomId: ref("room-id"),
 		});
diff --git a/src/modules/page/room/RoomDetails.page.vue b/src/modules/page/room/RoomDetails.page.vue
index b3e0ef13e8..da5e5abc25 100644
--- a/src/modules/page/room/RoomDetails.page.vue
+++ b/src/modules/page/room/RoomDetails.page.vue
@@ -13,15 +13,18 @@
 <script setup lang="ts">
 import CourseRoomDetailsPage from "@/pages/course-rooms/CourseRoomDetails.page.vue";
 import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
-import { useRoomDetailsState } from "@data-room";
+import { RoomVariant, useRoomDetailsStore } from "@data-room";
 import { RoomDetails } from "@feature-room";
-import { watch } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 
 const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 
 const route = useRoute();
-const { fetchRoom, isLoading, isRoom, room } = useRoomDetailsState();
+const roomDetailsStore = useRoomDetailsStore();
+const { isLoading, room, roomVariant } = storeToRefs(roomDetailsStore);
+const { deactivateRoom, fetchRoom, resetState } = roomDetailsStore;
 
 watch(
 	() => route.params.id,
@@ -29,10 +32,15 @@ watch(
 		if (envConfigModule.getEnv["FEATURE_ROOMS_ENABLED"]) {
 			await fetchRoom(route.params.id as string);
 		} else {
-			isLoading.value = false;
-			isRoom.value = false;
+			deactivateRoom();
 		}
 	},
 	{ immediate: true }
 );
+
+const isRoom = computed(() => roomVariant.value === RoomVariant.ROOM);
+
+onUnmounted(() => {
+	resetState();
+});
 </script>
diff --git a/src/modules/ui/layout/sidebar/Sidebar.unit.ts b/src/modules/ui/layout/sidebar/Sidebar.unit.ts
index a2491bfde1..20d5533fd7 100644
--- a/src/modules/ui/layout/sidebar/Sidebar.unit.ts
+++ b/src/modules/ui/layout/sidebar/Sidebar.unit.ts
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { h, nextTick } from "vue";
+import { h, nextTick, ref } from "vue";
 import { VApp } from "vuetify/lib/components/index.mjs";
 import {
 	createTestingI18n,
@@ -18,11 +18,15 @@ import FilePathsModule from "@/store/filePaths";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { SchulcloudTheme } from "@/serverApi/v3";
 import { envsFactory } from "@@/tests/test-utils";
+import { useSidebarSelection } from "./SidebarSelection.composable";
 
 jest.mock("vue-router", () => ({
 	useRoute: () => ({ path: "rooms/courses-list" }),
 }));
 
+jest.mock("./SidebarSelection.composable");
+const mockedUseSidebarSelection = jest.mocked(useSidebarSelection);
+
 const setup = (permissions?: string[]) => {
 	const authModule = createModuleMocks(AuthModule, {
 		getUserPermissions: permissions,
@@ -43,6 +47,8 @@ const setup = (permissions?: string[]) => {
 		},
 	});
 
+	mockedUseSidebarSelection.mockReturnValue({ isActive: ref(false) });
+
 	const wrapper = mount(VApp, {
 		global: {
 			plugins: [createTestingVuetify(), createTestingI18n()],
diff --git a/src/modules/ui/layout/sidebar/SidebarCategoryItem.unit.ts b/src/modules/ui/layout/sidebar/SidebarCategoryItem.unit.ts
index 2527086313..4b1a036fc7 100644
--- a/src/modules/ui/layout/sidebar/SidebarCategoryItem.unit.ts
+++ b/src/modules/ui/layout/sidebar/SidebarCategoryItem.unit.ts
@@ -5,6 +5,8 @@ import {
 } from "@@/tests/test-utils/setup";
 import SidebarCategoryItem from "./SidebarCategoryItem.vue";
 import { SidebarGroupItem } from "../types";
+import { useSidebarSelection } from "./SidebarSelection.composable";
+import { ref } from "vue";
 
 const groupItem: SidebarGroupItem = {
 	icon: "mdiOpen",
@@ -33,7 +35,12 @@ jest.mock("vue-router", () => ({
 	useRoute: () => ({ path: "rooms/courses-list" }),
 }));
 
+jest.mock("./SidebarSelection.composable");
+const mockedUseSidebarSelection = jest.mocked(useSidebarSelection);
+
 describe("@ui-layout/SidebarCategoryItem", () => {
+	mockedUseSidebarSelection.mockReturnValue({ isActive: ref(false) });
+
 	const setup = (sidebarItem: SidebarGroupItem) => {
 		const wrapper = mount(SidebarCategoryItem, {
 			global: {
diff --git a/src/modules/ui/layout/sidebar/SidebarItem.unit.ts b/src/modules/ui/layout/sidebar/SidebarItem.unit.ts
index 214735df5d..1424ecb846 100644
--- a/src/modules/ui/layout/sidebar/SidebarItem.unit.ts
+++ b/src/modules/ui/layout/sidebar/SidebarItem.unit.ts
@@ -5,6 +5,8 @@ import {
 } from "@@/tests/test-utils/setup";
 import SidebarItem from "./SidebarItem.vue";
 import { SidebarSingleItem } from "../types";
+import { ref } from "vue";
+import { useSidebarSelection } from "./SidebarSelection.composable";
 
 const iconItem: SidebarSingleItem = {
 	icon: "mdiOpen",
@@ -23,8 +25,13 @@ jest.mock("vue-router", () => ({
 	useRoute: () => ({ path: "rooms/courses-list" }),
 }));
 
+jest.mock("./SidebarSelection.composable");
+const mockedUseSidebarSelection = jest.mocked(useSidebarSelection);
+
 describe("@ui-layout/SidebarItem", () => {
 	const setup = (sidebarItem: SidebarSingleItem) => {
+		mockedUseSidebarSelection.mockReturnValue({ isActive: ref(true) });
+
 		const wrapper = mount(SidebarItem, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
@@ -51,7 +58,7 @@ describe("@ui-layout/SidebarItem", () => {
 		expect(wrapper.findComponent(".v-icon").exists()).toBe(false);
 	});
 
-	it("should highlight correct sidebar item", () => {
+	it("should highlight item when selection is active", () => {
 		const { wrapper } = setup({
 			icon: "mdiOpen",
 			title: "title",
@@ -61,15 +68,4 @@ describe("@ui-layout/SidebarItem", () => {
 
 		expect(wrapper.classes()).toContain("v-list-item--active");
 	});
-
-	it("should not highlight wrong sidebar item", () => {
-		const { wrapper } = setup({
-			icon: "mdiOpen",
-			title: "title",
-			testId: "testId",
-			to: "/administration/rooms/new",
-		});
-
-		expect(wrapper.classes()).not.toContain("v-list-item--active");
-	});
 });
diff --git a/src/modules/ui/layout/sidebar/SidebarItem.vue b/src/modules/ui/layout/sidebar/SidebarItem.vue
index 6ac94950bb..b18df650c8 100644
--- a/src/modules/ui/layout/sidebar/SidebarItem.vue
+++ b/src/modules/ui/layout/sidebar/SidebarItem.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 import { SidebarSingleItem } from "../types";
-import { useRoute } from "vue-router";
+import { useSidebarSelection } from "./SidebarSelection.composable";
 
 const props = defineProps({
 	item: {
@@ -31,30 +31,7 @@ const props = defineProps({
 	},
 });
 
-const route = useRoute();
-
-const isActive = computed(() => {
-	const anyCoursePageIsActive =
-		route.path.includes("rooms") &&
-		route.path !== "/rooms" &&
-		!route.path.includes("administration") &&
-		props.item.to === "/rooms/courses-overview";
-
-	if (anyCoursePageIsActive) {
-		return true;
-	}
-
-	const roomsSidebarItem = props.item.to === "/rooms";
-	const isRoomsPageActive = route.path === "/rooms";
-	if (roomsSidebarItem) {
-		return isRoomsPageActive;
-	}
-
-	return (
-		route.path.includes(props.item.to as string) ||
-		route.path.includes(props.item.href as string)
-	);
-});
+const { isActive } = useSidebarSelection(() => props.item);
 
 const density = computed(() => {
 	return props.item.icon ? "default" : "compact";
diff --git a/src/modules/ui/layout/sidebar/SidebarSelection.composable.ts b/src/modules/ui/layout/sidebar/SidebarSelection.composable.ts
new file mode 100644
index 0000000000..4e235e8c9e
--- /dev/null
+++ b/src/modules/ui/layout/sidebar/SidebarSelection.composable.ts
@@ -0,0 +1,74 @@
+import { useRoute } from "vue-router";
+import { SidebarSingleItem } from "../types";
+import {
+	ComputedRef,
+	MaybeRefOrGetter,
+	ref,
+	ShallowRef,
+	toValue,
+	watchEffect,
+} from "vue";
+import { storeToRefs } from "pinia";
+import { RoomVariant, useRoomDetailsStore } from "@data-room";
+import { useSharedBoardPageInformation } from "@data-board";
+import { BoardExternalReferenceType } from "@/serverApi/v3";
+
+export const useSidebarSelection = (
+	sidebarItem:
+		| ComputedRef<SidebarSingleItem>
+		| MaybeRefOrGetter<SidebarSingleItem>
+		| ShallowRef<SidebarSingleItem>
+) => {
+	const route = useRoute();
+	const { roomVariant } = storeToRefs(useRoomDetailsStore());
+	const { contextType } = useSharedBoardPageInformation();
+
+	const isActive = ref(false);
+
+	const isActiveForRoute = (item: SidebarSingleItem) => {
+		// Rooms
+		if (route.name === "rooms") {
+			return item.to === "/rooms";
+		}
+
+		// RoomDetails, CourseRoomDetails
+		if (route.name === "rooms-id") {
+			if (roomVariant.value === RoomVariant.ROOM) {
+				return item.to === "/rooms";
+			} else if (roomVariant.value === RoomVariant.COURSE_ROOM) {
+				return item.to === "/rooms/courses-overview";
+			} else {
+				return false;
+			}
+		}
+
+		// Courses
+		if (
+			route.name === "course-room-list" ||
+			route.name === "course-room-overview"
+		) {
+			return item.to === "/rooms/courses-overview";
+		}
+
+		// Board
+		if (route.name === "boards-id") {
+			return (
+				item.to === "/rooms/courses-overview" &&
+				contextType.value === BoardExternalReferenceType.Course
+			);
+		}
+
+		return (
+			route.path.startsWith(item.to as string) ||
+			route.path.startsWith(item.href as string)
+		);
+	};
+
+	watchEffect(() => {
+		isActive.value = isActiveForRoute(toValue(sidebarItem));
+	});
+
+	return {
+		isActive,
+	};
+};
diff --git a/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts b/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
new file mode 100644
index 0000000000..fa3cffabc3
--- /dev/null
+++ b/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
@@ -0,0 +1,302 @@
+import { RouteLocationNormalized, useRoute } from "vue-router";
+import { SidebarSingleItem } from "../types";
+import { useSidebarSelection } from "./SidebarSelection.composable";
+import { createMock } from "@golevelup/ts-jest";
+import { setActivePinia, storeToRefs } from "pinia";
+import { createTestingPinia } from "@pinia/testing";
+import { useSharedBoardPageInformation } from "@data-board";
+import { ref } from "vue";
+import { RoomVariant, useRoomDetailsStore } from "@data-room";
+import { BoardContextType } from "@/types/board/BoardContext";
+
+jest.mock("vue-router");
+const useRouteMock = <jest.Mock>useRoute;
+
+jest.mock("@data-board/BoardPageInformation.composable");
+const mockedUseSharedBoardPageInformation = jest.mocked(
+	useSharedBoardPageInformation
+);
+
+describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
+	beforeEach(() => {
+		setActivePinia(createTestingPinia());
+		useRouteMock.mockReturnValue(
+			createMock<RouteLocationNormalized>({
+				path: "",
+				name: "",
+			})
+		);
+
+		mockedUseSharedBoardPageInformation.mockReturnValue({
+			createPageInformation: jest.fn(),
+			breadcrumbs: ref([]),
+			contextType: ref(),
+			pageTitle: ref("page-title"),
+			roomId: ref("room-id"),
+		});
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const setup = (routeProps: { path: string; name: string }) => {
+		useRouteMock.mockReturnValue(
+			createMock<RouteLocationNormalized>(routeProps)
+		);
+		const coursesItem: SidebarSingleItem = {
+			title: "courses",
+			testId: "courses-item",
+			to: "/rooms/courses-overview",
+		};
+
+		const roomsItem: SidebarSingleItem = {
+			title: "rooms",
+			testId: "rooms-item",
+			to: "/rooms",
+		};
+
+		const tasksItem: SidebarSingleItem = {
+			title: "tasks",
+			testId: "tasks-item",
+			to: "/tasks",
+		};
+
+		return { coursesItem, tasksItem, roomsItem };
+	};
+
+	describe("general matching", () => {
+		describe("when route path is different from item.to", () => {
+			const setupDifferentPath = () => {
+				return setup({
+					path: "/rooms",
+					name: "rooms",
+				});
+			};
+
+			it("should not be active", () => {
+				const { tasksItem } = setupDifferentPath();
+				const { isActive } = useSidebarSelection(tasksItem);
+
+				expect(isActive.value).toBe(false);
+			});
+		});
+
+		describe("when route path is equal to item.to", () => {
+			const setupEqualPath = () => {
+				return setup({
+					path: "/tasks",
+					name: "tasks",
+				});
+			};
+
+			it("should be active", () => {
+				const { tasksItem } = setupEqualPath();
+				const { isActive } = useSidebarSelection(tasksItem);
+
+				expect(isActive.value).toBe(true);
+			});
+		});
+
+		describe("when route path starts with item.to", () => {
+			const setupEqualPath = () => {
+				return setup({
+					path: "/tasks/0000dcfbfb5c7a3f00bf21ba",
+					name: "task-id",
+				});
+			};
+
+			it("should be active", () => {
+				const { tasksItem } = setupEqualPath();
+				const { isActive } = useSidebarSelection(tasksItem);
+
+				expect(isActive.value).toBe(true);
+			});
+		});
+	});
+
+	describe("rooms item", () => {
+		describe("when rooms route is matched", () => {
+			const setupRoomsRoute = () => {
+				return setup({
+					path: "/rooms",
+					name: "rooms",
+				});
+			};
+
+			it("should be active", () => {
+				const { roomsItem } = setupRoomsRoute();
+				const { isActive } = useSidebarSelection(roomsItem);
+
+				expect(isActive.value).toBe(true);
+			});
+		});
+
+		describe("when room details route is matched", () => {
+			const setupRoomDetailsRoute = () => {
+				return setup({
+					path: "/rooms/0000dcfbfb5c7a3f00bf21ab",
+					name: "rooms-id",
+				});
+			};
+
+			describe("and resource is a room", () => {
+				const setupIsRoom = () => {
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = RoomVariant.ROOM;
+
+					return setupRoomDetailsRoute();
+				};
+
+				it("should be active", () => {
+					const { roomsItem } = setupIsRoom();
+					const { isActive } = useSidebarSelection(roomsItem);
+
+					expect(isActive.value).toBe(true);
+				});
+			});
+
+			describe("and resource is something else", () => {
+				const setupIsOther = () => {
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = undefined;
+
+					return setupRoomDetailsRoute();
+				};
+
+				it("should not be active", () => {
+					const { roomsItem } = setupIsOther();
+					const { isActive } = useSidebarSelection(roomsItem);
+
+					expect(isActive.value).toBe(false);
+				});
+			});
+		});
+	});
+
+	describe("courses item", () => {
+		describe("when course-room-overview route is matched", () => {
+			const setupOverviewRoute = () => {
+				return setup({
+					path: "/rooms/courses-overview",
+					name: "course-room-list",
+				});
+			};
+
+			it("should be active", () => {
+				const { coursesItem } = setupOverviewRoute();
+				const { isActive } = useSidebarSelection(coursesItem);
+
+				expect(isActive.value).toBe(true);
+			});
+		});
+
+		describe("when course-room-list route is matched", () => {
+			const setupListRoute = () => {
+				return setup({
+					path: "/rooms/courses-list",
+					name: "course-room-list",
+				});
+			};
+
+			it("should be active", () => {
+				const { coursesItem } = setupListRoute();
+				const { isActive } = useSidebarSelection(coursesItem);
+
+				expect(isActive.value).toBe(true);
+			});
+		});
+
+		describe("when room details route is matched", () => {
+			const setupRoomDetailsRoute = () => {
+				return setup({
+					path: "/rooms/0000dcfbfb5c7a3f00bf21ab",
+					name: "rooms-id",
+				});
+			};
+
+			describe("and resource is a course room", () => {
+				const setupIsCourseRoom = () => {
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = RoomVariant.COURSE_ROOM;
+
+					return setupRoomDetailsRoute();
+				};
+
+				it("should be active", () => {
+					const { coursesItem } = setupIsCourseRoom();
+					const { isActive } = useSidebarSelection(coursesItem);
+
+					expect(isActive.value).toBe(true);
+				});
+			});
+
+			describe("and resource is something else", () => {
+				const setupIsOther = () => {
+					const { roomVariant } = storeToRefs(useRoomDetailsStore());
+					roomVariant.value = undefined;
+
+					return setupRoomDetailsRoute();
+				};
+
+				it("should not be active", () => {
+					const { coursesItem } = setupIsOther();
+					const { isActive } = useSidebarSelection(coursesItem);
+
+					expect(isActive.value).toBe(false);
+				});
+			});
+		});
+
+		describe("when board details path is matched", () => {
+			const setupBoardDetailsRoute = () => {
+				return setup({
+					path: "/boards/0000dcfbfb5c7a3f00bf21ac",
+					name: "boards-id",
+				});
+			};
+
+			describe("when board context is a course", () => {
+				const setupCourseContext = () => {
+					mockedUseSharedBoardPageInformation.mockReturnValue({
+						createPageInformation: jest.fn(),
+						breadcrumbs: ref([]),
+						contextType: ref(BoardContextType.Course),
+						pageTitle: ref("page-title"),
+						roomId: ref("room-id"),
+					});
+
+					return setupBoardDetailsRoute();
+				};
+
+				it("should be active", () => {
+					const { coursesItem } = setupCourseContext();
+					const { isActive } = useSidebarSelection(coursesItem);
+
+					expect(isActive.value).toBe(true);
+				});
+			});
+
+			describe("when board context is a user", () => {
+				const setupUserContext = () => {
+					mockedUseSharedBoardPageInformation.mockReturnValue({
+						createPageInformation: jest.fn(),
+						breadcrumbs: ref([]),
+						contextType: ref(BoardContextType.User),
+						pageTitle: ref("page-title"),
+						roomId: ref("room-id"),
+					});
+
+					return setupBoardDetailsRoute();
+				};
+
+				it("should not be active", () => {
+					const { coursesItem } = setupUserContext();
+					const { isActive } = useSidebarSelection(coursesItem);
+
+					expect(isActive.value).toBe(false);
+				});
+			});
+		});
+	});
+});
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
new file mode 100644
index 0000000000..b6ef4cc604
--- /dev/null
+++ b/src/pages/Home.page.vue
@@ -0,0 +1 @@
+<template>&nbsp;</template>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 63d50ce3b5..dcfca9e6d0 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -343,4 +343,9 @@ export const routes: Readonly<RouteRecordRaw[]> = [
 		component: async () => (await import("@page-media-shelf")).MediaShelfPage,
 		name: "media-shelf",
 	},
+	{
+		path: "/",
+		component: () => import("@/pages/Home.page.vue"),
+		name: "home",
+	},
 ];
diff --git a/src/types/board/BoardContext.ts b/src/types/board/BoardContext.ts
new file mode 100644
index 0000000000..af7cc578cd
--- /dev/null
+++ b/src/types/board/BoardContext.ts
@@ -0,0 +1,3 @@
+import { BoardExternalReferenceType as BoardContextType } from "@/serverApi/v3";
+
+export { BoardContextType };