some cleaning up

HolodexNet · Sep 20, 2023 · 14ed36f · 14ed36f
1 parent b1040bd
commit 14ed36f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/packages/react/src/components/layout/Frame.scss b/packages/react/src/components/layout/Frame.scss
@@ -62,7 +62,7 @@ $responsive-breakpoint: 768px;
       bottom: 0;
       left: var(--sidebar-left);
       z-index: 1;
-      transition: left 0.3s;
+      transition: left 0.3s, width 0.3s;
     }
   }
 

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -30,19 +30,20 @@ export function Frame() {
   return (
     <div className={mainClasses} id='layout'>
       <aside className="border border-red">
-        <div id="sidebar">
-          {JSON.stringify(fc)}
-
+        <div id="sidebar" className="border border-4 border-red-200">
+          <code><pre className='whitespace-pre-wrap'>{JSON.stringify(fc, null, 2)}</pre></code>
+          <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded' onClick={() => fc.toggle()}>Toggle Sidebar</button>
         </div>
       </aside>
-      <header className="border border-green">Header<button onClick={() => fc.toggle()}>Toggle Sidebar</button>
+      <header className="border border-green">Header
+        <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded' onClick={() => fc.toggle()}>Toggle Sidebar</button>
       </header>
       <main className="border border-green">
         <ScrollArea type="always" scrollbars="vertical" style={{ height: '100%' }}>
           <RouterProvider router={router}></RouterProvider>
         </ScrollArea>
       </main>
-      {fc.isMobile && <footer>Footer</footer>}
+      {fc.isMobile && <footer className="border border-purple">Footer</footer>}
     </div>
   )
 }
diff --git a/packages/react/src/components/layout/useFrame.ts b/packages/react/src/components/layout/useFrame.ts
@@ -14,7 +14,7 @@ export const frameContext = proxy({
   },
 
   get isMobile() {
-    return frameContext.sidebarShouldBeFullscreen && /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+    return frameContext.sidebarShouldBeFullscreen //&& /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
   },
 
   // it's always open at init unless it's small.

diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx
@@ -9,8 +9,7 @@ import { Frame } from "./components/layout/Frame.tsx";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Theme accentColor="amber" appearance="dark">
-      <Frame>
-      </Frame>
+      <Frame />
     </Theme>
   </React.StrictMode>,
 );