feat: improve mobile navigation (#85)

libs/react/components/src/app-buttons/app-buttons.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { default as ChevronLeftIcon } from "@mui/icons-material/ChevronLeft";
 import { default as DarkModeIcon } from "@mui/icons-material/DarkMode";
 import { default as GithubIcon } from "@mui/icons-material/GitHub";
@@ -72,15 +71,8 @@ export const ThemeButton: FunctionComponent<IconButtonProps> = (props) => {
 };
 
 export const BackButton: FunctionComponent<IconButtonProps> = (props) => {
-  const { back } = useRouter();
-
-  const onClick: IconButtonProps["onClick"] = (e) => {
-    props.onClick?.(e);
-    back();
-  };
-
   return (
-    <StyledButton {...props} onClick={onClick}>
+    <StyledButton {...props}>
       <ChevronLeftIcon />
     </StyledButton>
   );

libs/react/containers/src/layouts/layout-module/layout-module.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { NoSsr } from "@mui/base";
 import { default as HomeIcon } from "@mui/icons-material/ConnectingAirportsOutlined";
 import { default as TestIcon } from "@mui/icons-material/FlightTakeoffOutlined";
 import { default as LearningObjectivesIcon } from "@mui/icons-material/ListOutlined";
@@ -13,16 +14,17 @@ import {
   Stack,
   Typography,
   listItemContentClasses,
+  useTheme,
 } from "@mui/joy";
 import {
   AppLogo,
-  BackButton,
   GithubButton,
   HamburgerButton,
   Sidebar,
   SidebarListItem,
   ThemeButton,
   ThemeOverrideColorScheme,
+  useMediaQuery,
   useSidebar,
 } from "@chair-flight/react/components";
 import { trpc } from "@chair-flight/trpc/client";
@@ -62,6 +64,8 @@ export const LayoutModule = container<Props, Params, Data>(
     const { openSidebar } = useSidebar();
     const router = useRouter();
     const config = LayoutModule.useData({ questionBank });
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
     const isQuestions = router.asPath.includes("questions");
     const isTests = router.asPath.includes("tests");
@@ -75,6 +79,10 @@ export const LayoutModule = container<Props, Params, Data>(
       !isFlashcards &&
       !isLearningObjectives;
 
+    const secondToLastBreadcrumb = breadcrumbs?.at(-2);
+    const lastBreadcrumb = breadcrumbs?.at(-1);
+
+    console.log(secondToLastBreadcrumb);
     return (
       <>
         <ThemeOverrideColorScheme questionBank={questionBank} />
@@ -171,15 +179,21 @@ export const LayoutModule = container<Props, Params, Data>(
             right: 0,
           }}
         >
-          <Breadcrumbs separator="›" sx={{ ml: 2, display: ["none", "flex"] }}>
-            {breadcrumbs?.slice(0, -1).map(([name, url]) => (
-              <Link key={url} color="neutral" href={url}>
-                {name}
-              </Link>
-            ))}
-            {breadcrumbs && <Typography>{breadcrumbs?.at(-1)}</Typography>}
-          </Breadcrumbs>
-          <BackButton sx={{ ml: 2, display: ["flex", "none"] }} />
+          <NoSsr>
+            <Breadcrumbs separator="›" sx={{ ml: 2 }}>
+              {isMobile && secondToLastBreadcrumb && (
+                <Link href={secondToLastBreadcrumb[1]}>•••</Link>
+              )}
+              {!isMobile &&
+                breadcrumbs?.slice(0, -1).map(([name, url]) => (
+                  <Link key={url} color="neutral" href={url}>
+                    {name}
+                  </Link>
+                ))}
+              {lastBreadcrumb && <Typography>{lastBreadcrumb}</Typography>}
+            </Breadcrumbs>
+          </NoSsr>
+
           <GithubButton sx={{ ml: "auto" }} />
           <ThemeButton />
           <HamburgerButton

libs/react/containers/src/questions/question-search/question-search.tsx

@@ -97,9 +97,8 @@ export const QuestionSearch = container<Props, Params, Data>(
         <Stack
           direction="row"
           sx={{
-            mb: 2,
+            mb: { xs: 1, sm: 2 },
             gap: 1,
-
             [`& .${selectClasses.root}`]: {
               display: { xs: "none", md: "flex" },
               width: "13em",