Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix sidebar ui #63

Merged
merged 1 commit into from
Nov 7, 2023
Merged

Fix sidebar ui #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 124 additions & 11 deletions client/src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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: (<Link to={"/"}>{"Home"}</Link>),
key: '/',
icon: <HomeOutlined/>,
style: {height: 60, paddingTop: 10},
},
{
label:
<Link to={"/profile"}>
My Profile
</Link>
,
key: 'profile',
icon: <UserOutlined/>,
style: {height: 60, paddingTop: 10},

},
{
label: (<Link to={"/roleListing"}>{"Search Roles"}</Link>),
key: 'roleListing',
icon: <SearchOutlined/>,
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: (<Link to={"/listingManage"}>{"Role Listing Management"}</Link>),
key: 'listingManage',
icon: <AuditOutlined/>,
style: {height: 60, paddingTop: 10},
})
}

items.push({
label: (<Link to={""} onClick={logout}>Logout</Link>),
key: 'logout',
danger: true,
icon: <LogoutOutlined/>,
style: {height: 60, paddingTop: 10},
})

return (
<Container>
<Drawer
title={<div style={{color: "white"}}>SBRP</div>}
placement={"top"}
closable={false}
onClose={onClose}
open={open}
// style={{padding: 0}}
// contentWrapperStyle={{padding: 0}}
bodyStyle={{padding: 0}}
style={{backgroundColor: "#001529"}}
extra={
<Button icon={<CloseOutlined style={{color: "white"}}/>} type="text" onClick={() => setOpen(false)}/>
}
>
<Menu
theme='dark'
defaultSelectedKeys={pageName === "" ? ["/"] : [pageName]}
items={items}
title='SBRP'
style={{textAlign:"center", height: "100%", fontSize: "14pt"}}
mode='vertical'
onSelect={() => setOpen(false)}
/>
</Drawer>
<Row gutter={rowGutterStyle} align='middle' justify='space-between' style={{width: "100%"}}>
<Col style={{marginLeft: 50}}>
<span style={{fontWeight: "bolder", fontSize: "16pt"}}>{pages[pageName]}
<Col>
<span style={{fontWeight: "bolder", fontSize: "16pt"}}>
{pages[pageName]}
</span>
</Col>
<Col>
<Tooltip title={"User id: " + user}>
<Link to={"/profile"}>
<Avatar size="large" icon={<UserOutlined/>}/>
</Link>
</Tooltip>
<Row>
<Col>
{ // Only show the menu button if the screen is medium or smaller
viewportWidth <= 992 ?
<Button icon={<MenuOutlined />} type="text" onClick={() => setOpen(true)}/> :
<Tooltip title={"User id: " + user}>
<Link to={"/profile"}>
<Avatar size="large" icon={<UserOutlined/>}/>
</Link>
</Tooltip>
}
</Col>

</Row>
</Col>
</Row>
</Container>
Expand Down
26 changes: 12 additions & 14 deletions client/src/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -47,32 +47,30 @@ const Sidebar = ({logout, auth: {isHR}}: any) => {
icon: <LogoutOutlined/>,
})
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 (
<Sider
collapsible
collapsed={collapsed}
onCollapse={(value) => {
setCollapsed(value)
if (!value) {
setTriggerStyle({top: 0, bottom: 'auto', left: 200,backgroundColor: 'white', height: 64, width: 50 })
if (value) {
setTrigger(<RightOutlined />)
} else {
setTriggerStyle({top: 0, bottom: 'auto', left: 8, backgroundColor: 'white', height: 64, width: 50})
setTrigger(<LeftOutlined />)
}
// console.log(value)
}}
trigger={<MenuOutlined style={{color: "black", fontSize: 25}}/>}
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}}
>
<h3 style={{color: "white", textAlign: "center"}}>SPRB</h3>
<Menu theme="dark" defaultSelectedKeys={pageName === "" ? ["/"] : [pageName]} mode="inline" items={items}/>
Expand All @@ -88,4 +86,4 @@ const mapStateToProps = (state: any) => ({
auth: state.auth
});

export default connect(mapStateToProps, {logout})(Sidebar);
export default connect(mapStateToProps, {logout})(Sidebar);
4 changes: 2 additions & 2 deletions client/src/components/pages/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const Profile = ({
return (
<Container>
<Row justify='center'>
<Col span={16}>
<Col xs={22} sm={22} md={22} lg={16}>
<Card>
<Space size={20} direction="vertical" style={{width: "100%"}}>
<h2 style={{marginTop: 0}}>My Skills</h2>
Expand All @@ -68,7 +68,7 @@ const Profile = ({
<Spin/>
</div>
: filteredSkills.length !== 0 ?
<Space direction="horizontal" size={10}>
<Space direction="horizontal" size={10} wrap>
{filteredSkills.map((skill: any) => (
<Tag style={{padding: 10}} color={color(skill.ss_status)}
icon={tagIcon(skill.ss_status)} key={skill.skill_id}>
Expand Down