Sidebar profile

src/App.tsx

@@ -35,21 +35,20 @@ export default function App() {
           <NewProfilePage appRef={appRef} />
         ) : (
           <>
-            <ServerList appRef={appRef} />
             <ResizablePanelGroup orientation="horizontal" className="h-screen">
-              {appRef.current.server?.meta && (
-                <>
               <ResizablePanel
-                    defaultSize="500px"
+                defaultSize="600px"
-                    maxSize="350px"
+                maxSize="400px"
-                    className="shrink-0"
+                minSize="4rem"
                 groupResizeBehavior="preserve-pixel-size"
               >
+                <div className="flex">
+                  <ServerList appRef={appRef} />
                   <Sidebar appRef={appRef} />
+                </div>
               </ResizablePanel>
               <ResizableHandle withHandle />
-                </>
+
-              )}
               <ResizablePanel defaultSize="100%">
                 <div className="h-screen"></div>
               </ResizablePanel>

src/components/view/Sidebar.tsx

@@ -58,8 +58,9 @@ export default function Sidebar({
   appRef: React.RefObject<Enclave | null>;
 }) {
   return (
-    appRef.current?.server?.meta && (
+    <div className="h-screen relative w-full @container">
-      <div className="h-screen">
+      {appRef.current?.server?.meta && (
+        <>
           <header className="px-3 pt-2.5 pb-2.5 text-lg font-semibold border-b border-b-border">
             <h1>{appRef.current.server.meta.name}</h1>
           </header>
@@ -67,7 +68,10 @@ export default function Sidebar({
           <section className="px-1.5 pt-3.5 w-full flex flex-col gap-1">
             <RenderChannels channels={appRef.current.server.meta.channels} />
           </section>
+        </>
+      )}
+
+      <div className="absolute -left-16 right-16 bottom-0 h-24 w-[calc(100%+4rem-2rem)] z-10 ml-4 mb-4 @max-[150px]:hidden" />
     </div>
-    )
   );
 }