feat(mobile): add context-sensitive MindSift logo menu, slide-over file drawer, and larger touch targets
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 58s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 58s
This commit is contained in:
sandrodach committed
1 parent
cb0999325f
commit
212cb32bb0
8 files changed
+943
-111
No files matched your search
@@ -0,0 +1,140 @@
|
||||
import React from 'react';
|
||||
import { Check, X } from 'lucide-react';
|
||||
import { useMobileActions } from '../context/MobileActionContext';
|
||||
import { triggerHaptic } from '../lib/api';
|
||||
|
||||
interface MobileHeaderMenuProps {
|
||||
activeTabLabel: string;
|
||||
}
|
||||
|
||||
export const MobileHeaderMenu: React.FC<MobileHeaderMenuProps> = ({ activeTabLabel }) => {
|
||||
const { groups, isMenuOpen, closeMenu } = useMobileActions();
|
||||
|
||||
if (!isMenuOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="sm:hidden fixed inset-0 z-50">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
|
||||
onClick={() => {
|
||||
triggerHaptic(8);
|
||||
closeMenu();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Menu Sheet below Header */}
|
||||
<div className="fixed top-14 left-2.5 right-2.5 max-h-[80vh] overflow-y-auto bg-panel border border-border rounded-2xl shadow-2xl p-3 space-y-3.5 z-50 animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
{/* Menu Header */}
|
||||
<div className="flex items-center justify-between px-2 pb-2 border-b border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-accent"></span>
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-muted">
|
||||
{activeTabLabel} — Optionen & Aktionen
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(8);
|
||||
closeMenu();
|
||||
}}
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-muted hover:text-main hover:bg-canvas active:scale-95 transition-all"
|
||||
title="Menü schließen"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{groups.length === 0 ? (
|
||||
<div className="py-6 text-center text-xs text-muted">
|
||||
Keine spezifischen Optionen für diese Ansicht verfügbar.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{groups.map((group) => (
|
||||
<div key={group.id} className="space-y-1.5">
|
||||
{group.title && (
|
||||
<div className="px-2 text-[11px] font-bold uppercase tracking-wider text-faint">
|
||||
{group.title}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isAccent = item.variant === 'accent';
|
||||
const isDanger = item.variant === 'danger';
|
||||
const isActive = item.active;
|
||||
|
||||
let btnClass =
|
||||
'bg-canvas/70 hover:bg-canvas text-main border border-border/60';
|
||||
if (isAccent) {
|
||||
btnClass =
|
||||
'bg-accent text-on-accent border border-accent font-semibold shadow-sm';
|
||||
} else if (isDanger) {
|
||||
btnClass =
|
||||
'bg-status-err/10 text-status-err border border-status-err/30 font-medium';
|
||||
} else if (isActive) {
|
||||
btnClass =
|
||||
'bg-accent/15 text-accent border border-accent/40 font-semibold';
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(12);
|
||||
closeMenu();
|
||||
item.onClick();
|
||||
}}
|
||||
className={`w-full min-h-[46px] px-3.5 py-2.5 rounded-xl flex items-center justify-between gap-3 text-sm transition-all active:scale-[0.98] cursor-pointer ${btnClass}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1 text-left">
|
||||
{item.icon && (
|
||||
<span
|
||||
className={`flex-shrink-0 flex items-center justify-center w-5 h-5 ${
|
||||
isAccent
|
||||
? 'text-on-accent'
|
||||
: isDanger
|
||||
? 'text-status-err'
|
||||
: isActive
|
||||
? 'text-accent'
|
||||
: 'text-muted'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
</span>
|
||||
)}
|
||||
<span className="truncate">{item.label}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{item.badge !== undefined && item.badge !== '' && (
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-mono font-semibold ${
|
||||
isAccent
|
||||
? 'bg-black/20 text-on-accent'
|
||||
: isActive
|
||||
? 'bg-accent/20 text-accent'
|
||||
: 'bg-panel text-muted border border-border'
|
||||
}`}
|
||||
>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
{isActive && !isAccent && (
|
||||
<Check className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user