mirror of
https://github.com/donpat1to/Schichtenplaner.git
synced 2025-11-30 22:45:46 +01:00
removed phone and departement as user attribute
This commit is contained in:
@@ -1,95 +1,186 @@
|
||||
// frontend/src/components/Layout/Footer.tsx
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<footer style={{
|
||||
backgroundColor: '#34495e',
|
||||
const styles = {
|
||||
footer: {
|
||||
background: '#2c3e50',
|
||||
color: 'white',
|
||||
padding: '30px 20px',
|
||||
marginTop: 'auto'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||
gap: '30px'
|
||||
}}>
|
||||
{/* App Info */}
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '15px' }}>🗓️ SchichtPlaner</h4>
|
||||
<p style={{ fontSize: '14px', lineHeight: '1.5' }}>
|
||||
Einfache Schichtplanung für Ihr Team.
|
||||
Optimierte Arbeitszeiten, transparente Planung.
|
||||
marginTop: 'auto',
|
||||
},
|
||||
footerContent: {
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
padding: '2rem 20px',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
|
||||
gap: '2rem',
|
||||
},
|
||||
footerSection: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
},
|
||||
footerSectionH3: {
|
||||
marginBottom: '1rem',
|
||||
color: '#ecf0f1',
|
||||
fontSize: '1.2rem',
|
||||
},
|
||||
footerSectionH4: {
|
||||
marginBottom: '1rem',
|
||||
color: '#ecf0f1',
|
||||
fontSize: '1.1rem',
|
||||
},
|
||||
footerLink: {
|
||||
color: '#bdc3c7',
|
||||
textDecoration: 'none',
|
||||
marginBottom: '0.5rem',
|
||||
transition: 'color 0.3s ease',
|
||||
},
|
||||
footerBottom: {
|
||||
borderTop: '1px solid #34495e',
|
||||
padding: '1rem 20px',
|
||||
textAlign: 'center' as const,
|
||||
color: '#95a5a6',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<footer style={styles.footer}>
|
||||
<div style={styles.footerContent}>
|
||||
<div style={styles.footerSection}>
|
||||
<h3 style={styles.footerSectionH3}>Schichtenplaner</h3>
|
||||
<p style={{color: '#bdc3c7', margin: 0}}>
|
||||
Professionelle Schichtplanung für Ihr Team.
|
||||
Effiziente Personalplanung für optimale Abläufe.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '15px' }}>Schnellzugriff</h4>
|
||||
<ul style={{ listStyle: 'none', padding: 0, fontSize: '14px' }}>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<Link to="/help" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
|
||||
📖 Anleitung
|
||||
</Link>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<Link to="/help/faq" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
|
||||
❓ Häufige Fragen
|
||||
</Link>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<Link to="/help/support" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
|
||||
💬 Support
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div style={styles.footerSection}>
|
||||
<h4 style={styles.footerSectionH4}>Support & Hilfe</h4>
|
||||
<a
|
||||
href="/help"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Hilfe & Anleitungen
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Kontakt & Support
|
||||
</a>
|
||||
<a
|
||||
href="/faq"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Häufige Fragen
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '15px' }}>Rechtliches</h4>
|
||||
<ul style={{ listStyle: 'none', padding: 0, fontSize: '14px' }}>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<Link to="/impressum" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
|
||||
📄 Impressum
|
||||
</Link>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<Link to="/datenschutz" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
|
||||
🔒 Datenschutz
|
||||
</Link>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<Link to="/agb" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
|
||||
📝 AGB
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div style={styles.footerSection}>
|
||||
<h4 style={styles.footerSectionH4}>Rechtliches</h4>
|
||||
<a
|
||||
href="/privacy"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Datenschutzerklärung
|
||||
</a>
|
||||
<a
|
||||
href="/imprint"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Impressum
|
||||
</a>
|
||||
<a
|
||||
href="/terms"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Allgemeine Geschäftsbedingungen
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '15px' }}>Kontakt</h4>
|
||||
<div style={{ fontSize: '14px', color: '#bdc3c7' }}>
|
||||
<p>📧 support@schichtplaner.de</p>
|
||||
<p>📞 +49 123 456 789</p>
|
||||
<p>🕘 Mo-Fr: 9:00-17:00</p>
|
||||
</div>
|
||||
|
||||
<div style={styles.footerSection}>
|
||||
<h4 style={styles.footerSectionH4}>Unternehmen</h4>
|
||||
<a
|
||||
href="/about"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Über uns
|
||||
</a>
|
||||
<a
|
||||
href="/features"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Funktionen
|
||||
</a>
|
||||
<a
|
||||
href="/pricing"
|
||||
style={styles.footerLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = '#3498db';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = '#bdc3c7';
|
||||
}}
|
||||
>
|
||||
Preise
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
borderTop: '1px solid #2c3e50',
|
||||
marginTop: '30px',
|
||||
paddingTop: '20px',
|
||||
textAlign: 'center',
|
||||
fontSize: '12px',
|
||||
color: '#95a5a6'
|
||||
}}>
|
||||
<p>© 2024 SchichtPlaner. Alle Rechte vorbehalten.</p>
|
||||
<div style={styles.footerBottom}>
|
||||
<p style={{margin: 0}}>
|
||||
© 2025 Schichtenplaner. Alle Rechte vorbehalten. |
|
||||
Made with ❤️ for efficient team management
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
220
frontend/src/components/Layout/Layout.module.css
Normal file
220
frontend/src/components/Layout/Layout.module.css
Normal file
@@ -0,0 +1,220 @@
|
||||
/* Layout.css - Professionelles Design */
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Desktop Navigation */
|
||||
.desktop-nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* User Menu */
|
||||
.user-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Mobile Menu Button */
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Mobile Navigation */
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-nav-link:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.mobile-user-info {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mobile-logout-btn {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
background-color: #f8f9fa;
|
||||
min-height: calc(100vh - 140px);
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 20px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-section h3,
|
||||
.footer-section h4 {
|
||||
margin-bottom: 1rem;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
color: #bdc3c7;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid #34495e;
|
||||
padding: 1rem 20px;
|
||||
text-align: center;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.desktop-nav,
|
||||
.user-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 1rem 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
// frontend/src/components/Layout/Layout.tsx
|
||||
// frontend/src/components/Layout/Layout.tsx - KORRIGIERT
|
||||
import React from 'react';
|
||||
import Navigation from './Navigation';
|
||||
import Footer from './Footer';
|
||||
@@ -8,22 +8,32 @@ interface LayoutProps {
|
||||
}
|
||||
|
||||
const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
const styles = {
|
||||
layout: {
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
},
|
||||
mainContent: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f8f9fa',
|
||||
minHeight: 'calc(100vh - 140px)',
|
||||
},
|
||||
contentContainer: {
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
padding: '2rem 20px',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
<div style={styles.layout}>
|
||||
<Navigation />
|
||||
|
||||
<main style={{
|
||||
flex: 1,
|
||||
padding: '20px',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
width: '100%'
|
||||
}}>
|
||||
{children}
|
||||
<main style={styles.mainContent}>
|
||||
<div style={styles.contentContainer}>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -1,188 +1,225 @@
|
||||
// frontend/src/components/Layout/Navigation.tsx
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
|
||||
const Navigation: React.FC = () => {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const { user, logout, hasRole } = useAuth();
|
||||
const location = useLocation();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
const isActive = (path: string) => location.pathname === path;
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
setIsMobileMenuOpen(false);
|
||||
};
|
||||
|
||||
const navigationItems = [
|
||||
{ path: '/', label: 'Dashboard', icon: '🏠', roles: ['admin', 'instandhalter', 'user'] },
|
||||
{ path: '/shift-plans', label: 'Schichtpläne', icon: '📅', roles: ['admin', 'instandhalter', 'user'] },
|
||||
{ path: '/employees', label: 'Mitarbeiter', icon: '👥', roles: ['admin', 'instandhalter'] },
|
||||
{ path: '/settings', label: 'Einstellungen', icon: '⚙️', roles: ['admin'] },
|
||||
{ path: '/help', label: 'Hilfe', icon: '❓', roles: ['admin', 'instandhalter', 'user'] },
|
||||
];
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
};
|
||||
|
||||
const navigationItems = [
|
||||
{ path: '/', label: '📊 Dashboard', roles: ['admin', 'instandhalter', 'user'] },
|
||||
{ path: '/shift-plans', label: '📅 Schichtpläne', roles: ['admin', 'instandhalter', 'user'] },
|
||||
{ path: '/employees', label: '👥 Mitarbeiter', roles: ['admin', 'instandhalter'] },
|
||||
{ path: '/help', label: '❓ Hilfe & Support', roles: ['admin', 'instandhalter', 'user'] },
|
||||
{ path: '/settings', label: '⚙️ Einstellungen', roles: ['admin'] },
|
||||
];
|
||||
|
||||
const filteredNavigation = navigationItems.filter(item =>
|
||||
hasRole(item.roles)
|
||||
);
|
||||
|
||||
const styles = {
|
||||
header: {
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: 'white',
|
||||
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
|
||||
position: 'sticky' as const,
|
||||
top: 0,
|
||||
zIndex: 1000,
|
||||
},
|
||||
headerContent: {
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
padding: '0 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
height: '70px',
|
||||
},
|
||||
logo: {
|
||||
flex: 1,
|
||||
},
|
||||
logoH1: {
|
||||
margin: 0,
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 700,
|
||||
},
|
||||
desktopNav: {
|
||||
display: 'flex',
|
||||
gap: '2rem',
|
||||
alignItems: 'center',
|
||||
},
|
||||
navLink: {
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
padding: '0.5rem 1rem',
|
||||
borderRadius: '6px',
|
||||
transition: 'all 0.3s ease',
|
||||
fontWeight: 500,
|
||||
},
|
||||
userMenu: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
marginLeft: '2rem',
|
||||
},
|
||||
userInfo: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
logoutBtn: {
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
color: 'white',
|
||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
||||
padding: '0.5rem 1rem',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
},
|
||||
mobileMenuBtn: {
|
||||
display: 'none',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
fontSize: '1.5rem',
|
||||
cursor: 'pointer',
|
||||
padding: '0.5rem',
|
||||
},
|
||||
mobileNav: {
|
||||
display: isMobileMenuOpen ? 'flex' : 'none',
|
||||
flexDirection: 'column' as const,
|
||||
background: 'white',
|
||||
padding: '1rem',
|
||||
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
|
||||
},
|
||||
mobileNavLink: {
|
||||
color: '#333',
|
||||
textDecoration: 'none',
|
||||
padding: '1rem',
|
||||
borderBottom: '1px solid #eee',
|
||||
transition: 'background-color 0.3s ease',
|
||||
},
|
||||
mobileUserInfo: {
|
||||
padding: '1rem',
|
||||
borderTop: '1px solid #eee',
|
||||
marginTop: '1rem',
|
||||
color: '#333',
|
||||
},
|
||||
mobileLogoutBtn: {
|
||||
background: '#667eea',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '0.5rem 1rem',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '0.5rem',
|
||||
width: '100%',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Desktop Navigation */}
|
||||
<nav style={{
|
||||
backgroundColor: '#2c3e50',
|
||||
padding: '0 20px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{/* Logo/Brand */}
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
padding: '15px 0'
|
||||
<header style={styles.header}>
|
||||
<div style={styles.headerContent}>
|
||||
<div style={styles.logo}>
|
||||
<h1 style={styles.logoH1}>🔄 Schichtenplaner</h1>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav style={styles.desktopNav}>
|
||||
{filteredNavigation.map((item) => (
|
||||
<a
|
||||
key={item.path}
|
||||
href={item.path}
|
||||
style={styles.navLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-1px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'none';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.location.href = item.path;
|
||||
}}
|
||||
>
|
||||
🗓️ SchichtPlaner
|
||||
</Link>
|
||||
</div>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px'
|
||||
}}>
|
||||
{filteredNavigation.map(item => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
style={{
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
padding: '15px 20px',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: isActive(item.path) ? '#3498db' : 'transparent',
|
||||
transition: 'background-color 0.2s',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive(item.path)) {
|
||||
e.currentTarget.style.backgroundColor = '#34495e';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!isActive(item.path)) {
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span>{item.icon}</span>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
{/* User Menu */}
|
||||
<div style={styles.userMenu}>
|
||||
<span style={styles.userInfo}>
|
||||
{user?.name} ({user?.role})
|
||||
</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
style={styles.logoutBtn}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.2)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
|
||||
}}
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* User Menu */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
|
||||
<span style={{ color: 'white', fontSize: '14px' }}>
|
||||
{user?.name} ({user?.role})
|
||||
</span>
|
||||
<button
|
||||
onClick={logout}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: '1px solid #e74c3c',
|
||||
color: '#e74c3c',
|
||||
padding: '8px 16px',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s'
|
||||
}}
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
style={styles.mobileMenuBtn}
|
||||
onClick={toggleMobileMenu}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isMobileMenuOpen && (
|
||||
<nav style={styles.mobileNav}>
|
||||
{filteredNavigation.map((item) => (
|
||||
<a
|
||||
key={item.path}
|
||||
href={item.path}
|
||||
style={styles.mobileNavLink}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#e74c3c';
|
||||
e.currentTarget.style.color = 'white';
|
||||
e.currentTarget.style.backgroundColor = '#f5f5f5';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
e.currentTarget.style.color = '#e74c3c';
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.location.href = item.path;
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<div style={styles.mobileUserInfo}>
|
||||
<span>{user?.name} ({user?.role})</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
style={styles.mobileLogoutBtn}
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
style={{
|
||||
display: 'block',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div style={{
|
||||
display: 'block',
|
||||
backgroundColor: '#34495e',
|
||||
padding: '10px 0'
|
||||
}}>
|
||||
{filteredNavigation.map(item => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
style={{
|
||||
display: 'block',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
padding: '12px 20px',
|
||||
borderBottom: '1px solid #2c3e50'
|
||||
}}
|
||||
>
|
||||
<span style={{ marginRight: '10px' }}>{item.icon}</span>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<div style={{
|
||||
backgroundColor: '#ecf0f1',
|
||||
padding: '10px 20px',
|
||||
borderBottom: '1px solid #bdc3c7',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
{/* Breadcrumb wird dynamisch basierend auf der Route gefüllt */}
|
||||
<span style={{ color: '#7f8c8d' }}>
|
||||
🏠 Dashboard {location.pathname !== '/' && '>'}
|
||||
{location.pathname === '/shift-plans' && ' 📅 Schichtpläne'}
|
||||
{location.pathname === '/employees' && ' 👥 Mitarbeiter'}
|
||||
{location.pathname === '/settings' && ' ⚙️ Einstellungen'}
|
||||
{location.pathname === '/help' && ' ❓ Hilfe'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user