mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-01 20:23:36 +00:00
d98cae124f
- Introduced a floating toggle button for mobile to show/hide the sidebar when collapsed. - Updated sidebar behavior to completely hide on mobile when the new mobileSidebarHidden state is true. - Added logic to conditionally render sidebar components based on screen size using the new useIsCompact hook. - Enhanced SidebarHeader to include close and expand buttons for mobile views. - Refactored CollapseToggleButton to hide in compact mode. - Implemented HeaderActionsPanel for mobile actions in various views, improving accessibility and usability on smaller screens. These changes improve the user experience on mobile devices by providing better navigation options and visibility controls.
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { PanelLeft } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useAppStore } from '@/store/app-store';
|
|
import { useIsCompact } from '@/hooks/use-media-query';
|
|
|
|
/**
|
|
* Floating toggle button for mobile that completely hides/shows the sidebar.
|
|
* Positioned at the left-center of the screen.
|
|
* Only visible on compact/mobile screens when the sidebar is hidden.
|
|
*/
|
|
export function MobileSidebarToggle() {
|
|
const isCompact = useIsCompact();
|
|
const { mobileSidebarHidden, toggleMobileSidebarHidden } = useAppStore();
|
|
|
|
// Only show on compact screens when sidebar is hidden
|
|
if (!isCompact || !mobileSidebarHidden) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleMobileSidebarHidden}
|
|
className={cn(
|
|
'fixed left-0 top-1/2 -translate-y-1/2 z-50',
|
|
'flex items-center justify-center',
|
|
'w-8 h-12 rounded-r-lg',
|
|
// Glass morphism background
|
|
'bg-card/95 backdrop-blur-sm border border-l-0 border-border/80',
|
|
// Shadow and hover effects
|
|
'shadow-lg shadow-black/10 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',
|
|
'hover:w-10 active:scale-95'
|
|
)}
|
|
aria-label="Show sidebar"
|
|
data-testid="mobile-sidebar-toggle"
|
|
>
|
|
<PanelLeft className="w-4 h-4 pointer-events-none" />
|
|
</button>
|
|
);
|
|
}
|