Merge pull request #131 from EnigmaVSSUT/dev-v2

fix: teams page responsive
EnigmaVSSUT · Feb 27, 2024 · ca615f5 · ca615f5
2 parents 887ae6b + 3636b96
commit ca615f5
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 52 deletions.
diff --git a/src/app/team/components/AllTeams.jsx b/src/app/team/components/AllTeams.jsx
@@ -1,13 +1,14 @@
-
 import { Stack, Typography } from "@mui/material";
 import { useEffect } from "react";
 import { useState } from "react";
 import MemberCard from "./MemberCard";
 import baseAPIMethods from "../../../lib/axios/base";
 import AnimatePage from "../../../ui/AnimatePage";
+import { useResponsive } from "../../../hooks/useResponsive";
 
 export default function AllTeam() {
 	const [member, setMember] = useState([]);
+	const { isTablet } = useResponsive();
 
 	useEffect(() => {
 		const getTeam = async () => {
@@ -20,33 +21,29 @@ export default function AllTeam() {
 
 	return (
 		<AnimatePage>
+			<Stack justifyContent={"center"} alignItems={"center"} gap={10}>
+				<Typography variant={isTablet ? "h4" : "h2"} color={"#fff"}>
+					Team Enigma
+				</Typography>
+
 				<Stack
+					className="team-grid"
+					direction={"row"}
+					gap={4}
 					justifyContent={"center"}
 					alignItems={"center"}
-					gap={10}
+					flexWrap={"wrap"}
 				>
-					<Typography variant="h2" color={"#fff"}>
-						Team Enigma
-					</Typography>
-
-					<Stack
-						className="team-grid"
-						direction={"row"}
-						gap={4}
-						justifyContent={"center"}
-						alignItems={"center"}
-						flexWrap={"wrap"}
-					>
-						{member.map((member,idx) => (
-							<MemberCard
-								key={idx}
-								memberName={member.profile.name}
-								memberImage={member.profile.avatar}
-								memberUsername={member.profile.username}
-							/>
-						))}
-					</Stack>
+					{member.map((member, idx) => (
+						<MemberCard
+							key={idx}
+							memberName={member.profile.name}
+							memberImage={member.profile.avatar}
+							memberUsername={member.profile.username}
+						/>
+					))}
 				</Stack>
+			</Stack>
 		</AnimatePage>
 	);
-}
+}
diff --git a/src/app/team/components/SideTab.jsx b/src/app/team/components/SideTab.jsx
@@ -6,6 +6,11 @@ import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { Stack } from "@mui/material";
 import AllTeam from "./AllTeams";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import IconButton from "@mui/material/IconButton";
+import styles from "../team.module.css";
+import Drawer from "@mui/material/Drawer";
+import { useResponsive } from "../../../hooks/useResponsive";
 
 function TabPanel(props) {
 	const { children, value, index, ...other } = props;
@@ -45,11 +50,48 @@ TabPanel.propTypes = {
 
 export default function SideTab() {
 	const [value, setValue] = React.useState(0);
+	const { isTablet } = useResponsive();
 
 	const handleChange = (event, newValue) => {
 		setValue(newValue);
 	};
 
+	const [open, setOpen] = React.useState(false);
+
+	const toggleDrawer = (newOpen) => () => {
+	  setOpen(newOpen);
+	};
+
+
+	const DrawerList = ()=>(
+		<Stack
+		className={styles.drawer}
+					sx={{
+						minWidth: "16rem",
+						height: "100vh",
+						top: "3.8rem",
+						left: "0",
+						zIndex: "1",
+					}}
+				>
+					<Tabs
+						orientation="vertical"
+						variant="standard"
+						value={value}
+						onChange={handleChange}
+						sx={{ marginTop: "2rem" }}
+					>
+						<Tab label="All" />
+						<Tab label="Web Devs" />
+						<Tab label="App Devs" />
+						<Tab label="AI/Ml Devs" />
+						<Tab label="CyberSecurity Devs" />
+						<Tab label="UI/UX designers" />
+						<Tab label="Content Writers" />
+					</Tabs>
+				</Stack>
+	);
+
 	return (
 		<Box
 			sx={{
@@ -60,35 +102,57 @@ export default function SideTab() {
 			width={"100vw"}
 			position={"relative"}
 		>
-			<Stack
-				sx={{
-					border: 1,
-					borderColor: "divider",
-					minWidth: "16rem",
-					position: "sticky",
-					top: "3.8rem",
-					left: "0",
-					zIndex: "1",
-                    maxHeight: "100vh",
-				}}
-			>
-				<Tabs
-					orientation="vertical"
-					variant="standard"
-					value={value}
-					onChange={handleChange}
-					sx={{ marginTop: "2rem" }}
+			{isTablet ? (
+				<>
+					<IconButton
+					 onClick={toggleDrawer(true)}
+						className={styles.drawerButton}
+						aria-label="options"
+						sx={{ position: "fixed", top: "20px", left: "15px", zIndex: 2 }}
+					>
+						<ArrowForwardIosIcon sx={{ color: "white" }} />
+					</IconButton>
+					<Drawer
+					sx={{
+						"& .MuiDrawer-paper": {
+							backgroundColor: "transparent",
+							color: "white",
+						},
+					}} 
+					open={open} onClose={toggleDrawer(false)}>
+						<DrawerList />
+					</Drawer>
+				</>
+			) : (
+				<Stack
+					sx={{
+						border: 1,
+						borderColor: "divider",
+						minWidth: "16rem",
+						position: "sticky",
+						top: "3.8rem",
+						left: "0",
+						zIndex: "1",
+						maxHeight: "100vh",
+					}}
 				>
-					<Tab label="All" />
-					<Tab label="Web Devs" />
-					<Tab label="App Devs" />
-					<Tab label="AI/Ml Devs" />
-					<Tab label="CyberSecurity Devs" />
-					<Tab label="UI/UX designers" />
-					<Tab label="Content Writers" />
-				</Tabs>
-			</Stack>
-
+					<Tabs
+						orientation="vertical"
+						variant="standard"
+						value={value}
+						onChange={handleChange}
+						sx={{ marginTop: "2rem" }}
+					>
+						<Tab label="All" />
+						<Tab label="Web Devs" />
+						<Tab label="App Devs" />
+						<Tab label="AI/Ml Devs" />
+						<Tab label="CyberSecurity Devs" />
+						<Tab label="UI/UX designers" />
+						<Tab label="Content Writers" />
+					</Tabs>
+				</Stack>
+			)}
 
 			<TabPanel value={value} index={0}>
 				<AllTeam />

diff --git a/src/app/team/team.module.css b/src/app/team/team.module.css
@@ -54,4 +54,31 @@
   align-items: center;
   margin: 0 auto;
   width: 100%;
+}
+
+
+@keyframes oscillate {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+}
+
+.drawerButton{
+  background-color: brown;
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  z-index: 2;
+  animation: oscillate 2s infinite;
+}
+
+.drawer{
+  background: rgba( 0, 0, 0, 0.7 );
+  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  backdrop-filter: blur( 12px );
+  -webkit-backdrop-filter: blur( 20px );
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
 }
diff --git a/src/hooks/useResponsive.js b/src/hooks/useResponsive.js
@@ -0,0 +1,14 @@
+import * as React from "react";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+export const useResponsive = () => {
+	const isLaptop = useMediaQuery("(max-width:900px)");
+	const isTablet = useMediaQuery("(max-width:650px)");
+	const isMobile = useMediaQuery("(max-width:600px)");
+
+	return {
+		isLaptop,
+		isTablet,
+		isMobile,
+	};
+};