chore: make layout work for mobile

PupoSDC · Nov 15, 2023 · 1a13a53 · 1a13a53
1 parent 28dd6c9
commit 1a13a53
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 39 deletions.
diff --git a/apps/next-app/pages/modules/atpl/learning-objectives/[learningObjectiveId].page.tsx b/apps/next-app/pages/modules/atpl/learning-objectives/[learningObjectiveId].page.tsx
@@ -92,8 +92,6 @@ export const getServerSideProps = ssrHandler<
     learningObjectiveId,
   });
 
-  console.log("learningObjectiveId", learningObjectiveId);
-
   return {
     props: {
       learningObjectiveId,

diff --git a/libs/content/question-bank-737/migrate/content.test.ts b/libs/content/question-bank-737/migrate/content.test.ts
@@ -8,7 +8,6 @@ describe("validate questions", async () => {
   describe.each(allTemplatesWithId)("%s", async (_, question) => {
     it("passes schema validation", () => {
       expect(questionSchema.parse(question)).toBeTruthy();
-      console.log(questionSchema.parse(question));
     });
   });
 

diff --git a/libs/react/components/src/sidebar/index.ts b/libs/react/components/src/sidebar/index.ts
@@ -1,4 +1,4 @@
 export { Sidebar, useSidebar } from "./sidebar";
 export { SidebarListItem } from "./sidebar-list-item";
-export type { SidebarProps, SidebarRef } from "./sidebar";
+export type { SidebarProps } from "./sidebar";
 export type { SidebarListItemProps } from "./sidebar-list-item";
diff --git a/libs/react/components/src/sidebar/sidebar.tsx b/libs/react/components/src/sidebar/sidebar.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle } from "react";
+import { forwardRef } from "react";
 import { default as ChevronLeftIcon } from "@mui/icons-material/ChevronLeft";
 import {
   Box,
@@ -11,7 +11,6 @@ import {
   listClasses,
   listItemButtonClasses,
   listItemContentClasses,
-  listItemDecoratorClasses,
   useTheme,
 } from "@mui/joy";
 import { create } from "zustand";
@@ -26,12 +25,8 @@ export type SidebarProps = {
   className?: SheetProps["className"];
 };
 
-export type SidebarRef = HTMLDivElement & {
-  toggleDrawer: () => void;
-};
-
 export type SidebarComponent = React.ForwardRefExoticComponent<
-  SidebarProps & React.RefAttributes<SidebarRef>
+  SidebarProps & React.RefAttributes<HTMLDivElement>
 > & {
   css: {
     remainingWidth: string;
@@ -43,6 +38,7 @@ const VAR_SIDEBAR_WIDTH = "--joy-sidebar-width";
 const VAR_SIDEBAR_REMAINING_WIDTH = "--joy-sidebar-remaining-width";
 const SIDEBAR_EXPANDED_WIDTH = 210;
 const SIDEBAR_COLLAPSED_WIDTH = 42;
+const SIDEBAR_MOBILE_COLLAPSED_WIDTH = 24;
 
 const useSidebarStore = create<{
   isMobileOpen: boolean;
@@ -69,32 +65,25 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
     const isOpen = isSmallScreen ? isMobileOpen : isDesktopOpen;
-
-    useImperativeHandle(
-      ref,
-      () =>
-        ({
-          toggleDrawer: () => setMobileOpen(!isMobileOpen),
-        }) as SidebarRef,
-    );
+    const setOpen = isSmallScreen ? setMobileOpen : setDesktopOpen;
 
     return (
       <>
         <GlobalStyles
           styles={{
             body: {
               [theme.breakpoints.up("sm")]: {
+                [VAR_SIDEBAR_REMAINING_WIDTH]: `calc(100vw - var(${VAR_SIDEBAR_WIDTH}))`,
                 [VAR_SIDEBAR_WIDTH]: isDesktopOpen
                   ? `${SIDEBAR_EXPANDED_WIDTH}px`
                   : `${SIDEBAR_COLLAPSED_WIDTH}px`,
-                [VAR_SIDEBAR_REMAINING_WIDTH]: `calc(100vw - var(${VAR_SIDEBAR_WIDTH}))`,
               },
 
               [theme.breakpoints.down("sm")]: {
+                [VAR_SIDEBAR_REMAINING_WIDTH]: `calc(100vw - ${SIDEBAR_MOBILE_COLLAPSED_WIDTH}px)`,
                 [VAR_SIDEBAR_WIDTH]: isMobileOpen
                   ? `${SIDEBAR_EXPANDED_WIDTH}px`
-                  : "0px",
-                [VAR_SIDEBAR_REMAINING_WIDTH]: "100vw",
+                  : `${SIDEBAR_MOBILE_COLLAPSED_WIDTH}px`,
               },
             },
           }}
@@ -118,6 +107,7 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
             flexDirection: "column",
             justifyContent: "space-between",
             zIndex: "modal",
+            overflowX: "hidden",
 
             [`& .${listClasses.root}`]: {
               p: 0,
@@ -129,9 +119,9 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
             },
 
             [`& .${listItemButtonClasses.root}`]: {
-              p: 1,
+              p: { xs: 0.125, sm: 1 },
               borderRight: 0,
-              borderLeft: 4,
+              borderLeftWidth: { xs: 0, sm: 4 },
               borderLeftColor: "transparent",
 
               "&:first-of-type": {
@@ -159,23 +149,24 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
               },
             },
 
-            [`& .${listItemDecoratorClasses.root}`]: {},
-
             ["& .chevron"]: {
               fontSize: 20,
               transitionDuration: "250ms",
-              transform: isOpen ? "rotate(0deg)" : "rotate(-180deg)",
+              transform: {
+                xs: isMobileOpen ? "rotate(0deg)" : "rotate(-180deg)",
+                sm: isDesktopOpen ? "rotate(0deg)" : "rotate(-180deg)",
+              },
             },
 
             ...otherProps.sx,
           }}
         >
-          <List onClick={() => setMobileOpen(false)}>
+          <List onClick={() => isMobileOpen && setMobileOpen(false)}>
             {children}
             <Box sx={{ flex: 1 }} />
             <ListItemButton
               variant="outlined"
-              onClick={() => setDesktopOpen(!isDesktopOpen)}
+              onClick={() => setOpen(!isOpen)}
               className="toggle-button"
             >
               <ListItemDecorator>

diff --git a/libs/react/containers/src/layouts/layout-module-atpl/layout-module-atpl.tsx b/libs/react/containers/src/layouts/layout-module-atpl/layout-module-atpl.tsx
@@ -1,4 +1,4 @@
-import { useRef, type FunctionComponent, useEffect } from "react";
+import { type FunctionComponent, useEffect } from "react";
 import { useRouter } from "next/router";
 import { default as TestIcon } from "@mui/icons-material/FlightTakeoffOutlined";
 import { default as LearningObjectivesIcon } from "@mui/icons-material/ListOutlined";
@@ -10,15 +10,13 @@ import {
   SidebarListItem,
   useThemeSwitcher,
 } from "@chair-flight/react/components";
-import type { SidebarRef } from "@chair-flight/react/components";
 
 export const LayoutModuleAtpl: FunctionComponent<{
   children: React.ReactNode;
   fixedHeight?: boolean;
   noPadding?: boolean;
 }> = ({ children, fixedHeight, noPadding }) => {
   const [, setCurrentTheme] = useThemeSwitcher();
-  const sidebarRef = useRef<SidebarRef>(null);
   const router = useRouter();
   const isQuestions = router.asPath.includes("questions");
   const isTests = router.asPath.includes("tests");
@@ -28,7 +26,7 @@ export const LayoutModuleAtpl: FunctionComponent<{
 
   return (
     <>
-      <Sidebar sx={{ height: "100vh" }} ref={sidebarRef}>
+      <Sidebar sx={{ height: "100vh" }}>
         <SidebarListItem
           href={"/"}
           icon={AppLogo}
@@ -38,9 +36,9 @@ export const LayoutModuleAtpl: FunctionComponent<{
             pl: 0.5,
             svg: {
               fill: (t) => t.palette.primary.plainColor,
-              fontSize: 24,
-              marginLeft: "-2px",
-              marginRight: "2px",
+              fontSize: { xs: 20, sm: 24 },
+              marginLeft: { sm: "-2px" },
+              marginRight: { sm: "2px" },
             },
             [`& .${listItemContentClasses.root}`]: {
               fontWeight: 700,

diff --git a/libs/react/containers/src/layouts/layout-public/layout-public.tsx b/libs/react/containers/src/layouts/layout-public/layout-public.tsx
@@ -6,7 +6,7 @@ import {
 } from "@chair-flight/react/components";
 import type { FunctionComponent, ReactElement } from "react";
 
-const HEADER_HEIGHT = 40;
+const HEADER_HEIGHT = 48;
 const HEIGHT = `calc(100vh - ${HEADER_HEIGHT}px)`;
 
 export type LayoutPublicProps = {

diff --git a/libs/react/containers/src/tests/test-maker/test-maker.tsx b/libs/react/containers/src/tests/test-maker/test-maker.tsx
@@ -132,7 +132,7 @@ export const TestMaker: FunctionComponent<TestMakerProps> = ({
       addTest({ test });
       onSuccessfulTestCreation(test);
     } catch (error) {
-      console.log(error);
+      console.error(error);
       toast.error("Something went wrong while creating the test. 😥");
     }
   });

diff --git a/libs/react/containers/src/tests/test-study/test-study.tsx b/libs/react/containers/src/tests/test-study/test-study.tsx
@@ -86,7 +86,7 @@ export const TestStudy: FunctionComponent<TestStudyProps> = ({
         sx={{
           flexDirection: "row",
           alignItems: "center",
-          justifyContent: "center",
+          justifyContent: { xs: "space-around", sm: "center" },
           backgroundColor: "background.surface",
           borderBottom: "1px solid",
           borderColor: "divider",
@@ -104,6 +104,7 @@ export const TestStudy: FunctionComponent<TestStudyProps> = ({
             p: 0,
             fontSize: { xs: "20px", md: "24px" },
             minWidth: { xs: "24px", md: "32px" },
+            minHeight: { xs: "24px", md: "32px" },
 
             "& svg": {
               fontSize: "inherit",