refactor: root layout

web/src/layouts/RootLayout.tsx

@@ -45,24 +45,22 @@ const RootLayout = observer(() => {
   return !initialized ? (
     <Loading />
   ) : (
-    <div className="w-full min-h-full">
+    <div className="w-full min-h-full flex flex-row justify-center items-start sm:pl-16">
-      <div className={cn("w-full transition-all mx-auto flex flex-row justify-center items-start", "sm:pl-16")}>
+      {sm && (
-        {sm && (
+        <div
-          <div
+          className={cn(
-            className={cn(
+            "group flex flex-col justify-start items-start fixed top-0 left-0 select-none border-r dark:border-zinc-800 h-full bg-zinc-100 dark:bg-zinc-800 dark:bg-opacity-40",
-              "group flex flex-col justify-start items-start fixed top-0 left-0 select-none border-r dark:border-zinc-800 h-full bg-zinc-100 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2",
+            "w-16 px-2",
-              "w-16 px-2",
+          )}
-            )}
+        >
-          >
+          <Navigation collapsed={true} />
-            <Navigation collapsed={true} />
+        </div>
-          </div>
+      )}
-        )}
+      <main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">
-        <main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">
+        <Suspense fallback={<Loading />}>
-          <Suspense fallback={<Loading />}>
+          <Outlet />
-            <Outlet />
+        </Suspense>
-          </Suspense>
+      </main>
-        </main>
-      </div>
     </div>
   );
 });