fix: dashboard header

TrackER-Corporation · May 5, 2023 · 220df9e · 220df9e
1 parent c0eff66
commit 220df9e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/src/Consumer/DashboardRoutes.tsx b/src/Consumer/DashboardRoutes.tsx
@@ -10,7 +10,7 @@ import { LinkHover } from "../Components/CustomComponents";
 import { setAllOrganization } from "../reducers/allOrganization";
 import { setAllUser } from "../reducers/allUsers";
 import { useAppDispatch, useAppSelector } from "../hooks";
-import { DefaultRoute, MenuLayout, defaultLogo, defaultProps } from "./utils";
+import { DefaultRoute, defaultLogo, defaultProps } from "./utils";
 import api from "../api";
 import "./Dashboard.less"
 
@@ -64,10 +64,7 @@ const DashboardRoutes = () => {
 
     useEffect(() => {
         window.addEventListener('resize', handleWindowSizeChange);
-        return () => {
-            console.log(width)
-            window.removeEventListener('resize', handleWindowSizeChange);
-        }
+        return () => window.removeEventListener('resize', handleWindowSizeChange);
     }, []);
 
     return (
@@ -79,10 +76,6 @@ const DashboardRoutes = () => {
             navTheme="light"
             menu={{ defaultOpenAll: true }}
             waterMarkProps={{ content: 'TrackER', }}
-            headerRender={() =>
-                width >= 768 ? <Header avatar={userAvatar} /> :
-                    MenuLayout(navigate, pathname, userAvatar, setPathname, user, allOrganization, allUser)
-            }
             footerRender={() =>
                 <DefaultFooter style={{ backgroundColor: "#f7fafd", }}
                     copyright="2023 by TrackER All Rights Reserved"
@@ -123,6 +116,7 @@ const DashboardRoutes = () => {
             )}
             {...settings}
         >
+            {width >= 768 && <Header avatar={userAvatar} />}
             {DefaultRoute(navigate, userAvatar, setPathname, user, allOrganization, allUser)}
         </ProLayout >
     );

diff --git a/src/Consumer/Header/Header.tsx b/src/Consumer/Header/Header.tsx
@@ -10,21 +10,32 @@ const Header = ({ avatar }: any) => {
     const type = user.type
 
     return (
-        <Row justify="center" style={{ marginTop: "15px", }}>
-            <Row style={{ fontWeight: 500, width: "95%", backgroundColor: "white", borderRadius: "10px", paddingRight: 30, paddingLeft: 30, height: 50 }} align="middle" justify="space-between">
+        <Row justify="center" style={{ marginTop: "15px" }}>
+            <Row style={{
+                fontWeight: 500,
+                width: "95%",
+                backgroundColor: "white",
+                borderRadius: "10px",
+                paddingRight: 30,
+                paddingLeft: 30,
+                height: 50,
+                boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
+            }}
+                align="middle"
+                justify="space-between">
                 <Row align="middle">
-                    <Col style={{ borderRadius: 10, height: 40, width: 40, background: "#ebfafa", textAlign: "center", marginRight: 5 }}>
-                        <IconFont type="i-zixun" style={{ color: "blue", verticalAlign: "baseline" }} />
-                    </Col>
-                    <Col>
-                        <p style={{ height: "32px" }}> Do you know the latest update of our 2023? 🎉 </p>
-                    </Col>
-                    <Col>
-                        <p style={{ color: "#fea5b1", height: "32px", marginLeft: 5 }}>Check our program for 2022.</p>
+                    <Col style={{ borderRadius: 10, height: 32, width: 32, background: "#ebfafa", textAlign: "center", marginRight: 5 }}>
+                        <IconFont type="i-zixun" style={{ color: "blue", verticalAlign: "baseline", fontSize: 27 }} />
                     </Col>
+                    <p style={{ margin: 0 }}>Do you know the latest update of our 2023? 🎉 </p>
+                    <p style={{ color: "#fea5b1", margin: 0, marginLeft: 5 }}>Check our program for 2022.</p>
                 </Row>
                 <Space>
-                    <Dropdown menu={headerMenu(type, dispatch) as any} placement="bottomRight" overlayStyle={{ borderRadius: 10 }}>
+                    <Dropdown
+                        menu={headerMenu(type, dispatch) as any}
+                        placement="bottomRight"
+                        overlayStyle={{ borderRadius: 10 }}
+                    >
                         <Row justify="space-between" align="middle" >
                             <p style={{ color: "blue", margin: 0, marginRight: 6 }}>{user.name} {user.surname}</p>
                             <AvatarHover size={"default"} src={avatar} />