mobile

frontend/src/routes/AtlasPage.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { useSystemStructures } from "../hooks/useSystemStructures.js";
 import { useAtlasStore } from "../store/useAtlasStore.js";
 import { Scene } from "../components/viewer/Scene.js";
@@ -7,13 +8,39 @@ import { SearchNav } from "../components/SearchNav.js";
 import { StructureInfoPanel } from "../components/StructureInfoPanel.js";
 import { QuickRegionNav } from "../components/QuickRegionNav.js";
 
+// Em telas pequenas não há espaço para os 3 painéis lado a lado — os
+// laterais viram gavetas (drawers) que deslizam por cima do visualizador
+// 3D, que fica sempre em tela cheia (é o que importa pra estudar).
 export default function AtlasPage() {
   const visibleSystems = useAtlasStore((s) => s.visibleSystems);
   const { bySlug } = useSystemStructures(visibleSystems);
+  const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
+
+  const [leftOpen, setLeftOpen] = useState(false);
+  const [rightOpen, setRightOpen] = useState(false);
+
+  useEffect(() => {
+    if (selectedStructureId) {
+      setRightOpen(true);
+      setLeftOpen(false);
+    }
+  }, [selectedStructureId]);
 
   return (
-    <div className="h-full grid grid-cols-[280px_1fr_320px]">
-      <aside className="border-r border-white/10 bg-panel p-3 flex flex-col min-h-0">
+    <div className="h-full relative md:grid md:grid-cols-[280px_1fr_320px]">
+      <aside
+        className={`fixed md:static inset-y-0 left-0 z-30 w-[86vw] max-w-[300px] md:w-auto
+          border-r border-white/10 bg-panel p-3 flex flex-col min-h-0 overflow-y-auto
+          transition-transform duration-200 md:translate-x-0
+          ${leftOpen ? "translate-x-0" : "-translate-x-full"}`}
+      >
+        <button
+          onClick={() => setLeftOpen(false)}
+          className="md:hidden self-end text-slate-400 hover:text-white text-sm mb-2 px-2 py-1"
+          aria-label="Fechar painel"
+        >
+          ✕ Fechar
+        </button>
         <LayerToggle />
         <ClippingControls />
         <div className="flex-1 min-h-0 mt-4">
@@ -21,12 +48,47 @@ export default function AtlasPage() {
         </div>
       </aside>
 
-      <div className="relative">
+      {(leftOpen || rightOpen) && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 md:hidden"
+          onClick={() => {
+            setLeftOpen(false);
+            setRightOpen(false);
+          }}
+        />
+      )}
+
+      <div className="relative h-full min-h-0">
         <Scene bySlug={bySlug} />
         <QuickRegionNav />
+
+        <button
+          onClick={() => setLeftOpen(true)}
+          className="md:hidden absolute top-3 left-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
+        >
+          ☰ Camadas
+        </button>
+        <button
+          onClick={() => setRightOpen(true)}
+          className="md:hidden absolute top-3 right-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
+        >
+          ℹ️ Detalhes
+        </button>
       </div>
 
-      <aside className="border-l border-white/10 bg-panel p-4 overflow-y-auto">
+      <aside
+        className={`fixed md:static inset-y-0 right-0 z-30 w-[86vw] max-w-[320px] md:w-auto
+          border-l border-white/10 bg-panel p-4 overflow-y-auto
+          transition-transform duration-200 md:translate-x-0
+          ${rightOpen ? "translate-x-0" : "translate-x-full"}`}
+      >
+        <button
+          onClick={() => setRightOpen(false)}
+          className="md:hidden text-slate-400 hover:text-white text-sm mb-2 px-2 py-1"
+          aria-label="Fechar painel"
+        >
+          ✕ Fechar
+        </button>
         <StructureInfoPanel bySlug={bySlug} />
       </aside>
     </div>