BC-7030 - new sidebar (#3439)

* new sidebar component * remove my-materials sidebar item
hpi-schul-cloud · Apr 18, 2024 · 1d463cb · 1d463cb
1 parent e6523a2
commit 1d463cb
Show file tree

Hide file tree

Showing 14 changed files with 612 additions and 49 deletions.
diff --git a/helpers/handlebars/middleware.js b/helpers/handlebars/middleware.js
@@ -6,6 +6,8 @@ const {
 	FEATURE_EXTENSIONS_ENABLED,
 	NOTIFICATION_SERVICE_ENABLED,
 	FEATURE_TEAMS_ENABLED,
+	ALERT_STATUS_URL,
+	SC_THEME,
 } = require('../../config/global');
 
 const makeActive = (items, currentUrl) => {
@@ -89,6 +91,7 @@ module.exports = (req, res, next) => {
 		icon: 'folder-open-outline',
 		link: '/files/',
 		excludedPermission: 'COLLABORATIVE_FILES_ONLY',
+		groupName: 'files',
 		children: [
 			{
 				name: res.$t('global.link.filesPersonal'),
@@ -141,7 +144,7 @@ module.exports = (req, res, next) => {
 			name: res.$t('global.link.lernstore'),
 			testId: 'Lern-Store',
 			icon: // eslint-disable-next-line max-len
-			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.9999 22.9806C10.6635 21.7991 9.19644 20.8886 7.59867 20.2493C6.00091 19.6099 4.36906 19.2903 2.70312 19.2903V8.38377C4.35457 8.38377 5.97263 8.72454 7.5573 9.40607C9.14195 10.0876 10.6228 11.0487 11.9999 12.2892C13.3769 11.0487 14.8578 10.0876 16.4425 9.40607C18.0271 8.72454 19.6452 8.38377 21.2966 8.38377V19.2925C19.6329 19.2925 18.0023 19.6118 16.4048 20.2504C14.8074 20.889 13.3391 21.7991 11.9999 22.9806ZM11.9999 20.5751C13.1173 19.7439 14.2863 19.0718 15.5069 18.5588C16.7276 18.0457 17.9973 17.7084 19.3162 17.5468V10.5599C18.2017 10.7055 17.0317 11.1244 15.8064 11.8164C14.581 12.5084 13.3122 13.4726 11.9999 14.7088C10.6124 13.441 9.32947 12.4742 8.15112 11.8085C6.97276 11.1428 5.82162 10.7266 4.6977 10.5599V17.5468C5.97922 17.6964 7.23257 18.0283 8.45775 18.5427C9.68293 19.057 10.8636 19.7345 11.9999 20.5751ZM12.0802 8.70007C10.9556 8.70007 10.006 8.31357 9.2314 7.54055C8.45675 6.76753 8.06943 5.81735 8.06943 4.69C8.06943 3.56265 8.45496 2.61166 9.22602 1.83702C9.99707 1.06237 10.9449 0.675049 12.0695 0.675049C13.1941 0.675049 14.1437 1.06237 14.9184 1.83702C15.693 2.61166 16.0803 3.56265 16.0803 4.69C16.0803 5.81735 15.6948 6.76753 14.9237 7.54055C14.1527 8.31357 13.2048 8.70007 12.0802 8.70007ZM12.0842 6.87505C12.6903 6.87505 13.206 6.66104 13.6314 6.23302C14.0567 5.80501 14.2694 5.28934 14.2694 4.68602C14.2694 4.08269 14.0536 3.56753 13.622 3.14055C13.1904 2.71357 12.6716 2.50007 12.0655 2.50007C11.4594 2.50007 10.9437 2.7149 10.5184 3.14455C10.093 3.57418 9.88032 4.09066 9.88032 4.69397C9.88032 5.29731 10.0961 5.81166 10.5277 6.23702C10.9593 6.66237 11.4782 6.87505 12.0842 6.87505Z"/></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M0 0h24v24H0V0z" fill="none"/><path fill="currentColor" d="M11.9999 22.9806C10.6635 21.7991 9.19644 20.8886 7.59867 20.2493C6.00091 19.6099 4.36906 19.2903 2.70312 19.2903V8.38377C4.35457 8.38377 5.97263 8.72454 7.5573 9.40607C9.14195 10.0876 10.6228 11.0487 11.9999 12.2892C13.3769 11.0487 14.8578 10.0876 16.4425 9.40607C18.0271 8.72454 19.6452 8.38377 21.2966 8.38377V19.2925C19.6329 19.2925 18.0023 19.6118 16.4048 20.2504C14.8074 20.889 13.3391 21.7991 11.9999 22.9806ZM11.9999 20.5751C13.1173 19.7439 14.2863 19.0718 15.5069 18.5588C16.7276 18.0457 17.9973 17.7084 19.3162 17.5468V10.5599C18.2017 10.7055 17.0317 11.1244 15.8064 11.8164C14.581 12.5084 13.3122 13.4726 11.9999 14.7088C10.6124 13.441 9.32947 12.4742 8.15112 11.8085C6.97276 11.1428 5.82162 10.7266 4.6977 10.5599V17.5468C5.97922 17.6964 7.23257 18.0283 8.45775 18.5427C9.68293 19.057 10.8636 19.7345 11.9999 20.5751ZM12.0802 8.70007C10.9556 8.70007 10.006 8.31357 9.2314 7.54055C8.45675 6.76753 8.06943 5.81735 8.06943 4.69C8.06943 3.56265 8.45496 2.61166 9.22602 1.83702C9.99707 1.06237 10.9449 0.675049 12.0695 0.675049C13.1941 0.675049 14.1437 1.06237 14.9184 1.83702C15.693 2.61166 16.0803 3.56265 16.0803 4.69C16.0803 5.81735 15.6948 6.76753 14.9237 7.54055C14.1527 8.31357 13.2048 8.70007 12.0802 8.70007ZM12.0842 6.87505C12.6903 6.87505 13.206 6.66104 13.6314 6.23302C14.0567 5.80501 14.2694 5.28934 14.2694 4.68602C14.2694 4.08269 14.0536 3.56753 13.622 3.14055C13.1904 2.71357 12.6716 2.50007 12.0655 2.50007C11.4594 2.50007 10.9437 2.7149 10.5184 3.14455C10.093 3.57418 9.88032 4.09066 9.88032 4.69397C9.88032 5.29731 10.0961 5.81166 10.5277 6.23702C10.9593 6.66237 11.4782 6.87505 12.0842 6.87505Z"/></svg>',
 			isExternalIcon: true,
 			link: '/content/',
 			permission: 'LERNSTORE_VIEW',
@@ -237,13 +240,18 @@ module.exports = (req, res, next) => {
 		});
 	}
 
+	res.locals.sidebarItems.push({
+		name: 'divider',
+	});
+
 	res.locals.sidebarItems.push({
 		name: res.$t('global.link.management'),
 		testId: 'Verwaltung',
 		icon: 'cog-outline',
 		link: '/administration/',
 		permission: 'STUDENT_LIST',
 		excludedPermission: 'ADMIN_VIEW',
+		groupName: 'administration',
 		children: teacherChildren,
 	});
 
@@ -254,6 +262,7 @@ module.exports = (req, res, next) => {
 		link: '/administration/',
 		permission: 'TEACHER_LIST',
 		excludedPermission: ['ADMIN_VIEW', 'STUDENT_LIST'],
+		groupName: 'administration',
 		children: teacherChildrenWithoutStudents,
 	});
 
@@ -323,18 +332,10 @@ module.exports = (req, res, next) => {
 		icon: 'cog-outline',
 		link: '/administration/',
 		permission: 'ADMIN_VIEW',
+		groupName: 'administration',
 		children: adminChildItems,
 	});
 
-	// beta user view
-	res.locals.sidebarItems.push({
-		name: res.$t('global.headline.myMaterial'),
-		testId: 'Meine Materialien',
-		icon: 'book',
-		link: '/my-material/',
-		permission: 'BETA_FEATURES',
-	});
-
 	// team feature toggle
 	const teamsEnabled = FEATURE_TEAMS_ENABLED === 'true';
 	if (teamsEnabled) {
@@ -366,6 +367,7 @@ module.exports = (req, res, next) => {
 		testId: 'Hilfebereich',
 		icon: 'help-circle-outline',
 		link: '/help/',
+		groupName: 'help',
 		children: [
 			{
 				name: res.$t('help.headline.helpSection'),
@@ -386,8 +388,84 @@ module.exports = (req, res, next) => {
 				link: 'https://lernen.cloud/',
 				isExternalLink: true,
 			},
+			// new sidebar
+			// {
+			// 	name: res.$t("lib.help_menu.link.releaseNotes"),
+			// 	link: "/help/releases",
+			// 	testId: "releases",
+			// },
 		],
 	});
+
+	// new sidebar
+
+	// system group
+	let systemLinks = [{
+		name: res.$t("lib.global.link.github"),
+		link: "https://github.com/hpi-schul-cloud",
+		testId: "github",
+		isExternalLink: true,
+	}]
+
+	if (ALERT_STATUS_URL) {
+		systemLinks.push({
+			link: ALERT_STATUS_URL,
+			name: res.$t("lib.global.link.status"),
+			testId: "status",
+			isExternalLink: true,
+		});
+	}
+	if (SC_THEME === "default") {
+		systemLinks.push({
+			link: "/security",
+			name: res.$t("lib.global.link.safety"),
+			testId: "security",
+		});
+	}
+
+	// res.locals.sidebarItems.push(
+	// 	{
+	// 		name: res.$t("global.sidebar.link.system"),
+	// 		icon: "application-brackets-outline",
+	// 		testId: "system",
+	// 		groupName: "system",
+	// 		children: systemLinks,
+	// 	}
+	// );
+
+	// a11y group
+	let a11yLinks = [];
+	if (Configuration.get("ACCESSIBILITY_REPORT_EMAIL")) {
+		a11yLinks.push({
+			link:
+				"mailto:" +
+				Configuration.get("ACCESSIBILITY_REPORT_EMAIL") +
+				"?subject=" +
+				"global.link.accessibilityReport",
+			name: res.$t("lib.global.link.accessibilityReport"),
+			testId: "report-accessibility",
+			isExternalLink: true,
+		});
+	}
+	a11yLinks.push({
+		link: res.locals.theme.documents.specificFiles.accessibilityStatement,
+		name: res.$t("lib.global.link.accessibilityStatement"),
+		testId: "accessibility-statement",
+		isExternalLink: true,
+	});
+
+	// if (SC_THEME !== "default") {
+	// 	res.locals.sidebarItems.push({
+	// 		name: res.$t("global.sidebar.link.accessibility"),
+	// 		icon: "human",
+	// 		testId: "accessibility",
+	// 		groupName: "accessibility",
+	// 		children: a11yLinks,
+	// 	})
+	// }
+
+	// end new sidebar
+
 	makeActive(res.locals.sidebarItems, url.parse(req.url).pathname);
 
 	let notificationsPromise = [];

diff --git a/locales/de.json b/locales/de.json
@@ -1694,8 +1694,8 @@
 			"courseDataContent": "Hier findest du alle Dateien, die in den jeweiligen Kursen im Unterricht verwendet werden. Alle Teilnehmer:innen des Kurses, also die Lehrkraft und die Schüler:innen, haben auf diese Dateien Zugriff.",
 			"files": "Dateien",
 			"filesContent": "Hier findest du alle Dateien, die in den jeweiligen Teams verwendet werden. Alle Teilnehmer:innen des Teams haben auf diese Dateien Zugriff.",
-			"filesPersonal": "persönliche Dateien",
-			"filesShared": "geteilte Dateien",
+			"filesPersonal": "Persönliche Dateien",
+			"filesShared": "Geteilte Dateien",
 			"firstSteps": "Erste Schritte",
 			"footerSkipLink": "Zum Footer wechseln",
 			"helpArea": "Hilfebereich",
@@ -1751,6 +1751,8 @@
 				"administration": "Administration",
 				"administrationClasses": "Klassen",
 				"administrationCourses": "Kurse",
+				"system": "System",
+				"accessibility": "Barrierefreiheit",
 				"mediaShelf": "Medienregal"
 			}
 		},
@@ -2434,7 +2436,8 @@
 				"printQrCode": "QR-Code drucken",
 				"qrCode": "QR-Code",
 				"search": "Suche",
-				"thereIsAProblem": "Es gibt ein Problem"
+				"thereIsAProblem": "Es gibt ein Problem",
+				"sidebarMenu": "Seitennavigation öffnen"
 			},
 			"tab_label": {
 				"settings": "Einstellungen",

diff --git a/locales/en.json b/locales/en.json
@@ -1694,8 +1694,8 @@
 			"courseDataContent": "Here you will find all files used in the respective courses in class. All participants of the course, i.e. the teacher and the students, have access to these files.",
 			"files": "Files",
 			"filesContent": "Here you can find all files used in the respective teams. All participants of the team have access to these files.",
-			"filesPersonal": "personal files",
-			"filesShared": "shared files",
+			"filesPersonal": "Personal Files",
+			"filesShared": "Shared Files",
 			"firstSteps": "First steps",
 			"footerSkipLink": "Skip to footer",
 			"helpArea": "Help section",
@@ -1751,6 +1751,8 @@
 				"administration": "Administration",
 				"administrationClasses": "Classes",
 				"administrationCourses": "Courses",
+				"system": "System",
+				"accessibility": "Accessibility",
 				"mediaShelf": "Media shelf"
 			}
 		},
@@ -2434,7 +2436,8 @@
 				"printQrCode": "Print QR code",
 				"qrCode": "QR-Code",
 				"search": "Search",
-				"thereIsAProblem": "There is a problem"
+				"thereIsAProblem": "There is a problem",
+				"sidebarMenu": "Open side navigation"
 			},
 			"tab_label": {
 				"settings": "Settings",

diff --git a/locales/es.json b/locales/es.json
@@ -1694,8 +1694,8 @@
 			"courseDataContent": "Aquí encontrarás todos los archivos utilizados en los respectivos cursos de la clase. Todos los participantes del curso, es decir, tanto el profesor como los alumnos, tienen acceso a estos archivos.",
 			"files": "Archivos",
 			"filesContent": "Aquí puedes encontrar todos los archivos utilizados en los respectivos equipos. Todos los participantes del equipo tienen acceso a estos archivos.",
-			"filesPersonal": "archivos personales",
-			"filesShared": "archivos compartidos",
+			"filesPersonal": "Archivos personales",
+			"filesShared": "Archivos compartidos",
 			"firstSteps": "Primeros pasos",
 			"footerSkipLink": "Saltar al pie de página",
 			"helpArea": "Sección de ayuda",
@@ -1751,6 +1751,8 @@
 				"administration": "Administración",
 				"administrationClasses": "Clases",
 				"administrationCourses": "Cursos",
+				"system": "Sistema",
+				"accessibility": "Accesibilidad",
 				"mediaShelf": "Estante multimedia"
 			}
 		},
@@ -2434,7 +2436,8 @@
 				"printQrCode": "Imprimir código QR",
 				"qrCode": "Código QR",
 				"search": "Buscar",
-				"thereIsAProblem": "Hay un problema"
+				"thereIsAProblem": "Hay un problema",
+				"sidebarMenu": "Abrir navegación lateral"
 			},
 			"tab_label": {
 				"settings": "Configuración",

diff --git a/locales/uk.json b/locales/uk.json
@@ -187,8 +187,8 @@
 			"calendar": "Календар",
 			"contact": "Контакт",
 			"files": "Файли",
-			"filesPersonal": "персональні файли",
-			"filesShared": "поширені файли",
+			"filesPersonal": "Особисті файли",
+			"filesShared": "Спільні файли",
 			"firstSteps": "Перші кроки",
 			"footerSkipLink": "Нижній колонтитул",
 			"helpArea": "Довідковий розділ",
@@ -253,6 +253,8 @@
 				"administrationClasses": "Класи",
 				"administrationCourses": "Курси",
 				"administration": "Адміністрація",
+				"system": "Cистема",
+				"accessibility": "Доступність",
 				"mediaShelf": "Полиця для медіа"
 			}
 		},
@@ -2621,7 +2623,8 @@
 				"printQrCode": "Видрукувати QR-код",
 				"notifications": "Сповіщення",
 				"currentUser": "Поточний користувач:",
-				"search": "Пошук"
+				"search": "Пошук",
+				"sidebarMenu": "Відкрити бічну навігацію"
 			},
 			"aria_label": {
 				"mobileNavMenu": "Меню мобільної навігації"