Fix sidebar ui

SMUGitGeeks · Nov 7, 2023 · 1e68ae7 · 1e68ae7
1 parent 4f49f50
commit 1e68ae7
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 27 deletions.
diff --git 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: (<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>

diff --git 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: <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}/>
@@ -88,4 +86,4 @@ const mapStateToProps = (state: any) => ({
     auth: state.auth
 });
 
-export default connect(mapStateToProps, {logout})(Sidebar);
+export default connect(mapStateToProps, {logout})(Sidebar);
diff --git a/client/src/components/pages/Profile.tsx b/client/src/components/pages/Profile.tsx
@@ -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>
@@ -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}>