client: hide left & right sidebar on scroll

client/src/App.css

@@ -92,4 +92,13 @@
     #main.expand {
         filter: blur(4px);
     }
+
+    #main.full-height {
+        max-height: 100dvh;
+        margin-top: 0;
+    }
+
+    .hide {
+        display: none !important;
+    }
 }

client/src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import { useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import { ProtectedRoute } from "./ProtectedRoute";
 import { Theme, useNavStore } from "./store/useNavStore";
@@ -26,10 +26,34 @@ export default function App() {
     handleAutoLogin(setRoute, setUser, setIsAuthenticated, setAuthTab);
   }, [setRoute, setUser, setIsAuthenticated, setAuthTab]);
 
+  const mainRef = useRef<HTMLDivElement>(null);
+  const [isScrollingUp, setIsScrollingUp] = useState<boolean>(true);
+  let lastScrollTop = 0;
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (mainRef.current) {
+        const st = mainRef.current.scrollTop;
+        if (st > lastScrollTop && st > 200) setIsScrollingUp(false);
+        else setIsScrollingUp(true);
+        lastScrollTop = st <= 0 ? 0 : st;
+      }
+    };
+
+    if (mainRef.current) {
+      mainRef.current.addEventListener('scroll', handleScroll, { passive: true });
+    }
+    return () => {
+      if (mainRef.current) {
+        mainRef.current.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, []);
+
   return (
     <div id='app'>
-      <LeftSidebar />
-      <main id='main' className={`${expand ? 'expand' : ''}`}>
+      <LeftSidebar isVisible={isScrollingUp} />
+      <main id='main' ref={mainRef} className={`${expand ? 'expand' : ''} ${isScrollingUp ? '' : 'full-height'}`}>
         <Routes>
           <Route path='/' element={<HomePage />} />
           <Route path='/auth' element={<AuthPage />} />
@@ -42,7 +66,7 @@ export default function App() {
           <Route path='/notifications' element={<ProtectedRoute><NotificationPage /></ProtectedRoute>} />
         </Routes>
       </main>
-      <RightSidebar />
+      <RightSidebar isVisible={isScrollingUp} />
 
       {authTab !== AuthTab.Closed && <AuthModal />}
 

client/src/components/sidebar/left-sidebar.tsx

@@ -8,7 +8,11 @@ import Profile from "./profile";
 import { GoPerson } from "react-icons/go";
 import LoadingSkeleton from "../loading/skeleton";
 
-const LeftSidebar = () => {
+interface SidebarProps {
+  isVisible: boolean
+}
+
+const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -34,7 +38,7 @@ const LeftSidebar = () => {
   }
 
   return (
-    <div id='left-sidebar'>
+    <div id='left-sidebar' className={isVisible ? '' : 'hide'}>
       <Link to='/' className='logo__wrapper'>
         <img src="/logo.png" alt="" />
       </Link>

client/src/components/sidebar/right-sidebar.tsx

@@ -5,11 +5,15 @@ import ToggleTheme from "../button/toggle-theme";
 import Profile from "./profile";
 import Explore from "./explore";
 
-const RightSidebar = () => {
+interface SidebarProps {
+  isVisible: boolean
+}
+
+const RightSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   const { expand } = useNavStore();
 
   return (
-    <div id='right-sidebar'>
+    <div id='right-sidebar' className={isVisible ? '' : 'hide'}>
       <div className='right-sidebar__container'>
         <Link to='/' className='logo__container'>
           <img src="/logo.png" />