114 lines
2.6 KiB
TypeScript
114 lines
2.6 KiB
TypeScript
|
import { Layout, Space, Button, Dropdown, Avatar, Typography, Divider } from 'antd';
|
||
|
|
import {
|
||
|
|
UserOutlined,
|
||
|
|
LogoutOutlined,
|
||
|
|
SettingOutlined,
|
||
|
|
BellOutlined,
|
||
|
|
QuestionCircleOutlined,
|
||
|
|
} from '@ant-design/icons';
|
||
|
|
import type { MenuProps } from 'antd';
|
||
|
|
import CompanySwitcher from './CompanySwitcher';
|
||
|
|
import FiscalYearSelector from './FiscalYearSelector';
|
||
|
|
|
||
|
|
const { Header: AntHeader } = Layout;
|
||
|
|
const { Text } = Typography;
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
const userMenuItems: MenuProps['items'] = [
|
||
|
|
{
|
||
|
|
key: 'profile',
|
||
|
|
icon: <UserOutlined />,
|
||
|
|
label: 'Min profil',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'settings',
|
||
|
|
icon: <SettingOutlined />,
|
||
|
|
label: 'Indstillinger',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'divider',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'logout',
|
||
|
|
icon: <LogoutOutlined />,
|
||
|
|
label: 'Log ud',
|
||
|
|
danger: true,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
|
||
|
|
switch (key) {
|
||
|
|
case 'logout':
|
||
|
|
// Handle logout
|
||
|
|
console.log('Logout clicked');
|
||
|
|
break;
|
||
|
|
case 'settings':
|
||
|
|
// Navigate to settings
|
||
|
|
break;
|
||
|
|
case 'profile':
|
||
|
|
// Navigate to profile
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AntHeader
|
||
|
|
style={{
|
||
|
|
padding: '0 24px',
|
||
|
|
background: '#fff',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
borderBottom: '1px solid #f0f0f0',
|
||
|
|
position: 'sticky',
|
||
|
|
top: 0,
|
||
|
|
zIndex: 10,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Left side - Company Switcher and Fiscal Year Selector */}
|
||
|
|
<Space split={<Divider type="vertical" style={{ height: 24, margin: '0 8px' }} />}>
|
||
|
|
<CompanySwitcher />
|
||
|
|
<FiscalYearSelector />
|
||
|
|
</Space>
|
||
|
|
|
||
|
|
{/* Right side - User actions */}
|
||
|
|
<Space size="middle">
|
||
|
|
{/* Help */}
|
||
|
|
<Button
|
||
|
|
type="text"
|
||
|
|
icon={<QuestionCircleOutlined />}
|
||
|
|
title="Hjaelp"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Notifications */}
|
||
|
|
<Button
|
||
|
|
type="text"
|
||
|
|
icon={<BellOutlined />}
|
||
|
|
title="Notifikationer"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* User Menu */}
|
||
|
|
<Dropdown
|
||
|
|
menu={{
|
||
|
|
items: userMenuItems,
|
||
|
|
onClick: handleUserMenuClick,
|
||
|
|
}}
|
||
|
|
placement="bottomRight"
|
||
|
|
trigger={['click']}
|
||
|
|
>
|
||
|
|
<Space style={{ cursor: 'pointer' }}>
|
||
|
|
<Avatar
|
||
|
|
size="small"
|
||
|
|
icon={<UserOutlined />}
|
||
|
|
style={{ backgroundColor: '#1677ff' }}
|
||
|
|
/>
|
||
|
|
<Text style={{ maxWidth: 120 }} ellipsis>
|
||
|
|
Bruger
|
||
|
|
</Text>
|
||
|
|
</Space>
|
||
|
|
</Dropdown>
|
||
|
|
</Space>
|
||
|
|
</AntHeader>
|
||
|
|
);
|
||
|
|
}
|