Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit 55b34e5

Browse files
kartik-gupta-ijkartik-gupta-ij
committed
secondary header added
1 parent 0efd659 commit 55b34e5

File tree

15 files changed

+166
-79
lines changed

15 files changed

+166
-79
lines changed

‎public/AGPLv3_Logo.svg‎

Lines changed: 28 additions & 0 deletions
Loading

‎src/components/Header/Layout.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
1-
import logoInvert from '@/assets/images/brand/logo-invert.svg';
2-
import { HOME_ROUTE } from '@/constants/routes';
31
import { HEADER_HEIGHT } from '@/constants/theme';
42
import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
5-
import { Box, Image, Header as MantineHeader } from '@mantine/core';
3+
import { Box, Header as MantineHeader } from '@mantine/core';
64
import { FC } from 'react';
7-
import { Link, Outlet } from 'react-router-dom';
5+
import { Outlet } from 'react-router-dom';
86
import { useHeaderStyles } from './styles';
97

108
type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
119

1210
const HeaderLayout: FC<HeaderProps> = (props) => {
1311
const { classes } = useHeaderStyles();
14-
const { container, logoContainer, navContainer, imageSty } = classes;
12+
const { container, navContainer } = classes;
1513

1614
return (
17-
<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
18-
<Box className={logoContainer}>
19-
<Link to={HOME_ROUTE}>
20-
<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
21-
</Link>
22-
</Box>
15+
<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder zIndex={100}>
2316
<Box className={navContainer}>
2417
<Outlet />
2518
</Box>

‎src/components/Header/PrimaryHeader.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import logoInvert from '@/assets/images/brand/logo-invert.svg';
2+
import { HOME_ROUTE } from '@/constants/routes';
3+
import { HEADER_HEIGHT } from '@/constants/theme';
4+
import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
5+
import { Box, Button, Image, Header as MantineHeader, Text, Tooltip } from '@mantine/core';
6+
import { FC } from 'react';
7+
import { Link } from 'react-router-dom';
8+
import { useHeaderStyles } from './styles';
9+
10+
type PrimaryHeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
11+
12+
const PrimaryHeader: FC<PrimaryHeaderProps> = (props) => {
13+
const { classes } = useHeaderStyles();
14+
const { container, logoContainer, navContainer, imageSty, actionBtn } = classes;
15+
16+
return (
17+
<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
18+
<Box className={logoContainer}>
19+
<Link to={HOME_ROUTE}>
20+
<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
21+
</Link>
22+
</Box>
23+
<Box className={navContainer}>
24+
<Box
25+
display={'flex'}
26+
sx={{
27+
justifyContent: 'flex-end',
28+
alignItems: 'center',
29+
width: '100%',
30+
paddingLeft: '1rem',
31+
}}
32+
pr={'xl'}>
33+
<Tooltip label="Upgrade to production support" position="bottom">
34+
<Button
35+
variant="outline"
36+
component={'a'}
37+
href="mailto:[email protected]?subject=Production%20Support%20Query"
38+
target="_blank"
39+
className={actionBtn}>
40+
<Image height={30} fit="fill" src={'/AGPLv3_Logo.svg'} />
41+
</Button>
42+
</Tooltip>
43+
</Box>
44+
</Box>
45+
</MantineHeader>
46+
);
47+
};
48+
49+
export default PrimaryHeader;

‎src/components/Header/SecondaryHeader.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
2+
import { FC } from 'react';
3+
import { Route, Routes } from 'react-router-dom';
4+
import HeaderLayout from './Layout';
5+
import { ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
6+
import { CONFIG_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
7+
8+
type SecondaryHeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
9+
10+
const SecondaryHeader: FC<SecondaryHeaderProps> = (props) => {
11+
return (
12+
<Routes>
13+
<Route element={<HeaderLayout {...props} />}>
14+
<Route path={LOGS_ROUTE} element={<LogsHeader />} />
15+
<Route path={QUERY_ROUTE} element={<QueryHeader />} />
16+
<Route path={STATS_ROUTE} element={<StatsHeader />} />
17+
<Route path={CONFIG_ROUTE} element={<ConfigHeader />} />
18+
<Route path={USERS_MANAGEMENT_ROUTE} element={<UsersManagementHeader />} />
19+
</Route>
20+
</Routes>
21+
);
22+
};
23+
24+
export default SecondaryHeader;

‎src/components/Header/SubHeader.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ export const UsersManagementHeader: FC = () => {
109109
<Box className={innerContainer}>
110110
<ReloadUser />
111111
<DocsUser />
112-
{/* <CreateUser /> */}
113112
</Box>
114113
</Box>
115114
</Box>

‎src/components/Header/index.tsx‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
1-
import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
2-
import { FC } from 'react';
3-
import { Route, Routes } from 'react-router-dom';
4-
import HeaderLayout from './Layout';
5-
import { ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
6-
import { CONFIG_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
1+
import PrimaryHeader from "./PrimaryHeader";
2+
import SecondaryHeader from "./SecondaryHeader";
73

8-
type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
9-
10-
const Header: FC<HeaderProps> = (props) => {
11-
return (
12-
<Routes>
13-
<Route element={<HeaderLayout {...props} />}>
14-
<Route path={LOGS_ROUTE} element={<LogsHeader />} />
15-
<Route path={QUERY_ROUTE} element={<QueryHeader />} />
16-
<Route path={STATS_ROUTE} element={<StatsHeader />} />
17-
<Route path={CONFIG_ROUTE} element={<ConfigHeader />} />
18-
<Route path={USERS_MANAGEMENT_ROUTE} element={<UsersManagementHeader />} />
19-
</Route>
20-
</Routes>
21-
);
22-
};
23-
24-
export default Header;
4+
export {
5+
PrimaryHeader,
6+
SecondaryHeader
7+
}

‎src/components/Header/styles.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme';
22
import { createStyles } from '@mantine/core';
33

44
export const useHeaderStyles = createStyles((theme) => {
5-
const { colors, spacing, fontSizes } = theme;
6-
const { fontWeights } = theme.other;
5+
const { colors, radius, spacing, fontSizes } = theme;
6+
const { fontWeights, sizing } = theme.other;
7+
const white = colors.white[0];
8+
const sColor = colors.brandSecondary[0];
9+
const defaultRadius = radius[theme.defaultRadius as string];
710

811
return {
912
container: {
@@ -23,22 +26,23 @@ export const useHeaderStyles = createStyles((theme) => {
2326
justifyContent: 'center',
2427
alignItems: 'center',
2528
padding: spacing.md,
26-
paddingRight:0,
27-
width: NAVBAR_WIDTH,
28-
height: "24px",
29-
30-
},
31-
imageSty: {
32-
33-
},
34-
burgerIcon: {
35-
36-
29+
paddingRight: 0,
30+
minWidth: NAVBAR_WIDTH,
31+
height: '24px',
3732
},
33+
imageSty: {},
34+
burgerIcon: {},
3835
navContainer: {
39-
width: `calc(100% - ${NAVBAR_WIDTH}px)`,
36+
width: `calc(100% )`,
4037
justifyContent: 'space-between',
4138
},
39+
actionBtn: {
40+
transition: 'transform .2s ease-in-out',
41+
'&:hover ': {
42+
transform: 'scale(1.3)',
43+
backgroundColor: colors.gray[0],
44+
},
45+
},
4246
};
4347
});
4448

‎src/components/Navbar/index.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,22 @@ import {
1616
} from '@tabler/icons-react';
1717
import { FC, useEffect } from 'react';
1818
import { useNavbarStyles } from './styles';
19-
import { useLocation, useParams } from 'react-router-dom';
19+
import { useLocation, useParams } from 'react-router-dom';
2020
import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
2121
import { notifications } from '@mantine/notifications';
2222
import { useNavigate } from 'react-router-dom';
2323
import { DEFAULT_FIXED_DURATIONS, useHeaderContext } from '@/layouts/MainLayout/Context';
2424
import useMountedState from '@/hooks/useMountedState';
2525
import dayjs from 'dayjs';
2626
import { useDisclosure } from '@mantine/hooks';
27-
import { USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
27+
import { USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
2828
import { useDeleteLogStream } from '@/hooks/useDeleteLogStream';
2929
import InfoModal from './infoModal';
3030
import { useGetUserRole } from '@/hooks/useGetUserRoles';
3131
import { getStreamsSepcificAccess, getUserSepcificStreams } from './rolesHandler';
3232
import { LogStreamData } from '@/@types/parseable/api/stream';
3333
import Cookies from 'js-cookie';
34+
import { NAVBAR_WIDTH } from '@/constants/theme';
3435
const baseURL = import.meta.env.VITE_PARSEABLE_URL ?? '/';
3536

3637
const links = [
@@ -47,7 +48,7 @@ const Navbar: FC<NavbarProps> = (props) => {
4748
const { streamName } = useParams();
4849
const location = useLocation();
4950

50-
const username = Cookies.get('username')
51+
const username = Cookies.get('username');
5152

5253
const {
5354
state: { subNavbarTogle },
@@ -78,7 +79,7 @@ const Navbar: FC<NavbarProps> = (props) => {
7879
Cookies.remove('session');
7980
Cookies.remove('username');
8081

81-
window.location.href=`${baseURL}api/v1/o/logout?redirect=${window.location.origin}/login`;
82+
window.location.href = `${baseURL}api/v1/o/logout?redirect=${window.location.origin}/login`;
8283
};
8384

8485
const {
@@ -179,8 +180,8 @@ const Navbar: FC<NavbarProps> = (props) => {
179180
}, [username]);
180181

181182
useEffect(() => {
182-
if(streams && streams.length > 0 && roles){
183-
const userStreams = getUserSepcificStreams(roles,streams as any);
183+
if (streams && streams.length > 0 && roles) {
184+
const userStreams = getUserSepcificStreams(roles, streams as any);
184185
setUserSepecficStreams(userStreams as any);
185186
}
186187
}, [roles, streams]);
@@ -202,7 +203,13 @@ const Navbar: FC<NavbarProps> = (props) => {
202203
modalCancelBtn,
203204
} = classes;
204205
return (
205-
<MantineNavbar {...props} withBorder zIndex={1} hiddenBreakpoint={window.outerWidth + 20} hidden={isSubNavbarOpen}>
206+
<MantineNavbar
207+
{...props}
208+
withBorder
209+
zIndex={1}
210+
hiddenBreakpoint={window.outerWidth + 20}
211+
hidden={isSubNavbarOpen}
212+
width={{ xs: `${NAVBAR_WIDTH}px` }}>
206213
<MantineNavbar.Section grow className={container}>
207214
<NavLink label="Log Streams" icon={<IconBinaryTree2 size="1.5rem" stroke={1.3} />} className={streamsBtn} />
208215
<Select

‎src/constants/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export const HEADER_HEIGHT = 70;
1+
export const HEADER_HEIGHT = 50;
22
export const NAVBAR_WIDTH = 200;
33
export const APP_MIN_WIDTH = 650;

‎src/layouts/MainLayout/index.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Header from '@/components/Header';
1+
import { PrimaryHeader, SecondaryHeader } from '@/components/Header';
22
import Navbar from '@/components/Navbar';
33
import { NAVBAR_WIDTH } from '@/constants/theme';
44
import { Box } from '@mantine/core';
@@ -13,10 +13,17 @@ const MainLayout: FC = () => {
1313

1414
return (
1515
<Box className={container}>
16-
<Header p="xs" />
16+
<PrimaryHeader p="xs" />
1717
<Box className={contentContainer}>
1818
<Navbar w={NAVBAR_WIDTH} />
19-
<Outlet />
19+
<Box sx={{
20+
width: `calc(100% - ${NAVBAR_WIDTH}px)`,
21+
display: 'flex',
22+
flexDirection: 'column',
23+
}}>
24+
<SecondaryHeader />
25+
<Outlet />
26+
</Box>
2027
</Box>
2128
</Box>
2229
);

0 commit comments

Comments
 (0)