Responsive (#118)

* WIP * WIP : Logs modal * Done : Premium Page, Menu * Hid scrollbar * Added missing condition for login / logout in the mobile menu
WildCodeSchool · Dec 13, 2024 · 9784882 · 9784882
1 parent 239a969
commit 9784882
Show file tree

Hide file tree

Showing 18 changed files with 440 additions and 151 deletions.
diff --git a/frontend/src/common/components/header/Header.scss b/frontend/src/common/components/header/Header.scss
@@ -57,3 +57,10 @@
     }
   }
 }
+
+@media screen and (max-width: $breakpoint-sm) {
+  .navbar {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
diff --git a/frontend/src/common/components/header/header-menu/HeaderMenu.scss b/frontend/src/common/components/header/header-menu/HeaderMenu.scss
@@ -7,17 +7,17 @@
   .header__menu-item {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
 
     :hover > * {
       color: $green;
     }
 
     .header__menu-button {
       color: $dark-blue;
-      gap: 10px;
-      padding-right: 10px;
-      padding-left: 10px;
+      gap: 8px;
+      padding-right: 8px;
+      padding-left: 8px;
       background-color: transparent;
     }
   }
@@ -26,4 +26,25 @@
     color: $dark-blue;
     height: 100%;
   }
-}
+}
+
+.header__drawer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+  margin-top: 32px;
+}
+
+.header__drawer-button {
+  color: $dark-blue;
+  gap: 8px;
+  padding: 24px;
+  background-color: transparent;
+}
+
+.header__drawer-button > span {
+  font-family: $base-font-family;
+  color: $dark-blue;
+  font-size: 18px;
+}
diff --git a/frontend/src/common/components/header/header-menu/HeaderMenu.tsx b/frontend/src/common/components/header/header-menu/HeaderMenu.tsx
@@ -1,6 +1,7 @@
 import useAuth from "@/common/hooks/useAuth";
 import "./HeaderMenu.scss";
-import { Button } from "@mui/material";
+import {Button, IconButton, SwipeableDrawer} from "@mui/material";
+import MenuIcon from '@mui/icons-material/Menu';
 
 import { Link, useNavigate } from "react-router-dom";
 import { useLazyQuery } from "@apollo/client";
@@ -9,6 +10,8 @@ import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined
 import MonitorHeartOutlinedIcon from '@mui/icons-material/MonitorHeartOutlined';
 import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
 import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import {useEffect, useState} from "react";
+import Box from "@mui/material/Box";
 
 
 interface IHeaderMenu {
@@ -27,51 +30,131 @@ const HeaderMenu = ({ handleOpen }: IHeaderMenu) => {
   });
   const { userInfos, refetch } = useAuth();
 
-  return (
-    <div className="header__menu">
-      <div className="header__menu-item">
-        {userInfos.isLoggedIn ? (
-          <>
-            {userInfos.role && userInfos.role < 1 && (
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const [sidebarDisplayed, setSidebarDisplayed] = useState(false);
+  const toggleDrawer = (open: boolean) => {
+    setSidebarDisplayed(open);
+  };
+
+  return isSmallScreen ?
+    (
+      <>
+        <div onClick={() => toggleDrawer(true)}>
+          <IconButton>
+            <MenuIcon/>
+          </IconButton>
+        </div>
+        <SwipeableDrawer
+          anchor='right'
+          open={sidebarDisplayed}
+          onClose={() => toggleDrawer(false)}
+          onOpen={() => toggleDrawer(true)}
+        >
+          <Box sx={{ width: 200 }} role="presentation" onClick={() => toggleDrawer(false)}>
+            {userInfos.isLoggedIn ? (
+              <div className="header__drawer-container">
+                {userInfos.role && userInfos.role < 1 && (
+                  <Button
+                    component={Link}
+                    to="/premium"
+                    className="header__drawer-button"
+                  >
+                    <span>Premium</span>
+                    <StarBorderOutlinedIcon />
+                  </Button>
+                )}
+                <Button
+                  component={Link}
+                  to="/dashboard"
+                  className="header__drawer-button"
+                >
+                  <span>Dashboard</span>
+                  <MonitorHeartOutlinedIcon />
+                </Button>
+                <Button
+                  component={Link}
+                  to="/settings"
+                  className="header__drawer-button"
+                >
+                  <span>{userInfos.name}</span>
+                  <AccountCircleOutlinedIcon />
+                </Button>
+                <Button onClick={() => logout()} className="header__drawer-button">
+                  <span>Logout</span>
+                  <LogoutOutlinedIcon />
+                </Button>
+              </div>
+            ) : (
+              <div className="header__drawer-container">
+                <Button onClick={handleOpen} className="header__drawer-button">
+                  <span>Connexion</span>
+                  <AccountCircleOutlinedIcon />
+                </Button>
+              </div>
+            )}
+          </Box>
+        </SwipeableDrawer>
+      </>
+    )
+    :
+    (
+      <div className="header__menu">
+        <div className="header__menu-item">
+          {userInfos.isLoggedIn ? (
+            <>
+              {userInfos.role && userInfos.role < 1 && (
+                <Button
+                  component={Link}
+                  to="/premium"
+                  className="header__menu-button"
+                >
+                  <span>Premium</span>
+                  <StarBorderOutlinedIcon/>
+                </Button>
+              )}
               <Button
                 component={Link}
-                to="/premium"
+                to="/dashboard"
                 className="header__menu-button"
               >
-                <span>Premium</span>
-                <StarBorderOutlinedIcon />
+                <span>Dashboard</span>
+                <MonitorHeartOutlinedIcon/>
               </Button>
-            )}
-            <Button
-              component={Link}
-              to="/dashboard"
-              className="header__menu-button"
-            >
-              <span>Dashboard</span>
-              <MonitorHeartOutlinedIcon />
-            </Button>
-            <Button
-              component={Link}
-              to="/settings"
-              className="header__menu-button"
-            >
-              <span>{userInfos.name}</span>
-              <AccountCircleOutlinedIcon />
-            </Button>
-            <Button onClick={() => logout()} className="header__menu-button">
-              <span>Logout</span>
-              <LogoutOutlinedIcon />
+              <Button
+                component={Link}
+                to="/settings"
+                className="header__menu-button"
+              >
+                <span>{userInfos.name}</span>
+                <AccountCircleOutlinedIcon/>
+              </Button>
+              <Button onClick={() => logout()} className="header__menu-button">
+                <span>Logout</span>
+                <LogoutOutlinedIcon/>
+              </Button>
+            </>
+          ) : (
+            <Button onClick={handleOpen} className="header__menu-button">
+              <span>Connexion</span>
+              <AccountCircleOutlinedIcon/>
             </Button>
-          </>
-        ) : (
-          <Button onClick={handleOpen} className="header__menu-button">
-            <span>Connexion</span>
-            <AccountCircleOutlinedIcon />
-          </Button>
-        )}
+          )}
+        </div>
       </div>
-    </div>
-  );
+    )
 };
 
 export default HeaderMenu;
diff --git a/frontend/src/common/components/loginModal/LoginModal.scss b/frontend/src/common/components/loginModal/LoginModal.scss
@@ -9,7 +9,6 @@
   font-family: $base-font-family;
   width: 50%;
   background-color: $light-grey;
-  box-shadow: 24px;
   padding: $space-md;
   border-radius: $border-radius-sm;
   color: $dark-blue;
@@ -27,3 +26,9 @@
 
   @include flex-column-center;
 }
+
+@media screen and (max-width: $breakpoint-sm) {
+  .login__modal-box {
+    width: 80%;
+  }
+}
diff --git a/frontend/src/common/components/logsModal/LogsModal.scss b/frontend/src/common/components/logsModal/LogsModal.scss
@@ -16,6 +16,7 @@
     display: grid;
     grid-template-columns: 100px 50px 100px 80px 90px;
     align-items: center;
+    text-align: right;
     gap: 32px;
     width: 100%;
     padding: 8px;
@@ -43,4 +44,20 @@
     background-color: $backgroundRed;
 }
 
+@media screen and (max-width: $breakpoint-sm) {
+  .logsmodal__header, .logsmodal__item {
+    grid-template-columns: 60px 40px 50px 30px 32px;
+    gap: 16px;
+  }
+
+  .logsmodal__header {
+    font-weight: $heading-font-weight;
+    font-size: $small-font-size;
+  }
+
+  .logsmodal__item {
+    font-size: $small-font-size;
+    padding: 4px;
+  }
+}
 
diff --git a/frontend/src/common/components/logsModal/LogsModal.tsx b/frontend/src/common/components/logsModal/LogsModal.tsx
@@ -1,6 +1,9 @@
 import "./LogsModal.scss";
 import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import { Log } from "@/common/models/Log.ts";
+import {useEffect, useState} from "react";
 
 interface LogModalProps {
   open: boolean;
@@ -9,25 +12,66 @@ interface LogModalProps {
   logs: Log[] | null;
 }
 
+
 const LogsModal: React.FC<LogModalProps> = ({
   open,
   handleClose,
   urlName,
   logs,
 }) => {
+
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
-    <Dialog open={open} onClose={handleClose}>
-      <DialogTitle id="customized-dialog-title">
+    <Dialog open={open} onClose={handleClose} sx={{width: "100%"}}>
+      <DialogTitle
+        sx={{
+          padding: {
+            xs: '8px 16px',
+            md: '16px 24px',
+          },
+        }}
+        id="customized-dialog-title">
         {`Historique de la requête "${urlName}"`}
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
       </DialogTitle>
-      <DialogContent>
+      <DialogContent
+        sx={{
+          padding: {
+            xs: '16px 8px',
+            md: '16px 24px 16px 16px',
+          },
+        }}
+      >
         <div className="logsmodal__wrapper">
           <div className="logsmodal__header">
             <span>Date</span>
             <span>Heure</span>
-            <span>Temps de réponse</span>
-            <span>Code de retour</span>
-            <span>Message</span>
+            <span>{isSmallScreen ? `Délai` : `Temps de réponse`}</span>
+            <span>{isSmallScreen ? `Code` : `Code de retour`}</span>
+            <span>{isSmallScreen ? `Msg` : `Message`}</span>
           </div>
           {logs &&
             logs.map((log: Log) => {