Updated header.

client/src/components/header/header.component.jsx

@@ -10,9 +10,9 @@ import Icon, {
   LineChartOutlined,
   ScheduleOutlined,
   TeamOutlined,
+  ToolFilled,
   UnorderedListOutlined,
   UserOutlined,
-  ToolFilled,
 } from "@ant-design/icons";
 import { Avatar, Menu } from "antd";
 import React from "react";
@@ -35,8 +35,6 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
-import "./header.styles.scss";
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
@@ -66,10 +64,11 @@ function Header({
   const { t } = useTranslation();
 
   return (
+    <div style={{ display: "flex" }}>
       <Menu
         mode="horizontal"
         theme="dark"
-      // style={{ backgroundColor: "#eee" }}
+        style={{ flex: 1 }}
         className="header-main-menu"
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
@@ -224,7 +223,9 @@ function Header({
           <Menu.Divider />
 
           <Menu.Item key="timetickets">
-          <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
+            <Link to="/manage/timetickets">
+              {t("menus.header.timetickets")}
+            </Link>
           </Menu.Item>
           <Menu.Item
             key="entertimetickets"
@@ -277,16 +278,15 @@ function Header({
             <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
-      <Menu.Item>
+      </Menu>
       <GlobalSearch />
-      </Menu.Item>
-      <Menu.SubMenu title={<ClockCircleFilled />}>
-        {recentItems.map((i, idx) => (
-          <Menu.Item key={idx}>
-            <Link to={i.url}>{i.label}</Link>
-          </Menu.Item>
-        ))}
-      </Menu.SubMenu>
+      <Menu
+        mode="horizontal"
+        theme="dark"
+        className="header-main-menu"
+        selectedKeys={[selectedHeader]}
+        onClick={handleMenuClick}
+      >
         <Menu.SubMenu
           title={
             <div>
@@ -341,7 +341,15 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
+        <Menu.SubMenu title={<ClockCircleFilled />}>
+          {recentItems.map((i, idx) => (
+            <Menu.Item key={idx}>
+              <Link to={i.url}>{i.label}</Link>
+            </Menu.Item>
+          ))}
+        </Menu.SubMenu>
       </Menu>
+    </div>
   );
 }
 

client/src/components/header/header.styles.scss

@@ -1,9 +0,0 @@
-.header-shop-logo {
-  background-size: cover;
-  max-width: 100%;
-  max-height: 3.5rem;
-}
-.header-main-menu {
-  //width: 95vw;
-  //float: left;
-}