Merge pull request #2772 from singh-kanwarpreet/feature/sticky-header

Made NavBar Still

client/src/Pages/Logs/Logs/index.jsx

@@ -51,16 +51,38 @@ const Logs = () => {
 	];
 	return (
 		<Stack gap={theme.spacing(4)}>
-			<Box>
+			<Box
+				sx={{
+					position: "sticky",
+					top: theme.spacing(17),
+					backdropFilter: "blur(10px)",
+					paddingY: theme.spacing(5),
+					paddingLeft: theme.spacing(6),
+				}}
+			>
 				<Typography variant="h2">{t("logsPage.description")}</Typography>
 			</Box>
-			<Divider color={theme.palette.accent.main} />
+			<Divider
+				color={theme.palette.accent.main}
+				sx={{
+					position: "sticky",
+					top: theme.spacing(33),
+					backdropFilter: "blur(10px)",
+				}}
+			/>
 
 			<Stack
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(4)}
 				mt={theme.spacing(10)}
+				sx={{
+					position: "sticky",
+					top: theme.spacing(34),
+					backdropFilter: "blur(10px)",
+					paddingTop: theme.spacing(4),
+					paddingLeft: theme.spacing(6),
+				}}
 			>
 				<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
 				<Select

client/src/Pages/Logs/index.jsx

@@ -29,6 +29,12 @@ const Logs = () => {
 			<Tabs
 				value={value}
 				onChange={handleChange}
+				sx={{
+					position: "sticky",
+					top: theme.spacing(0),
+					backdropFilter: "blur(10px)",
+					zIndex: theme.zIndex.appBar,
+				}}
 			>
 				<Tab label={t("logsPage.tabs.logs")} />
 				<Tab label={t("logsPage.tabs.queue")} />