fix: navbar responsive

EnigmaVSSUT · Feb 26, 2024 · 361ef09 · 361ef09
1 parent 04a7ed3
commit 361ef09
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 90 deletions.
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,13 @@
+.drawerStyles {
+    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 );
+}
+
+.active{
+    text-decoration: underline;
+    color: #5cdc21;
+    text-underline-offset: 7px;
+  }
diff --git a/src/ui/EnigmaNavLink.jsx b/src/ui/EnigmaNavLink.jsx
@@ -1,44 +1,44 @@
-import { Stack, Box, Typography } from "@mui/material"
+import { Stack, Box, Typography } from "@mui/material";
 
-const EnigmaNavLink = ({ href = '/', color = 'text.body', children }) => {
+const EnigmaNavLink = ({
+	href = "/",
+	color = "text.body",
+	children,
+	...props
+}) => {
 	return (
 		<Stack
-      direction="row"
-      position="relative"
-      gap="8px"
-      alignItems="center"
-      sx={{
-        width: "fit-content",
-        "&:hover": {
-          "& .MuiBox-root": {
-            width: "100%"
-          }
-        }
-      }}
-    >
-			<a
-				href={href}
-			>
-				<Typography
-					color={color}
-				>
-					{ children }
-				</Typography>
+			direction="row"
+			position="relative"
+			gap="8px"
+			{...props}
+			alignItems="center"
+			sx={{
+				width: "fit-content",
+				"&:hover": {
+					"& .MuiBox-root": {
+						width: "100%",
+					},
+				},
+			}}
+		>
+			<a href={href}>
+				<Typography color={color}>{children}</Typography>
 			</a>
-      <Box
-        sx={{
-          position: "absolute",
-          bottom: "-4px",
-          left: "0",
-          width: "0%",
-          height: "2px",
-          bgcolor: "primary.main",
-          borderRadius: "10px",
-          transition: "width 300ms"
-        }}
-      />
-    </Stack>
-	)
-}
+			<Box
+				sx={{
+					position: "absolute",
+					bottom: "-4px",
+					left: "0",
+					width: "0%",
+					height: "2px",
+					bgcolor: "primary.main",
+					borderRadius: "10px",
+					transition: "width 300ms",
+				}}
+			/>
+		</Stack>
+	);
+};
 
-export default EnigmaNavLink
+export default EnigmaNavLink;
diff --git a/src/ui/Header.jsx b/src/ui/Header.jsx
@@ -1,69 +1,224 @@
-// import EnigmaLink from "@/components/common/EnigmaLink"
-import { AppBar, Stack, Typography } from "@mui/material"
-import EnigmaNavLink from "./EnigmaNavLink"
+import React, { useState, useEffect } from "react";
+import { AppBar, Stack, Typography, Drawer } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import MenuIcon from "@mui/icons-material/Menu";
+import IconButton from "@mui/material/IconButton";
+import EnigmaNavLink from "./EnigmaNavLink";
+import EventIcon from "@mui/icons-material/Event";
+import BookIcon from "@mui/icons-material/Book";
+import WebhookIcon from "@mui/icons-material/Webhook";
+import GroupsIcon from "@mui/icons-material/Groups";
+import Divider from "@mui/material/Divider";
+import "../App.css";
+
+const DrawerList = ({ activeLink }) => (
+	<Stack
+		className="drawerStyles"
+		direction="column"
+		gap="25px"
+		padding="20px"
+		width="230px"
+		alignItems="flex-start"
+		height={1}
+		position={"relative"}
+	>
+		<Stack
+			width={"100%"}
+			direction={"row"}
+			gap={2}
+			justifyContent={"center"}
+			alignItems={"center"}
+		>
+			<img
+				src="/logo/enigma_contained.png"
+				alt="Enigma VSSUT logo"
+				width={50}
+				height={50}
+			/>
+			<Typography variant="body1">Enigma VSSUT</Typography>
+		</Stack>
+
+		<Divider
+			sx={{
+				backgroundColor: "white",
+				width: "100%",
+			}}
+		/>
+		<Stack
+			gap={4}
+			paddingLeft={5}
+			justifyContent={"center"}
+			alignItems={"start"}
+		>
+			<EnigmaNavLink
+				href="/events"
+				className={activeLink === "/events" ? "active" : ""}
+				color={activeLink === "/events" ? "#5cdc21" : "inherit"}
+			>
+				<Stack
+					direction={"row"}
+					gap={2}
+					justifyContent={"start"}
+					alignItems={"center"}
+					fontSize={18}
+				>
+					<EventIcon sx={{ fontSize: 24 }} />
+					Events
+				</Stack>
+			</EnigmaNavLink>
+
+			<EnigmaNavLink
+				href="/blogs"
+				className={activeLink === "/blogs" ? "active" : ""}
+				color={activeLink === "/blogs" ? "#5cdc21" : "inherit"}
+			>
+				<Stack
+					direction={"row"}
+					gap={2}
+					justifyContent={"start"}
+					alignItems={"center"}
+					fontSize={18}
+				>
+					<BookIcon sx={{ fontSize: 24 }} />
+					Blogs
+				</Stack>
+			</EnigmaNavLink>
+
+			<EnigmaNavLink
+				href="/projects"
+				className={activeLink === "/projects" ? "active" : ""}
+				color={activeLink === "/projects" ? "#5cdc21" : "inherit"}
+			>
+				<Stack
+					direction={"row"}
+					gap={2}
+					justifyContent={"start"}
+					alignItems={"center"}
+					fontSize={18}
+				>
+					<WebhookIcon sx={{ fontSize: 24 }} />
+					Projects
+				</Stack>
+			</EnigmaNavLink>
+
+			<EnigmaNavLink
+				href="/team"
+				className={activeLink === "/team" ? "active" : ""}
+				color={activeLink === "/team" ? "#5cdc21" : "inherit"}
+			>
+				<Stack
+					direction={"row"}
+					gap={2}
+					justifyContent={"start"}
+					alignItems={"center"}
+					fontSize={18}
+				>
+					<GroupsIcon sx={{ fontSize: 24 }} />
+					Team
+				</Stack>
+			</EnigmaNavLink>
+		</Stack>
+
+		<Stack position={"absolute"} bottom={15} left={"23%"}>
+			<Typography variant="caption">© 2024 Enigma VSSUT</Typography>
+		</Stack>
+	</Stack>
+);
 
 const Header = () => {
+	const isPhone = useMediaQuery("(max-width:600px)");
+	const [open, setOpen] = useState(false);
+	const [activeLink, setActiveLink] = useState("");
+
+	useEffect(() => {
+		const currentPath = window.location.pathname;
+		setActiveLink(currentPath);
+	}, [activeLink]);
+
+	const toggleDrawer = (newOpen) => () => {
+		setOpen(newOpen);
+	};
+
 	return (
 		<AppBar
 			position="sticky"
 			sx={{
-				backgroundColor: '#12121290',
-				backdropFilter: 'blur(200px)'
+				backgroundColor: "#12121290",
+				backdropFilter: "blur(200px)",
 			}}
 		>
 			<Stack
-				direction='row'
-				borderBottom='1px solid'
-				borderColor='divider'
-				justifyContent='center'
-				alignItems='center'
-				padding='10px 32px'
-				gap='16px'
-			>				
-				<Stack
-					direction='row'
-					gap='12px'
-					alignItems='center'
-					flexGrow={1}
-				>
+				direction="row"
+				borderBottom="1px solid"
+				borderColor="divider"
+				justifyContent="center"
+				alignItems="center"
+				padding="10px 32px"
+				gap="16px"
+			>
+				<Stack direction="row" gap="12px" alignItems="center" flexGrow={1}>
 					<img
-						src='/logo/enigma_contained.png'
+						src="/logo/enigma_contained.png"
 						alt="Enigma VSSUT logo"
 						width={42}
 						height={42}
 					/>
-					<Typography>
-						Enigma VSSUT
-					</Typography>
-				</Stack>
-				<Stack
-					direction='row'
-					gap='20px'
-				>
-					<EnigmaNavLink
-						href='/events'
-					>
-						Events
-					</EnigmaNavLink>
-					<EnigmaNavLink
-						href='/blogs'
-					>
-						Blogs
-					</EnigmaNavLink>
-					<EnigmaNavLink
-						href='/projects'
-					>
-						Projects
-					</EnigmaNavLink>
-					<EnigmaNavLink
-						href='/team'
-					>
-						Team
-					</EnigmaNavLink>
+					<Typography>Enigma VSSUT</Typography>
 				</Stack>
+				{isPhone ? (
+					<>
+						<IconButton aria-label="options" onClick={toggleDrawer(true)}>
+							<MenuIcon />
+						</IconButton>
+						<Drawer
+							sx={{
+								"& .MuiDrawer-paper": {
+									backgroundColor: "transparent",
+									color: "white",
+								},
+							}}
+							open={open}
+							onClose={toggleDrawer(false)}
+							anchor="right"
+						>
+							<DrawerList activeLink={activeLink} />
+						</Drawer>
+					</>
+				) : (
+					<Stack direction="row" gap="20px">
+						<EnigmaNavLink
+							href="/events"
+							className={activeLink === "/events" ? "active" : ""}
+							color={activeLink === "/events" ? "#5cdc21" : "inherit"}
+						>
+							Events
+						</EnigmaNavLink>
+						<EnigmaNavLink
+							href="/blogs"
+							className={activeLink === "/blogs" ? "active" : ""}
+							color={activeLink === "/blogs" ? "#5cdc21" : "inherit"}
+						>
+							Blogs
+						</EnigmaNavLink>
+						<EnigmaNavLink
+							href="/projects"
+							className={activeLink === "/projects" ? "active" : ""}
+							color={activeLink === "/projects" ? "#5cdc21" : "inherit"}
+						>
+							Projects
+						</EnigmaNavLink>
+						<EnigmaNavLink
+							href="/team"
+							className={activeLink === "/team" ? "active" : ""}
+							color={activeLink === "/team" ? "#5cdc21" : "inherit"}
+						>
+							Team
+						</EnigmaNavLink>
+					</Stack>
+				)}
 			</Stack>
 		</AppBar>
-	)
-}
+	);
+};
 
-export default Header
+export default Header;