added effect to navbar

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;

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;

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;

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 {

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 }) => {