Merge pull request #232 from mp-access/lecturer-better-navigation

Better navigation for lecture examples

Author: sealexan

public/locales/de/translation.json

@@ -70,5 +70,6 @@
   "feedback_info": "Feedback wird nach Ablauf der Zeit bereitgestellt.",
   "no_bookmarks": "Es wurden noch keine Lesezeichen gesetzt.",
   "submission_processing": "Abgabe wird verarbeitet",
-  "feedback_soon": "Feedback wird bald verfügbar sein"
+  "feedback_soon": "Feedback wird bald verfügbar sein",
+  "View Task": "Aufgabe"
 }

src/index.tsx

@@ -139,22 +139,21 @@ function App() {
                     { index: true, element: <Examples /> },
                     {
                       path: ":exampleSlug",
-                      handle: t("Example"),
                       children: [
                         { index: true, element: <Task type="example" /> },
+                        {
+                          element: <Task type="example" />,
+                        },
                         {
                           path: "private-dashboard",
-                          handle: t("Private Dashboard"), // add this in translation.json
                           element: <PrivateDashboard />,
                         },
                         {
                           path: "public-dashboard",
-                          handle: t("Public Dashboard"), // add this in translation.json
                           children: [
                             { index: true, element: <PublicDashboard /> },
                             {
                               path: "inspect/users/:base64EncodedUserId",
-                              handle: "Inspect",
                               element: <Task type="example" />,
                             },
                           ],

src/pages/Layout.tsx

@@ -162,7 +162,7 @@ export const CourseNav: React.FC<{
   const { i18n, t } = useTranslation()
   const currentLanguage = i18n.language
   const matches = useMatches()
-  const { courseSlug, taskSlug } = useParams()
+  const { courseSlug, taskSlug, exampleSlug } = useParams()
   const { data: course } = useCourse()
   const { data: assignment } = useAssignment()
   const task = assignment?.tasks.find((task) => task.slug === taskSlug)
@@ -225,6 +225,54 @@ export const CourseNav: React.FC<{
                   isDisabled={disableNavigation}
                 />
               ))}
+            {exampleSlug && isAssistant && (
+              <>
+                <Button
+                  key={"private-dashboard"}
+                  as={Link}
+                  ml={2}
+                  size="sm"
+                  children={t("Private Dashboard")}
+                  variant="ghost"
+                  isActive={
+                    location.pathname.split("/").pop() === "private-dashboard"
+                  }
+                  to={resolvePath(
+                    `${exampleSlug}/private-dashboard`,
+                    match.pathname,
+                  )}
+                  isDisabled={disableNavigation}
+                />
+                <Button
+                  key={"public-dashboard"}
+                  as={Link}
+                  size="sm"
+                  children={t("Public Dashboard")}
+                  variant="ghost"
+                  isActive={
+                    location.pathname.split("/").pop() === "public-dashboard"
+                  }
+                  to={resolvePath(
+                    `${exampleSlug}/public-dashboard`,
+                    match.pathname,
+                  )}
+                  isDisabled={disableNavigation}
+                />
+                <Button
+                  key={"view-task"}
+                  as={Link}
+                  size="sm"
+                  children={t("View Task")}
+                  variant="ghost"
+                  isActive={
+                    location.pathname.split("/").pop() === exampleSlug ||
+                    location.pathname.includes("inspect")
+                  }
+                  to={resolvePath(`${exampleSlug}`, match.pathname)}
+                  isDisabled={disableNavigation}
+                />
+              </>
+            )}
           </BreadcrumbItem>
         ))}
     </Breadcrumb>