From e3448ccb3278b699e3a91b7932ab6b1a9383201e Mon Sep 17 00:00:00 2001 From: Bruce Bryant <793041663@qq.com> Date: Sat, 15 May 2021 01:38:59 +0800 Subject: [PATCH] header visible & search bar style --- components/Footer.jsx | 8 ++++++- components/Header.jsx | 35 ++++++++++++++++++++++++++-- components/blog/Search.jsx | 25 ++++++++++++++------ components/crud/BlogRead.jsx | 14 +++++------ components/profile/Avatar.jsx | 3 ++- components/profile/UserDashboard.jsx | 7 +++--- pages/index.jsx | 2 ++ pages/profile/[username].jsx | 1 + styles/_header.scss | 1 + styles/_search.scss | 18 ++++++++------ styles/main.scss | 2 +- 11 files changed, 86 insertions(+), 30 deletions(-) diff --git a/components/Footer.jsx b/components/Footer.jsx index 1fe9bc4..072223e 100644 --- a/components/Footer.jsx +++ b/components/Footer.jsx @@ -2,7 +2,13 @@ import React from "react"; const Footer = () => { return ( -
+

Copyright © 2021 BOT THK. All rights reserved.

); diff --git a/components/Header.jsx b/components/Header.jsx index e892164..c956398 100644 --- 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 ( -