client: add tranistion

client/src/App.css

@@ -85,20 +85,10 @@
     #main {
         padding: 10px;
         width: 100%;
-        max-height: calc(100dvh - 120px);
-        margin-top: 60px;
+        padding-top: 70px;
     }
 
     #main.expand {
         filter: blur(4px);
     }
-
-    #main.full-height {
-        max-height: 100dvh;
-        margin-top: 0;
-    }
-
-    .hide {
-        display: none !important;
-    }
 }

client/src/App.tsx

@@ -53,7 +53,7 @@ export default function App() {
   return (
     <div id='app'>
       <LeftSidebar isVisible={isScrollingUp} />
-      <main id='main' ref={mainRef} className={`${expand ? 'expand' : ''} ${isScrollingUp ? '' : 'full-height'}`}>
+      <main id='main' ref={mainRef} className={expand ? 'expand' : ''}>
         <Routes>
           <Route path='/' element={<HomePage />} />
           <Route path='/auth' element={<AuthPage />} />

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

@@ -119,6 +119,16 @@
 }
 
 @media screen and (max-width: 767px) {
+    #left-sidebar.reveal {
+        margin-bottom: 0;
+        transition: all 0.15s ease-in;
+    }
+
+    #left-sidebar.hide {
+        margin-bottom: -60px;
+        transition: all 0.3s ease-out;
+    }
+
     #left-sidebar ul {
         gap: 30px;
     }

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

@@ -38,7 +38,7 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   }
 
   return (
-    <div id='left-sidebar' className={isVisible ? '' : 'hide'}>
+    <div id='left-sidebar' className={isVisible ? 'reveal' : 'hide'}>
       <Link to='/' className='logo__wrapper'>
         <img src="/logo.png" alt="" />
       </Link>

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

@@ -85,6 +85,16 @@
 }
 
 @media screen and (max-width: 480px) {
+    #right-sidebar.reveal {
+        margin-top: 0;
+        transition: all 0.15s ease-in;
+    }
+
+    #right-sidebar.hide {
+        margin-top: -60px;
+        transition: all 0.3s ease-out;
+    }
+
     #right-sidebar .right-sidebar__container {
         padding: 0 10px;
         display: flex;

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

@@ -13,7 +13,7 @@ const RightSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   const { expand } = useNavStore();
 
   return (
-    <div id='right-sidebar' className={isVisible ? '' : 'hide'}>
+    <div id='right-sidebar' className={isVisible ? 'reveal' : 'hide'}>
       <div className='right-sidebar__container'>
         <Link to='/' className='logo__container'>
           <img src="/logo.png" />