mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Francesco Sansalvadore
156f904018
- move navigation components to `apps/studio/components/layouts/Navigation` - add [FloatingMobileToolbar](https://github.com/supabase/supabase/pull/43444/changes#diff-3dffe47fd51ca851d612d8728e03b2dc344ec213d4f3a46a824d3fa32a7cc851) as quick access to tools such as search, assistant, inline editor, etc - behind feature flag and feature preview (true by default as it's a bit annoying to have to enable it all the time as previews are stored in local-storage) - fix sidebar panels closing on viewport resizing (regression from previous pr) https://github.com/user-attachments/assets/d6881e3b-5128-4306-bb82-3ca39c755dba <img width="986" height="697" alt="Screenshot 2026-03-12 at 12 40 11" src="https://github.com/user-attachments/assets/da8511e2-7d01-4237-b814-596031c747c5" />
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { BASE_PATH } from 'lib/constants'
|
|
import Image from 'next/image'
|
|
|
|
export const FloatingMobileToolbarPreview = () => {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<p className="text-foreground-light text-sm mb-4">
|
|
A floating toolbar conveniently positioned at the bottom of the screen on mobile viewports
|
|
to quickly access the Command Menu, Help, Advisor Panel, Editor Panel, and AI Assistant
|
|
buttons.
|
|
</p>
|
|
<p className="text-foreground-light text-sm mb-4">
|
|
It can be dragged to any position on the screen to move it if it gets in the way of
|
|
important content so you can keep working on your project.
|
|
</p>
|
|
<Image
|
|
src={`${BASE_PATH}/img/previews/floating-toolbar-preview.png`}
|
|
width={1296}
|
|
height={900}
|
|
quality={100}
|
|
alt="floating-mobile-toolbar-preview"
|
|
className="rounded border"
|
|
/>
|
|
<div className="space-y-2 !mt-4">
|
|
<p className="text-sm">Enabling this preview will:</p>
|
|
<ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
|
|
<li>Show the floating toolbar at the bottom of the screen on mobile viewports</li>
|
|
<li>Hide the second row of mobile navigation bar</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|