header visible & search bar style

BrainEno · May 14, 2021 · e3448cc · e3448cc
1 parent 449aefa
commit e3448cc
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 30 deletions.
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -2,7 +2,13 @@ import React from "react";
 
 const Footer = () => {
   return (
-    <div>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}>
       <p>Copyright © 2021 BOT THK. All rights reserved.</p>
     </div>
   );

diff --git a/components/Header.jsx b/components/Header.jsx
@@ -5,7 +5,7 @@ import NProgress from "nprogress";
 import { signout, isAuth } from "../actions/auth";
 import Search from "./blog/Search";
 import { useRouter } from "next/router";
-import { MenuOutlined } from "@ant-design/icons";
+import { MenuOutlined, SecurityScanTwoTone } from "@ant-design/icons";
 import { APP_NAME } from "../config";
 import Avatar from "../components/profile/Avatar";
 
@@ -15,6 +15,7 @@ const Header = () => {
   const router = useRouter();
   const [menuActive, setMenuActive] = useState(false);
   const [userData, setUserData] = useState({});
+  const [scrollDown, setScrollDown] = useState(false);
 
   const menuRef = useRef(null);
   const btnRef = useRef(null);
@@ -34,6 +35,33 @@ const Header = () => {
     }
   };
 
+  const handleScrolling = () => {
+    let currScrollPos;
+    let preScrollPos =
+      document.body.scrollTop || document.documentElement.scrollTop;
+
+    window.addEventListener("scroll", () => {
+      currScrollPos =
+        document.body.scrollTop || document.documentElement.scrollTop;
+
+      if (currScrollPos - preScrollPos > 0) {
+        setScrollDown(true);
+      } else {
+        setScrollDown(false);
+      }
+      preScrollPos = currScrollPos;
+    });
+  };
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      handleScrolling();
+    }
+    return () => {
+      window.removeEventListener("scroll", handleScrolling);
+    };
+  }, []);
+
   useEffect(() => {
     document.addEventListener("click", handleClickOutside, true);
     return () => {
@@ -64,7 +92,9 @@ const Header = () => {
   }, []);
 
   return (
-    <nav className='site-navigation'>
+    <nav
+      className='site-navigation'
+      style={scrollDown ? { opacity: "0" } : { opacity: "1" }}>
       <span className='menu-title'>
         {/* <Link href='/'>
           <a style={{ fontWeight: 700, fontFamily: "-apple-system" }}>
@@ -127,6 +157,7 @@ const Header = () => {
             <Link href={isAuth() && isAuth().role === 1 ? `/admin/` : `/user/`}>
               <div className='my-avatar'>
                 <Avatar
+                  title='个人主页'
                   size={38}
                   src={`${process.env.NEXT_PUBLIC_API}/user/photo/${userData.username}`}
                 />

diff --git a/components/blog/Search.jsx b/components/blog/Search.jsx
@@ -28,7 +28,6 @@ const Search = () => {
   };
 
   const handleChange = (e) => {
-    console.log(e.target.value);
     setValues({
       ...values,
       search: e.target.value,
@@ -64,7 +63,18 @@ const Search = () => {
               className='drop-items'
               style={{ display: { searched } ? "" : none }}>
               <Link href={`/blogs/${blog._id}`}>
-                <a className='title-text'>{blog.title}</a>
+                <a
+                  className='title-text'
+                  onClick={() => {
+                    setValues({
+                      ...values,
+                      search: "",
+                      results: [],
+                      searched: false,
+                    });
+                  }}>
+                  {blog.title}
+                </a>
               </Link>
             </div>
           );
@@ -75,14 +85,15 @@ const Search = () => {
 
   const searchForm = () => (
     <form onSubmit={searchSubmit} className='search-form'>
-      <div className='search-container'>
-        <SearchOutlined />
+      <div
+        className={classNames("search-container", {
+          searched: searched,
+        })}>
+        <SearchOutlined as='button' type='submit' onClick={searchSubmit} />
         <input
           type='text'
           value={search}
-          className={classNames("search-input", {
-            "searched-container": searched,
-          })}
+          className={"search-input"}
           onChange={handleChange}
         />
       </div>

diff --git a/components/crud/BlogRead.jsx b/components/crud/BlogRead.jsx
@@ -49,21 +49,19 @@ const BlogRead = ({ username }) => {
     if (isAuth() && isAuth().role === 0) {
       return (
         <Link href={`/user/crud/${blog._id}`}>
-          <a className='update-btn'>
+          <button className='update-btn'>
             <EditOutlined />
             更新
-          </a>
+          </button>
         </Link>
       );
     } else if (isAuth() && isAuth().role === 1) {
       return (
         <Link href={`/admin/crud/${blog._id}`}>
-          <>
-            <button className='update-btn'>
-              <EditOutlined />
-              更新
-            </button>
-          </>
+          <button className='update-btn'>
+            <EditOutlined />
+            更新
+          </button>
         </Link>
       );
     }

diff --git a/components/profile/Avatar.jsx b/components/profile/Avatar.jsx
@@ -1,8 +1,9 @@
 import React from "react";
 
-const Avatar = ({ src, size, radius }) => {
+const Avatar = ({ src, size, radius, title = "" }) => {
   return (
     <div
+      title={title}
       style={{
         backgroundImage: src ? `url('${src}') ` : "",
         width: `${size}px`,

diff --git a/components/profile/UserDashboard.jsx b/components/profile/UserDashboard.jsx
@@ -26,6 +26,7 @@ const UserDashboard = (router) => {
           <div className='avatar-container'>
             <a href={`/profile/${user.username}`}>
               <Avatar
+                title='查看所有'
                 size={100}
                 radius={100}
                 src={`${process.env.NEXT_PUBLIC_API}/user/photo/${user.username}`}
@@ -49,7 +50,7 @@ const UserDashboard = (router) => {
         <ul>
           <li>
             <Link href='/'>
-              <HomeOutlined />
+              <HomeOutlined title='返回首页' />
             </Link>
             <Link href='/'>
               <span className='span-text'>返回首页</span>
@@ -62,7 +63,7 @@ const UserDashboard = (router) => {
                   ? "/admin/crud/blog"
                   : "/user/crud/blog"
               }>
-              <FormOutlined />
+              <FormOutlined title='新建文章' />
             </Link>
             <Link
               href={
@@ -80,7 +81,7 @@ const UserDashboard = (router) => {
                   ? "/admin/crud/blogs"
                   : "/user/crud/blogs"
               }>
-              <EditOutlined />
+              <EditOutlined title='编辑文章' />
             </Link>
             <Link
               href={

diff --git a/pages/index.jsx b/pages/index.jsx
@@ -6,6 +6,7 @@ import { singleCategory } from "../actions/category";
 import { mergeStyles } from "../helper/mergeStyles";
 import { APP_NAME, DOMAIN } from "../config";
 import Carousel from "../components/carousel/Carousel";
+import Footer from "../components/Footer";
 import Link from "next/link";
 
 const Index = ({ router, recentPost }) => {
@@ -132,6 +133,7 @@ const Index = ({ router, recentPost }) => {
           </div>
         </section>
       </main>
+      <Footer />
     </>
   );
 };

diff --git a/pages/profile/[username].jsx b/pages/profile/[username].jsx
@@ -49,6 +49,7 @@ const UserProfile = ({ user, blogs, query }) => {
           <div className='avatar-container'>
             <a href={`/user/update`}>
               <Avatar
+                title='编辑个人资料'
                 size={100}
                 radius={100}
                 src={`${process.env.NEXT_PUBLIC_API}/user/photo/${user.username}`}

diff --git a/styles/_header.scss b/styles/_header.scss
@@ -10,6 +10,7 @@
   position: sticky;
   z-index: 100;
   top: 0;
+  transition: all ease-out 0.2s;
 
   .menu-title {
     font-size: 24px !important;

diff --git a/styles/_search.scss b/styles/_search.scss
@@ -21,16 +21,17 @@
     align-items: center;
     border-radius: 25px;
     padding: 4px;
-    transition: all ease-in 2s;
+    transition: all ease-in 0.2s;
 
     &.searched {
       border-bottom: none;
-      border-radius: 15px;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
       box-shadow: none;
-    }
-
-    &:focus-within {
-      border: #000 1px solid;
+      outline: none;
+      border-bottom-left-radius: 0%;
+      border-bottom-right-radius: 0%;
+      box-shadow: 0 -2px 5px 2px #e6e6e6;
     }
 
     & .anticon {
@@ -48,6 +49,7 @@
       & svg {
         width: 20px;
         height: 20px;
+        z-index: 4;
       }
     }
 
@@ -69,13 +71,15 @@
   display: flex;
   justify-content: center;
   width: 300px;
+  transition: all ease-in 0.2s;
 
   & .drop {
+    transition: all ease-in 0.2s;
     padding: 15px 5px;
     position: absolute;
     width: 300px;
     height: 150px;
-    top: 28px;
+    top: 52.5px;
     display: flex;
     justify-content: center;
     flex-direction: column;

diff --git a/styles/main.scss b/styles/main.scss
@@ -112,7 +112,7 @@ a {
   background: linear-gradient(
     180deg,
     transparent 0%,
-    transparent 18%,
+    transparent 0%,
     rgba(0, 0, 0, 0) 99%,
     rgba(0, 0, 0, 0) 100%
   );