diff --git a/quickview-tool/artifact-sidebar-mock1-pin-rail.html b/quickview-tool/artifact-sidebar-mock1-pin-rail.html new file mode 100644 index 0000000..a75f60c --- /dev/null +++ b/quickview-tool/artifact-sidebar-mock1-pin-rail.html @@ -0,0 +1,249 @@ + + + + + + Mock 1 – Icon Rail + Pin to Open + + + + + + + + + + +
+ +
+ src / + App.tsx + +
+ + +
+
+

+ Mock 1 — Icon Rail + Pin to Open + Sidebar collapses to a 48px icon rail. Click the hamburger to expand. + Use the pin icon to lock it open. Tooltips appear on rail hover. +

+ 
import React from 'react'
+
+function App() {
+  return (
+    <div className="app">
+      <h1>Hello, world!</h1>
+    </div>
+  )
+}
+
+export default App
+
+
+
+ + + + diff --git a/quickview-tool/artifact-sidebar-mock2-top-menu.html b/quickview-tool/artifact-sidebar-mock2-top-menu.html new file mode 100644 index 0000000..54bed49 --- /dev/null +++ b/quickview-tool/artifact-sidebar-mock2-top-menu.html @@ -0,0 +1,238 @@ + + + + + + Mock 2 – Top Menu Bar + Slide-in Sidebar + + + + + + +
+ + + + + + +
+ + + +
A
+
+
+ + +
+ + + + + +
+
+

+ Mock 2 — Top Menu Bar + Slide-in Drawer + Sidebar is hidden by default. Hamburger in the top bar opens a floating drawer. + Clicking outside or the X button closes it. No pin — suitable for document-centric UIs. +

+ 
// App.tsx
+import React from 'react'
+
+export default function App() {
+  return (
+    <main>
+      <h1>Welcome</h1>
+    </main>
+  )
+}
+
+
+ + + + diff --git a/quickview-tool/artifact-sidebar-mock3-hover-expand.html b/quickview-tool/artifact-sidebar-mock3-hover-expand.html new file mode 100644 index 0000000..c065be3 --- /dev/null +++ b/quickview-tool/artifact-sidebar-mock3-hover-expand.html @@ -0,0 +1,231 @@ + + + + + + Mock 3 – Hover to Expand Rail + + + + + + + + + +
+
+ src + / + App.tsx +
+ +
+
+
+ Mock 3 — Hover-to-Expand Rail (dark) + Hover the sidebar to expand. Pin icon locks it open. + Tooltips show on icon rail when not hovered/pinned. +
+ 
import React from 'react'
+
+function App() {
+  return (
+    <div className="app">
+      <h1>Hello</h1>
+    </div>
+  )
+}
+
+
+
+ + + + diff --git a/quickview-tool/artifact-sidebar-mock4-command-palette.html b/quickview-tool/artifact-sidebar-mock4-command-palette.html new file mode 100644 index 0000000..07c4e4f --- /dev/null +++ b/quickview-tool/artifact-sidebar-mock4-command-palette.html @@ -0,0 +1,278 @@ + + + + + + Mock 4 – Floating FAB + Command Palette + + + + + + +
+ + +
+ + + +
+ + + + + +
+ +
+
+ src / + App.tsx +
+
+ ⌘B + toggle sidebar +
+
+ +
+
+
+ Mock 4 — Floating FAB + Search Palette + A small arrow button floats on the left edge. Clicking it opens a panel with + a live-filter search palette at the top and a recent-files list below. + Clicking outside closes. No persistent pin — maximizes editor space. +
+ 
import React, { useState } from 'react'
+
+export default function App() {
+  const [count, setCount] = useState(0)
+  return (
+    <button onClick={() => setCount(c => c + 1)}>
+      Count: {count}
+    </button>
+  )
+}
+
+
+
+ + + + diff --git a/quickview-tool/artifact-sidebar-mock5-resizable.html b/quickview-tool/artifact-sidebar-mock5-resizable.html new file mode 100644 index 0000000..fb50c8a --- /dev/null +++ b/quickview-tool/artifact-sidebar-mock5-resizable.html @@ -0,0 +1,341 @@ + + + + + + Mock 5 – Resizable + Collapsible Sidebar + + + + +
+ + + + + + + + +
+ +
+
+ + App.tsx + × +
+
+ + index.tsx + × +
+
+ + main.css + × +
+
+ + +
+
+
+ Mock 5 — Drag-to-Resize + Collapsible Strip + Drag the right edge of the sidebar to resize it. The thin strip on the right + of the sidebar collapses/expands it. Width is remembered between sessions. + Open tabs persist across collapse/expand. +
+ 
import React, { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Sheet,
+  SheetContent,
+  SheetTrigger,
+} from '@/components/ui/sheet'
+
+export default function App() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">
+          Open Files
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        {/* file tree here */}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+
+
+
+ + + +