feat: responsive exercise forms

mok-it · Dec 28, 2024 · fae2efd · fae2efd
1 parent ec7b4a4
commit fae2efd
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 28 deletions.
diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -1,20 +1,33 @@
-import { Box, Stack } from "@mui/material";
+import { Box, IconButton, Stack } from "@mui/material";
 import { FC } from "react";
+import { MdMenu } from "react-icons/md";
 import { Outlet } from "react-router-dom";
+import { useToggle } from "react-use";
 import { drawerWidth, Sidebar } from "./components/Sidebar";
 
 const Layout: FC = () => {
+  const [open, toggle] = useToggle(false);
+
   return (
     <Stack direction="row" sx={{ height: "100%" }}>
-      <Sidebar />
+      <Sidebar open={open} onClose={() => toggle(false)} />
       <Box
+        component={"div"}
         sx={{
           width: { md: `calc(100% - ${drawerWidth}px)` },
-          py: { xs: 8, md: 4 },
+          py: { xs: 2 },
           px: { xs: 2, md: 4 },
         }}
-        component={"div"}
       >
+        <IconButton
+          onClick={toggle}
+          sx={{
+            display: { md: "none" },
+            mb: 2,
+          }}
+        >
+          <MdMenu />
+        </IconButton>
         <Outlet />
       </Box>
     </Stack>

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -6,7 +6,6 @@ import {
   Box,
   Divider,
   Drawer,
-  IconButton,
   ListItem,
   ListItemButton,
   ListItemText,
@@ -17,11 +16,9 @@ import {
 } from "@mui/material";
 import { signOut as firebaseSignout } from "firebase/auth";
 import { useSetAtom } from "jotai";
-import { useCallback } from "react";
+import { FC, useCallback } from "react";
 import { FaPersonRunning } from "react-icons/fa6";
-import { MdMenu } from "react-icons/md";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useToggle } from "react-use";
 import { pages } from "../pages";
 
 const style = {
@@ -35,13 +32,15 @@ const style = {
 
 export const drawerWidth = 250;
 
-export const Sidebar = () => {
+export const Sidebar: FC<{ open: boolean; onClose: () => void }> = ({
+  open,
+  onClose,
+}) => {
   const isDesktop = useMediaQuery("(min-width:900px)");
   const navigate = useNavigate();
   const location = useLocation();
   const setUser = useSetAtom(userAtom);
   const setToken = useSetAtom(tokenAtom);
-  const [open, toggle] = useToggle(true);
 
   const { mode, setMode } = useColorScheme();
 
@@ -54,12 +53,6 @@ export const Sidebar = () => {
 
   return (
     <>
-      <IconButton
-        onClick={toggle}
-        sx={{ position: "fixed", top: 16, left: 24, display: { md: "none" } }}
-      >
-        <MdMenu />
-      </IconButton>
       <Drawer
         anchor="left"
         variant={isDesktop ? "permanent" : "temporary"}
@@ -68,7 +61,7 @@ export const Sidebar = () => {
           width: drawerWidth,
           height: "100vh",
         }}
-        onClose={toggle}
+        onClose={onClose}
       >
         <Box
           sx={{ width: drawerWidth }}
@@ -89,7 +82,7 @@ export const Sidebar = () => {
                     disablePadding
                     onClick={() => {
                       navigate(page.path);
-                      toggle(false);
+                      onClose();
                     }}
                   >
                     <ListItemButton

diff --git a/src/pages/createExercise/ExerciseFields.tsx b/src/pages/createExercise/ExerciseFields.tsx
@@ -4,6 +4,7 @@ import { Required } from "@/components/Required.tsx";
 import Section from "@/components/Section.tsx";
 import { SimpleAccordion } from "@/components/SimpleAccordion.tsx";
 import { UploadWithPreview } from "@/components/UploadWithPreview.tsx";
+import { useFlatExerciseTagsQuery } from "@/generated/graphql.tsx";
 import { ExerciseFieldsType } from "@/types/ExerciseFieldsType";
 import {
   Box,
@@ -18,7 +19,6 @@ import { FC, useMemo, useState } from "react";
 import { useDebounce } from "react-use";
 import { KaTeX } from "../../components/Katex.tsx";
 import { MultiSelect } from "../../components/MultiSelect.tsx";
-import { useFlatExerciseTagsQuery } from "@/generated/graphql.tsx";
 
 const ExerciseFields: FC = () => {
   const { values, handleChange, handleBlur, setFieldValue } =
@@ -68,7 +68,8 @@ const ExerciseFields: FC = () => {
       <Grid2 container spacing={2}>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <Section
@@ -95,7 +96,8 @@ const ExerciseFields: FC = () => {
         </Grid2>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <KaTeX value={"$\\LaTeX{}$ fordítás"} />
@@ -121,7 +123,8 @@ const ExerciseFields: FC = () => {
         </Grid2>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <Section
@@ -147,7 +150,8 @@ const ExerciseFields: FC = () => {
         </Grid2>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <KaTeX value={"$\\LaTeX{}$ megoldás fordítás"} />
@@ -176,7 +180,8 @@ const ExerciseFields: FC = () => {
         </Grid2>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <Section text="Ötlet a megoldáshoz">
@@ -195,7 +200,8 @@ const ExerciseFields: FC = () => {
         </Grid2>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <Section text="Ötlet a megoldáshoz kép">
@@ -217,10 +223,11 @@ const ExerciseFields: FC = () => {
         </Grid2>
       </Grid2>
 
-      <Grid2 container spacing={2} mt={2}>
+      <Grid2 container spacing={2} mt={2} mb={2}>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <Stack spacing={2}>
@@ -267,7 +274,8 @@ const ExerciseFields: FC = () => {
         </Grid2>
         <Grid2
           size={{
-            xs: 6,
+            xs: 12,
+            sm: 6,
           }}
         >
           <Typography>