feat: 完成了菜单和NotFound页面

src/App.tsx

@@ -5,6 +5,7 @@ import HeaderComponent from "./Components/HeaderComponent";
 import ArticleList from "./Components/ArticleList";
 import MenuComponent from "./Components/MenuComponent";
 import { Routes, Route } from "react-router-dom";
+import NotFoundComponent from "./Components/NotFoundComponent";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
       <MenuComponent />
       <Routes>
         <Route path="/" element={<ArticleList />}></Route>
+        <Route path="*" element={<NotFoundComponent />} />
       </Routes>
     </div>
   );

src/Components/ArticleList.tsx

@@ -24,7 +24,6 @@ function ArticleList() {
   const codimdStatus = useSelector(selectCodimdState);
 
   useEffect(() => {
-    console.log(codimdStatus);
     getList(codimdStatus, dispatch);
   }, [codimdStatus, dispatch]);
 

src/Components/HeaderComponent.tsx

@@ -1,15 +1,16 @@
+import { Link } from "react-router-dom";
 import "./HeaderComponent.sass";
 
 function HeaderComponent() {
   return (
     <div className="header-div">
-      <a href="https://www.shellmiao.com">
+      <Link to={"/"}>
         <img
           className="avatar"
           src="https://pic.shellmiao.com/2022/05/25/628df4743b4b8.jpeg"
           alt="avatar"
         />
-      </a>
+      </Link>
       <h1 className="header-id-h1">Shellmiao</h1>
       <p className="header-p">
         🇨🇳 <b>China Beijing</b>

src/Components/MenuComponent.sass

@@ -1,28 +1,63 @@
-$color: #cbcbcb
 $height-icon: 16px
+
 $width-line: 25px
 $height-line: 2px
 
 $transition-time: 0.4s
+
 $rotation: 45deg
+
 $translateY: ($height-icon / 2)
 $translateX: 0
 
-#menu-component-div
-    background: #dddddd
+$background: #dddddd
+
+$color: #cbcbcb
+$hoverColor: #ababab
+
+$bottom: 64px
+$right: 24px
+$padding: 10px 6px
+$spacing: 64px
+
+#menu-hamburger-div,#menu-pic-div,#menu-article-div
+    background: $background
     position: absolute
-    right: 24px
-    bottom: 64px
-    padding: 10px 6px
+    padding: $padding
     border-radius: 5px
+    right: $right
 
-#hamburger-icon
+    transition: all $transition-time
+    -webkit-transition: all $transition-time
+    -moz-transition: all $transition-time
+
+#menu-hamburger-div,#menu-pic-div,#menu-article-div
+    bottom: $bottom
+
+#menu-hamburger-div
+    z-index: 3
+#menu-pic-div
+    z-index: 2
+#menu-article-div
+    z-index: 1
+
+#article-icon,#pic-icon,#hamburger-icon
     width: $width-line
     height: $height-icon
     position: relative
     display: block
     cursor: pointer
-    padding:
+    color: $color
+    &:hover, &:focus
+        color: $hoverColor
+
+.active
+    #menu-article-div
+        transform: translateY($spacing * -1)
+    #menu-pic-div
+        transform: translateY($spacing * -2)
+
+#hamburger-icon
     .line
         display: block
         background: $color
@@ -41,6 +76,8 @@ $translateX: 0
         &.line-3
             top: 100%
     &:hover, &:focus
+        .line
+            background: $hoverColor
         .line-1
             transform: translateY($height-line * -1)
             -webkit-transform: translateY($height-line * -1)

src/Components/MenuComponent.tsx

@@ -1,23 +1,47 @@
 import { useState } from "react";
 import "./MenuComponent.sass";
+import { ReadOutlined, PictureOutlined } from "@ant-design/icons";
+import { Link } from "react-router-dom";
 
 function MenuComponent() {
   const [ifActive, setIfAvtive] = useState<Boolean>(false);
 
   const activeFlag = ifActive ? " active" : "";
+
+  const menu = (
+    <div className={activeFlag}>
+      <div id="menu-article-div">
+        <Link to={"/"}>
+          <div id="article-icon">
+            <ReadOutlined />
+          </div>
+        </Link>
+      </div>
+      <div id="menu-pic-div">
+        <Link to={"/pic"}>
+          <div id="pic-icon">
+            <PictureOutlined />
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
   return (
-    <div id="menu-component-div">
-      <div
-        id="hamburger-icon"
-        onClick={() => {
-          setIfAvtive(!activeFlag);
-        }}
-        className={activeFlag}
-      >
-        <span className="line line-1"></span>
-        <span className="line line-2"></span>
-        <span className="line line-3"></span>
+    <div id="menu-div">
+      <div id="menu-hamburger-div">
+        <div
+          id="hamburger-icon"
+          onClick={() => {
+            setIfAvtive(!activeFlag);
+          }}
+          className={activeFlag}
+        >
+          <span className="line line-1"></span>
+          <span className="line line-2"></span>
+          <span className="line line-3"></span>
+        </div>
       </div>
+      {menu}
     </div>
   );
 }

src/Components/NotFoundComponent.sass

@@ -0,0 +1,2 @@
+.not-found-div
+    color: #cbcbcb

src/Components/NotFoundComponent.tsx

@@ -0,0 +1,13 @@
+import { FileExclamationOutlined } from "@ant-design/icons";
+import "./NotFoundComponent.sass";
+
+function NotFoundComponent() {
+  return (
+    <div className="not-found-div">
+      <FileExclamationOutlined />
+      &nbsp; 什么也没找到呢,点击喵喵返回主页
+    </div>
+  );
+}
+
+export default NotFoundComponent;