frontend/src/App.jsx aktualisiert
This commit is contained in:
@@ -178,88 +178,72 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
|
||||
}
|
||||
|
||||
// ── Mobile Bottom Navigation ──────────────────────────────────────────────────
|
||||
function BottomNav({ active, setActive, user, updateInfo, onUpdateClick }) {
|
||||
function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClick }) {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const NAV_H = 56;
|
||||
const mainNav = [
|
||||
{ id:'dashboard', icon:'⬡', label:'Home' },
|
||||
...TOOLS.slice(0,3).map(t => ({ id:t.id, icon:t.icon, label:t.label.length>8?t.label.slice(0,7)+'…':t.label })),
|
||||
...TOOLS.slice(0,3).map(t => ({ id:t.id, icon:t.icon, label:t.label.length>7?t.label.slice(0,6)+'…':t.label })),
|
||||
{ id:'_menu', icon:'⋯', label:'Mehr' },
|
||||
];
|
||||
|
||||
const MI = ({icon,label,onClick,color='#fff'}) => (
|
||||
<button onClick={onClick} style={{ width:'100%', padding:'14px 20px', background:'transparent',
|
||||
border:'none', borderBottom:'1px solid rgba(255,255,255,0.05)',
|
||||
display:'flex', alignItems:'center', gap:14, cursor:'pointer' }}>
|
||||
<span style={{fontSize:20}}>{icon}</span>
|
||||
<span style={{color,fontFamily:'monospace',fontSize:14}}>{label}</span>
|
||||
</button>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{/* Menu Overlay */}
|
||||
{menuOpen && (
|
||||
<div style={{ position:'fixed', inset:0, zIndex:4000 }} onClick={()=>setMenuOpen(false)}>
|
||||
<div style={{ position:'absolute', bottom:70, left:0, right:0,
|
||||
background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius:'16px 16px 0 0', padding:'12px 0 8px' }}
|
||||
<div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
|
||||
onClick={()=>setMenuOpen(false)}>
|
||||
<div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`,
|
||||
left:0, right:0, background:'#1a1a1e',
|
||||
borderTop:'1px solid rgba(255,255,255,0.1)',
|
||||
borderRadius:'16px 16px 0 0', paddingTop:8 }}
|
||||
onClick={e=>e.stopPropagation()}>
|
||||
{/* Update badge */}
|
||||
{updateInfo?.hasUpdate && (
|
||||
<button onClick={()=>{setMenuOpen(false);onUpdateClick();}} style={{
|
||||
width:'100%', padding:'12px 20px', background:'rgba(255,230,109,0.08)',
|
||||
border:'none', borderBottom:'1px solid rgba(255,255,255,0.06)',
|
||||
display:'flex', alignItems:'center', gap:10, cursor:'pointer',
|
||||
}}>
|
||||
<span style={{ width:8, height:8, borderRadius:'50%', background:'#ffe66d', boxShadow:'0 0 6px #ffe66d', display:'inline-block', flexShrink:0 }} />
|
||||
<span style={{ color:'#ffe66d', fontSize:13, fontFamily:'monospace' }}>Update verfügbar – {updateInfo.latestVersion}</span>
|
||||
</button>
|
||||
)}
|
||||
{/* Extra tools */}
|
||||
{TOOLS.slice(3).map(t => (
|
||||
<button key={t.id} onClick={()=>{setActive(t.id);setMenuOpen(false);}} style={{
|
||||
width:'100%', padding:'13px 20px', background:'transparent',
|
||||
border:'none', borderBottom:'1px solid rgba(255,255,255,0.04)',
|
||||
display:'flex', alignItems:'center', gap:12, cursor:'pointer',
|
||||
}}>
|
||||
<span style={{ fontSize:18 }}>{t.icon}</span>
|
||||
<span style={{ color:'#fff', fontFamily:'monospace', fontSize:13 }}>{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
{user?.role==='admin' && (
|
||||
<button onClick={()=>{setActive('admin');setMenuOpen(false);}} style={{
|
||||
width:'100%', padding:'13px 20px', background:'transparent',
|
||||
border:'none', borderBottom:'1px solid rgba(255,255,255,0.04)',
|
||||
display:'flex', alignItems:'center', gap:12, cursor:'pointer',
|
||||
}}>
|
||||
<span style={{ fontSize:18 }}>⚙</span>
|
||||
<span style={{ color:'#fff', fontFamily:'monospace', fontSize:13 }}>Admin</span>
|
||||
</button>
|
||||
)}
|
||||
<div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', borderRadius:2, margin:'0 auto 10px' }}/>
|
||||
{updateInfo?.hasUpdate && <MI icon="📦" label={`Update: ${updateInfo.latestVersion}`} onClick={()=>{setMenuOpen(false);onUpdateClick();}} color="#ffe66d"/>}
|
||||
{TOOLS.slice(3).map(t=><MI key={t.id} icon={t.icon} label={t.label} onClick={()=>{setActive(t.id);setMenuOpen(false);}}/>)}
|
||||
{user?.role==='admin' && <MI icon="⚙" label="Admin" onClick={()=>{setActive('admin');setMenuOpen(false);}}/>}
|
||||
<div style={{height:1,background:'rgba(255,255,255,0.08)',margin:'4px 0'}}/>
|
||||
<MI icon="👤" label={user?.username||''} onClick={()=>{}} color="rgba(255,255,255,0.35)"/>
|
||||
<MI icon="🚪" label="Ausloggen" onClick={()=>{onLogout();setMenuOpen(false);}} color="#ff6b9d"/>
|
||||
<div style={{height:'env(safe-area-inset-bottom, 0px)'}}/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<nav style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:3000,
|
||||
background:'#0d0d0f', borderTop:'1px solid rgba(255,255,255,0.08)',
|
||||
display:'flex', height:64, paddingBottom:'env(safe-area-inset-bottom)' }}>
|
||||
background:'#0d0d0f', borderTop:'1px solid rgba(255,255,255,0.12)' }}>
|
||||
<div style={{ display:'flex', height:NAV_H }}>
|
||||
{mainNav.map(item => {
|
||||
const isMenu = item.id === '_menu';
|
||||
const isActive = isMenu ? menuOpen : active === item.id;
|
||||
return (
|
||||
<button key={item.id}
|
||||
onClick={() => isMenu ? setMenuOpen(v=>!v) : (setActive(item.id), setMenuOpen(false))}
|
||||
onClick={()=>isMenu?setMenuOpen(v=>!v):(setActive(item.id),setMenuOpen(false))}
|
||||
style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
|
||||
justifyContent:'center', gap:3, background:'transparent', border:'none',
|
||||
cursor:'pointer', position:'relative' }}>
|
||||
cursor:'pointer', position:'relative', minWidth:0, padding:'0 4px' }}>
|
||||
{isMenu && updateInfo?.hasUpdate && (
|
||||
<span style={{ position:'absolute', top:8, right:'calc(50% - 14px)',
|
||||
width:7, height:7, borderRadius:'50%', background:'#ffe66d',
|
||||
<span style={{ position:'absolute', top:6, right:'calc(50% - 16px)',
|
||||
width:8, height:8, borderRadius:'50%', background:'#ffe66d',
|
||||
boxShadow:'0 0 6px #ffe66d', display:'inline-block' }} />
|
||||
)}
|
||||
<span style={{ fontSize:18, lineHeight:1 }}>{item.icon}</span>
|
||||
<span style={{ fontSize:9, fontFamily:'monospace',
|
||||
color: isActive ? '#4ecdc4' : 'rgba(255,255,255,0.4)',
|
||||
letterSpacing:0.5 }}>{item.label}</span>
|
||||
<span style={{ fontSize:20, lineHeight:1 }}>{item.icon}</span>
|
||||
<span style={{ fontSize:9, fontFamily:'monospace', letterSpacing:0.3,
|
||||
color: isActive ? '#4ecdc4' : 'rgba(255,255,255,0.4)' }}>{item.label}</span>
|
||||
{isActive && !isMenu && (
|
||||
<span style={{ position:'absolute', top:0, left:'50%', transform:'translateX(-50%)',
|
||||
width:24, height:2, background:'#4ecdc4', borderRadius:'0 0 2px 2px' }} />
|
||||
width:24, height:2, background:'#4ecdc4', borderRadius:'0 0 3px 3px' }} />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div style={{ height:'env(safe-area-inset-bottom, 0px)', background:'#0d0d0f' }}/>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
@@ -534,7 +518,7 @@ export default function App() {
|
||||
const activeTool = TOOLS.find(t=>t.id===active);
|
||||
|
||||
// Mobile padding bottom für fixed nav
|
||||
const mainStyle = { flex:1, overflowY:'auto', ...(mobile ? { paddingBottom:64 } : {}) };
|
||||
const mainStyle = { flex:1, overflowY:'auto', ...(mobile ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}) };
|
||||
|
||||
return(
|
||||
<>
|
||||
@@ -562,6 +546,7 @@ export default function App() {
|
||||
</div>
|
||||
{mobile && (
|
||||
<BottomNav active={active} setActive={setActive} user={user}
|
||||
onLogout={()=>{localStorage.removeItem('sk_token');setUser(null);}}
|
||||
updateInfo={updateInfo} onUpdateClick={()=>setShowUpd(true)}/>
|
||||
)}
|
||||
<Toast msg={toastMsg.msg} type={toastMsg.type}/>
|
||||
|
||||
Reference in New Issue
Block a user