From 2c95548412b3b5ee678dff23b55530168c2345d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Mon, 27 Mar 2023 13:54:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/compenents/header/index.module.scss | 40 ++++++++++++++++++++++++-
 src/compenents/header/index.tsx         | 33 +++++++++++++++++++-
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/compenents/header/index.module.scss b/src/compenents/header/index.module.scss
index 1bfa1de..dd0e578 100644
--- a/src/compenents/header/index.module.scss
+++ b/src/compenents/header/index.module.scss
@@ -17,13 +17,51 @@
     justify-content: space-between;
     margin: 0 auto;
     .App-logo {
-      width: auto;
+      width: 124px;
       height: 40px;
+      text-align: left;
       img {
         width: auto;
         height: 40px;
       }
     }
+    .navs {
+      display: flex;
+      align-items: center;
+      .nav-item {
+        width: 64px;
+        height: 40px;
+        font-size: 16px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 80px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      .nav-active-item {
+        width: 64px;
+        height: 40px;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ff4d4f;
+        margin-left: 80px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
     .department-name {
       font-size: 14px;
       font-weight: 400;
diff --git a/src/compenents/header/index.tsx b/src/compenents/header/index.tsx
index 2fc5e34..0186051 100644
--- a/src/compenents/header/index.tsx
+++ b/src/compenents/header/index.tsx
@@ -3,7 +3,7 @@ import styles from "./index.module.scss";
 import { Modal, Button, Dropdown } from "antd";
 import type { MenuProps } from "antd";
 import { useDispatch, useSelector } from "react-redux";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import {
   logoutAction,
   saveCurrentDepId,
@@ -16,6 +16,7 @@ const { confirm } = Modal;
 export const Header: React.FC = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const location = useLocation();
   const user = useSelector((state: any) => state.loginUser.value.user);
   const departments = useSelector(
     (state: any) => state.loginUser.value.departments
@@ -26,6 +27,7 @@ export const Header: React.FC = () => {
   const [userInfoVisiale, setUserInfoVisiale] = useState<boolean>(false);
   const [departmentsMenu, setDepartmentsMenu] = useState<any>([]);
   const [currentDepartment, setCurrentDepartment] = useState<string>("");
+  const [currentNav, serCurrentNav] = useState(location.pathname);
 
   useEffect(() => {
     setCurrentDepartment(departments[0].name);
@@ -126,6 +128,17 @@ export const Header: React.FC = () => {
     });
   };
 
+  const navs = [
+    {
+      key: "/",
+      label: "首页",
+    },
+    {
+      key: "/recent-learn",
+      label: "最近学习",
+    },
+  ];
+
   return (
     <div className={styles["app-header"]}>
       <div className={styles["main-header"]}>
@@ -133,6 +146,24 @@ export const Header: React.FC = () => {
           <Link to="/" className={styles["App-logo"]}>
             <img src={config.systemLogo} />
           </Link>
+          <div className={styles["navs"]}>
+            {navs.map((item: any) => (
+              <div
+                key={item.key}
+                className={
+                  item.key === currentNav
+                    ? styles["nav-active-item"]
+                    : styles["nav-item"]
+                }
+                onClick={() => {
+                  serCurrentNav(item.key);
+                  navigate(item.key);
+                }}
+              >
+                {item.label}
+              </div>
+            ))}
+          </div>
         </div>
         <div className="d-flex">
           {departments.length === 1 && (