From 67737f8a9ecf51fe4cb54486f7a66408a463ecf2 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Fri, 24 Feb 2023 20:57:51 +0100
Subject: [PATCH] added effect to navbar

---
 src/components/Board.jsx                | 17 ++++++++++++++++-
 src/components/Catalog.jsx              | 17 ++++++++++++++++-
 src/components/Thread.jsx               | 17 ++++++++++++++++-
 src/components/styles/Board.styled.jsx  |  1 +
 src/components/styles/Thread.styled.jsx | 16 ++++++++++------
 5 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index 1c6dfd3b..b47d6274 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -16,6 +16,8 @@ const Board = ({ setBodyStyle }) => {
   const [subject, setSubject] = useState('');
   const [comment, setComment] = useState('');
   const navigate = useNavigate();
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
 
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
 
@@ -108,6 +110,19 @@ const Board = ({ setBodyStyle }) => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollPos = window.pageYOffset;
+
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [prevScrollPos, visible]);
+
   const handleVoidClick = () => {}
 
   const handleClick = (title, address) => {
@@ -249,7 +264,7 @@ const Board = ({ setBodyStyle }) => {
             )}>Home</Link>
             ]
           </span>
-          <div id="board-nav-mobile">
+          <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
             <div className="board-select">
               <strong>Board</strong>
               &nbsp;
diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx
index 15daddab..d629ede5 100644
--- a/src/components/Catalog.jsx
+++ b/src/components/Catalog.jsx
@@ -17,6 +17,8 @@ const Catalog = ({ setBodyStyle }) => {
   const [subject, setSubject] = useState('');
   const [comment, setComment] = useState('');
   const navigate = useNavigate();
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
 
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
 
@@ -107,6 +109,19 @@ const Catalog = ({ setBodyStyle }) => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollPos = window.pageYOffset;
+
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [prevScrollPos, visible]);
+
   const handleVoidClick = () => {}
 
   const handleClick = (title, address) => {
@@ -236,7 +251,7 @@ const Catalog = ({ setBodyStyle }) => {
             )}>Home</Link>
             ]
           </span>
-          <div id="board-nav-mobile">
+          <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
             <div className="board-select">
               <strong>Board</strong>
               &nbsp;
diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx
index fabb443b..c2b43766 100644
--- a/src/components/Thread.jsx
+++ b/src/components/Thread.jsx
@@ -12,6 +12,8 @@ const Thread = ({ setBodyStyle }) => {
   const [showReplyFormLink, setShowReplyFormLink] = useState(true);
   const [showReplyForm, setShowReplyForm] = useState(false);
   const navigate = useNavigate();
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
 
   const comment = useComment(`${selectedThread}`);
   
@@ -32,6 +34,19 @@ const Thread = ({ setBodyStyle }) => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollPos = window.pageYOffset;
+
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [prevScrollPos, visible]);
+
   const handleVoidClick = () => {}
 
   const handleClick = (title, address) => {
@@ -159,7 +174,7 @@ const Thread = ({ setBodyStyle }) => {
             )}>Home</Link>
             ]
           </span>
-          <div id="board-nav-mobile">
+          <div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}>
             <div className="board-select">
               <strong>Board</strong>
               &nbsp;
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index ffdcd2d0..9bb43247 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -47,6 +47,7 @@ export const NavBar = styled.div`
       z-index: 9001;
       display: block !important;
       clear: left !important;
+      transition: top 0.3s ease-in-out;
     }
 
     .board-select {
diff --git a/src/components/styles/Thread.styled.jsx b/src/components/styles/Thread.styled.jsx
index cde43b46..7946f683 100644
--- a/src/components/styles/Thread.styled.jsx
+++ b/src/components/styles/Thread.styled.jsx
@@ -17,12 +17,12 @@ export const ReplyFormLink = styled.div`
     }
 
     #post-form-link-mobile {
-        margin: 11px 0;
-        font-size: 13px;
-        text-align: center;
-        font-weight: 700;
-        display: block !important;
-        padding-top: 10px;
+      margin: 11px 0;
+      font-size: 13px;
+      text-align: center;
+      font-weight: 700;
+      display: block !important;
+      padding-top: 10px;
     }
 
     #return-button-mobile, #catalog-button-mobile, #bottom-button-mobile, #bottom-bar-top {
@@ -38,6 +38,10 @@ export const ReplyFormLink = styled.div`
     #btns-container {
       text-align: center;
     }
+
+    .bottom-bar-top {
+
+    }
   }
 
   ${({ selectedStyle }) => {