diff --git a/client/src/components/layout/Navbar.tsx b/client/src/components/layout/Navbar.tsx
index ae964c7..f670ce0 100644
--- a/client/src/components/layout/Navbar.tsx
+++ b/client/src/components/layout/Navbar.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
-import {Avatar, Col, Row, Tooltip} from 'antd';
+import React, { useEffect, useState } from 'react';
+import {Avatar, Button, Col, Drawer, Menu, MenuProps, Row, Tooltip} from 'antd';
import PropTypes from "prop-types";
-import {connect} from "react-redux";
+import {connect, useDispatch} from "react-redux";
import {UserOutlined} from '@ant-design/icons';
import {rowGutterStyle} from '../../App';
import {Link, useLocation} from 'react-router-dom';
import {Container} from 'react-bootstrap';
+import {MenuOutlined} from '@ant-design/icons';
+import {HomeOutlined, SearchOutlined, AuditOutlined, LogoutOutlined, CloseOutlined} from '@ant-design/icons';
+import {filterRoleListingsByDepartment, filterRoleListingsByLocation, filterRoleListingsByRoleId} from '../../actions/roleListings';
interface pageType {
[key: string]: string
@@ -19,23 +22,133 @@ const pages: pageType = {
"staff": "Staff Detail",
}
-const Navbar = ({auth: {user, loading}}: any) => {
+const Navbar = ({auth: {user, loading, isHR, logout}}: any) => {
const location = useLocation()
const pageName = location.pathname.split("/")[1]
+ const dispatch = useDispatch();
+
+ const [open, setOpen] = useState(false);
+
+ const onClose = () => {
+ setOpen(false);
+ };
+
+ const [viewportWidth, setViewportWidth] = useState(window.innerWidth);
+
+ // Update viewport width when the window is resized
+ useEffect(() => {
+ function handleResize() {
+ setViewportWidth(window.innerWidth);
+ }
+
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ const items: MenuProps['items'] = [
+ // {
+ // label: "SBRP",
+ // key: 'logo',
+ // disabled: true,
+ // style: {height: 60, paddingTop: 10, cursor: "default"},
+ // },
+ {
+ label: ({"Home"}),
+ key: '/',
+ icon: ,
+ style: {height: 60, paddingTop: 10},
+ },
+ {
+ label:
+
+ My Profile
+
+ ,
+ key: 'profile',
+ icon: ,
+ style: {height: 60, paddingTop: 10},
+
+ },
+ {
+ label: ({"Search Roles"}),
+ key: 'roleListing',
+ icon: ,
+ onClick: () => {
+ dispatch(filterRoleListingsByRoleId({roleIds: []}) as any);
+ dispatch(filterRoleListingsByDepartment({departments: []}) as any);
+ dispatch(filterRoleListingsByLocation({locations: []}) as any);
+ },
+ style: {height: 60, paddingTop: 10},
+ }
+ ];
+
+ if (isHR) {
+ items.push({
+ label: ({"Role Listing Management"}),
+ key: 'listingManage',
+ icon: ,
+ style: {height: 60, paddingTop: 10},
+ })
+ }
+
+ items.push({
+ label: (Logout),
+ key: 'logout',
+ danger: true,
+ icon: ,
+ style: {height: 60, paddingTop: 10},
+ })
return (
+ SBRP}
+ placement={"top"}
+ closable={false}
+ onClose={onClose}
+ open={open}
+ // style={{padding: 0}}
+ // contentWrapperStyle={{padding: 0}}
+ bodyStyle={{padding: 0}}
+ style={{backgroundColor: "#001529"}}
+ extra={
+ } type="text" onClick={() => setOpen(false)}/>
+ }
+ >
+
-
- {pages[pageName]}
+
+
+ {pages[pageName]}
-
-
- }/>
-
-
+
+
+ { // Only show the menu button if the screen is medium or smaller
+ viewportWidth <= 992 ?
+ } type="text" onClick={() => setOpen(true)}/> :
+
+
+ }/>
+
+
+ }
+
+
+
diff --git a/client/src/components/layout/Sidebar.tsx b/client/src/components/layout/Sidebar.tsx
index d1ba54b..a494e70 100644
--- a/client/src/components/layout/Sidebar.tsx
+++ b/client/src/components/layout/Sidebar.tsx
@@ -5,7 +5,7 @@ import {Link, useLocation} from 'react-router-dom';
import PropTypes from "prop-types";
import {connect, useDispatch} from "react-redux";
import {logout} from '../../actions/auth';
-import {AuditOutlined, HomeOutlined, LogoutOutlined, SearchOutlined, MenuOutlined} from '@ant-design/icons';
+import {AuditOutlined, HomeOutlined, LogoutOutlined, SearchOutlined, LeftOutlined, RightOutlined} from '@ant-design/icons';
import { filterRoleListingsByDepartment, filterRoleListingsByLocation, filterRoleListingsByRoleId } from '../../actions/roleListings';
const {Sider} = Layout;
@@ -47,32 +47,30 @@ const Sidebar = ({logout, auth: {isHR}}: any) => {
icon: ,
})
const [collapsed, setCollapsed] = useState(false);
- const [triggerStyle, setTriggerStyle] = useState({ top: 0, bottom: 'auto', left: 8, backgroundColor: 'white', height: 64, width: 50} as any)
+ const [trigger, setTrigger] = useState(null as any)
+ const [collapsedWidth, setCollapsedWidth] = useState(80)
return (
{
setCollapsed(value)
- if (!value) {
- setTriggerStyle({top: 0, bottom: 'auto', left: 200,backgroundColor: 'white', height: 64, width: 50 })
+ if (value) {
+ setTrigger()
} else {
- setTriggerStyle({top: 0, bottom: 'auto', left: 8, backgroundColor: 'white', height: 64, width: 50})
+ setTrigger()
}
- // console.log(value)
}}
- trigger={}
+ trigger={collapsedWidth !== 0 ? trigger : null}
breakpoint="lg"
- collapsedWidth="0"
+ collapsedWidth={collapsedWidth}
onBreakpoint={(broken) => {
if (!broken) {
- setCollapsed(true);
- setTriggerStyle({top: 0, bottom: 'auto', left: 200,backgroundColor: 'white', height: 64, width: 50 })
+ setCollapsedWidth(80)
+ } else {
+ setCollapsedWidth(0)
}
- // console.log(broken);
}}
- zeroWidthTriggerStyle={triggerStyle}
- // zeroWidthTriggerStyle={{top: 0, bottom: 'auto', left: 8, backgroundColor: 'white', height: 68}}
>
SPRB