mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-01-30 14:22:02 +00:00
4ab54270db
- Sidebar now uses overlay pattern on mobile (fixed position when open) - Added backdrop overlay that dismisses sidebar on tap - Made collapse toggle button visible on all screen sizes - Made project options menu visible on all screen sizes Previously the sidebar was forced to collapsed width (w-16) on mobile even when sidebarOpen was true, and the toggle/options buttons were hidden with `hidden lg:flex`.
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { PanelLeft, PanelLeftClose } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { formatShortcut } from '@/store/app-store';
|
|
|
|
interface CollapseToggleButtonProps {
|
|
sidebarOpen: boolean;
|
|
toggleSidebar: () => void;
|
|
shortcut: string;
|
|
}
|
|
|
|
export function CollapseToggleButton({
|
|
sidebarOpen,
|
|
toggleSidebar,
|
|
shortcut,
|
|
}: CollapseToggleButtonProps) {
|
|
return (
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className={cn(
|
|
'flex absolute top-[68px] -right-3 z-9999',
|
|
'group/toggle items-center justify-center w-7 h-7 rounded-full',
|
|
// Glass morphism button
|
|
'bg-card/95 backdrop-blur-sm border border-border/80',
|
|
// Premium shadow with glow on hover
|
|
'shadow-lg shadow-black/5 hover:shadow-xl hover:shadow-brand-500/10',
|
|
'text-muted-foreground hover:text-brand-500 hover:bg-accent/80',
|
|
'hover:border-brand-500/30',
|
|
'transition-all duration-200 ease-out titlebar-no-drag',
|
|
'hover:scale-110 active:scale-90'
|
|
)}
|
|
data-testid="sidebar-collapse-button"
|
|
>
|
|
{sidebarOpen ? (
|
|
<PanelLeftClose className="w-3.5 h-3.5 pointer-events-none transition-transform duration-200" />
|
|
) : (
|
|
<PanelLeft className="w-3.5 h-3.5 pointer-events-none transition-transform duration-200" />
|
|
)}
|
|
{/* Tooltip */}
|
|
<div
|
|
className={cn(
|
|
'absolute left-full ml-3 px-2.5 py-1.5 rounded-lg',
|
|
'bg-popover text-popover-foreground text-xs font-medium',
|
|
'border border-border shadow-lg',
|
|
'opacity-0 group-hover/toggle:opacity-100 transition-all duration-200',
|
|
'whitespace-nowrap z-50 pointer-events-none',
|
|
'translate-x-1 group-hover/toggle:translate-x-0'
|
|
)}
|
|
data-testid="sidebar-toggle-tooltip"
|
|
>
|
|
{sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}{' '}
|
|
<span
|
|
className="ml-1.5 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground"
|
|
data-testid="sidebar-toggle-shortcut"
|
|
>
|
|
{formatShortcut(shortcut, true)}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|