diff --git a/public/AGPLv3_Logo.svg b/public/AGPLv3_Logo.svg
new file mode 100644
index 00000000..1a110425
--- /dev/null
+++ b/public/AGPLv3_Logo.svg
@@ -0,0 +1,28 @@
+
+
+
+
diff --git a/src/components/Header/Layout.tsx b/src/components/Header/Layout.tsx
index ed440b4a..2c07af64 100644
--- a/src/components/Header/Layout.tsx
+++ b/src/components/Header/Layout.tsx
@@ -1,25 +1,18 @@
-import logoInvert from '@/assets/images/brand/logo-invert.svg';
-import { HOME_ROUTE } from '@/constants/routes';
import { HEADER_HEIGHT } from '@/constants/theme';
import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
-import { Box, Image, Header as MantineHeader } from '@mantine/core';
+import { Box, Header as MantineHeader } from '@mantine/core';
import { FC } from 'react';
-import { Link, Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
import { useHeaderStyles } from './styles';
type HeaderProps = Omit;
const HeaderLayout: FC = (props) => {
const { classes } = useHeaderStyles();
- const { container, logoContainer, navContainer, imageSty } = classes;
+ const { container, navContainer } = classes;
return (
-
-
-
-
-
-
+
diff --git a/src/components/Header/PrimaryHeader.tsx b/src/components/Header/PrimaryHeader.tsx
new file mode 100644
index 00000000..60a331d0
--- /dev/null
+++ b/src/components/Header/PrimaryHeader.tsx
@@ -0,0 +1,49 @@
+import logoInvert from '@/assets/images/brand/logo-invert.svg';
+import { HOME_ROUTE } from '@/constants/routes';
+import { HEADER_HEIGHT } from '@/constants/theme';
+import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
+import { Box, Button, Image, Header as MantineHeader, Tooltip } from '@mantine/core';
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { useHeaderStyles } from './styles';
+
+type PrimaryHeaderProps = Omit;
+
+const PrimaryHeader: FC = (props) => {
+ const { classes } = useHeaderStyles();
+ const { container, logoContainer, navContainer, imageSty, actionBtn } = classes;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PrimaryHeader;
diff --git a/src/components/Header/SecondaryHeader.tsx b/src/components/Header/SecondaryHeader.tsx
new file mode 100644
index 00000000..a0dc83cd
--- /dev/null
+++ b/src/components/Header/SecondaryHeader.tsx
@@ -0,0 +1,24 @@
+import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
+import { FC } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import HeaderLayout from './Layout';
+import { ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
+import { CONFIG_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+
+type SecondaryHeaderProps = Omit;
+
+const SecondaryHeader: FC = (props) => {
+ return (
+
+ }>
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+ );
+};
+
+export default SecondaryHeader;
diff --git a/src/components/Header/SubHeader.tsx b/src/components/Header/SubHeader.tsx
index d799bddc..81a0c1a3 100644
--- a/src/components/Header/SubHeader.tsx
+++ b/src/components/Header/SubHeader.tsx
@@ -109,7 +109,6 @@ export const UsersManagementHeader: FC = () => {
- {/* */}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 65805080..70446cb4 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,24 +1,7 @@
-import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
-import { FC } from 'react';
-import { Route, Routes } from 'react-router-dom';
-import HeaderLayout from './Layout';
-import { ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
-import { CONFIG_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+import PrimaryHeader from "./PrimaryHeader";
+import SecondaryHeader from "./SecondaryHeader";
-type HeaderProps = Omit;
-
-const Header: FC = (props) => {
- return (
-
- }>
- } />
- } />
- } />
- } />
- } />
-
-
- );
-};
-
-export default Header;
+export {
+ PrimaryHeader,
+ SecondaryHeader
+}
\ No newline at end of file
diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx
index 8816f01c..d1103179 100644
--- a/src/components/Header/styles.tsx
+++ b/src/components/Header/styles.tsx
@@ -23,22 +23,23 @@ export const useHeaderStyles = createStyles((theme) => {
justifyContent: 'center',
alignItems: 'center',
padding: spacing.md,
- paddingRight:0,
- width: NAVBAR_WIDTH,
- height: "24px",
-
- },
- imageSty: {
-
- },
- burgerIcon: {
-
-
+ paddingRight: 0,
+ minWidth: NAVBAR_WIDTH,
+ height: '24px',
},
+ imageSty: {},
+ burgerIcon: {},
navContainer: {
- width: `calc(100% - ${NAVBAR_WIDTH}px)`,
+ width: `calc(100% )`,
justifyContent: 'space-between',
},
+ actionBtn: {
+ transition: 'transform .2s ease-in-out',
+ '&:hover ': {
+ transform: 'scale(1.3)',
+ backgroundColor: colors.gray[0],
+ },
+ },
};
});
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 4b1f9701..4b14c2c0 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -16,7 +16,7 @@ import {
} from '@tabler/icons-react';
import { FC, useEffect } from 'react';
import { useNavbarStyles } from './styles';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
import { notifications } from '@mantine/notifications';
import { useNavigate } from 'react-router-dom';
@@ -24,13 +24,14 @@ import { DEFAULT_FIXED_DURATIONS, useHeaderContext } from '@/layouts/MainLayout/
import useMountedState from '@/hooks/useMountedState';
import dayjs from 'dayjs';
import { useDisclosure } from '@mantine/hooks';
-import { USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+import { USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
import { useDeleteLogStream } from '@/hooks/useDeleteLogStream';
import InfoModal from './infoModal';
import { useGetUserRole } from '@/hooks/useGetUserRoles';
import { getStreamsSepcificAccess, getUserSepcificStreams } from './rolesHandler';
import { LogStreamData } from '@/@types/parseable/api/stream';
import Cookies from 'js-cookie';
+import { NAVBAR_WIDTH } from '@/constants/theme';
const baseURL = import.meta.env.VITE_PARSEABLE_URL ?? '/';
const links = [
@@ -47,7 +48,7 @@ const Navbar: FC = (props) => {
const { streamName } = useParams();
const location = useLocation();
- const username = Cookies.get('username')
+ const username = Cookies.get('username');
const {
state: { subNavbarTogle },
@@ -78,7 +79,7 @@ const Navbar: FC = (props) => {
Cookies.remove('session');
Cookies.remove('username');
- window.location.href=`${baseURL}api/v1/o/logout?redirect=${window.location.origin}/login`;
+ window.location.href = `${baseURL}api/v1/o/logout?redirect=${window.location.origin}/login`;
};
const {
@@ -179,8 +180,8 @@ const Navbar: FC = (props) => {
}, [username]);
useEffect(() => {
- if(streams && streams.length > 0 && roles){
- const userStreams = getUserSepcificStreams(roles,streams as any);
+ if (streams && streams.length > 0 && roles) {
+ const userStreams = getUserSepcificStreams(roles, streams as any);
setUserSepecficStreams(userStreams as any);
}
}, [roles, streams]);
@@ -202,7 +203,13 @@ const Navbar: FC = (props) => {
modalCancelBtn,
} = classes;
return (
-
+
} className={streamsBtn} />