Remove username text from header profile icon
The user's name/email is no longer displayed next to the profile avatar in the header. The avatar dropdown menu remains functional for accessing user settings and logout. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
f826794990
commit
f1bbccbf52
2 changed files with 96 additions and 21 deletions
|
|
@ -1,4 +1,6 @@
|
|||
{"id":"books-8ea","title":"fjern brugers navn fra højre hjørne ved profile ikonet","status":"in_progress","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:20:16.406033+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:20:47.977337+01:00"}
|
||||
{"id":"books-bj6","title":"Test automatisk pickup","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:04:40.572496+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:05:44.401903+01:00","closed_at":"2026-01-30T14:05:44.401903+01:00","close_reason":"completed"}
|
||||
{"id":"books-h6e","title":"fjern hurtig bogføring og den visning der høre dertil","status":"in_progress","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:14:50.436314+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:15:06.776032+01:00"}
|
||||
{"id":"books-h6e","title":"fjern hurtig bogføring og den visning der høre dertil","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:14:50.436314+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:18:09.911294+01:00","closed_at":"2026-01-30T14:18:09.911294+01:00","close_reason":"Closed"}
|
||||
{"id":"books-hzt","title":"fix bug med tilføj brugere står forkert med encoded tegn","status":"open","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:21:34.556319+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:21:34.556319+01:00"}
|
||||
{"id":"books-sbm","title":"ændre navnet i venstre side til Books","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:11:13.017202+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:12:14.16594+01:00","closed_at":"2026-01-30T14:12:14.16594+01:00","close_reason":"Closed"}
|
||||
{"id":"books-wqf","title":"Opret en logud knap i topbaren","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:06:06.999508+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:10:52.860045+01:00","closed_at":"2026-01-30T14:10:52.860045+01:00","close_reason":"Closed"}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,38 @@
|
|||
import { Layout, Space, Button, Dropdown, Avatar, Typography, Divider } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import { Layout, Space, Button, Dropdown, Avatar, Divider, Tooltip, Badge } from 'antd';
|
||||
import {
|
||||
UserOutlined,
|
||||
LogoutOutlined,
|
||||
SettingOutlined,
|
||||
BellOutlined,
|
||||
QuestionCircleOutlined,
|
||||
TeamOutlined,
|
||||
CrownOutlined,
|
||||
MenuOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import CompanySwitcher from './CompanySwitcher';
|
||||
import FiscalYearSelector from './FiscalYearSelector';
|
||||
import UserAccessManager from '@/components/company/UserAccessManager';
|
||||
import { useAuthStore } from '@/stores/authStore';
|
||||
import { useCanAdmin, useActiveCompanyRole } from '@/stores/companyStore';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
import { semanticColors, spacing } from '@/styles/designTokens';
|
||||
|
||||
const { Header: AntHeader } = Layout;
|
||||
const { Text } = Typography;
|
||||
|
||||
export default function Header() {
|
||||
const { user, logout } = useAuthStore();
|
||||
interface HeaderProps {
|
||||
isMobile?: boolean;
|
||||
}
|
||||
|
||||
export default function Header({ isMobile = false }: HeaderProps) {
|
||||
const navigate = useNavigate();
|
||||
const { logout } = useAuthStore();
|
||||
const canAdmin = useCanAdmin();
|
||||
const activeRole = useActiveCompanyRole();
|
||||
const toggleMobileDrawer = useUIStore((state) => state.toggleMobileDrawer);
|
||||
const [userAccessOpen, setUserAccessOpen] = useState(false);
|
||||
|
||||
const userMenuItems: MenuProps['items'] = [
|
||||
{
|
||||
|
|
@ -28,8 +45,13 @@ export default function Header() {
|
|||
icon: <SettingOutlined />,
|
||||
label: 'Indstillinger',
|
||||
},
|
||||
...(canAdmin ? [{
|
||||
key: 'manage-users',
|
||||
icon: <TeamOutlined />,
|
||||
label: 'Administrer brugere',
|
||||
}] : []),
|
||||
{
|
||||
type: 'divider',
|
||||
type: 'divider' as const,
|
||||
},
|
||||
{
|
||||
key: 'logout',
|
||||
|
|
@ -45,10 +67,13 @@ export default function Header() {
|
|||
logout();
|
||||
break;
|
||||
case 'settings':
|
||||
// Navigate to settings
|
||||
navigate('/indstillinger');
|
||||
break;
|
||||
case 'profile':
|
||||
// Navigate to profile
|
||||
navigate('/profil');
|
||||
break;
|
||||
case 'manage-users':
|
||||
setUserAccessOpen(true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
|
@ -56,39 +81,75 @@ export default function Header() {
|
|||
return (
|
||||
<AntHeader
|
||||
style={{
|
||||
padding: '0 24px',
|
||||
background: '#fff',
|
||||
padding: `0 ${spacing.xl}px`,
|
||||
background: semanticColors.headerBg,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
borderBottom: `1px solid ${semanticColors.borderLight}`,
|
||||
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 />
|
||||
{/* Left side - Mobile menu + Company Switcher and Fiscal Year Selector */}
|
||||
<Space size={isMobile ? 'small' : 'middle'}>
|
||||
{/* Hamburger menu for mobile */}
|
||||
{isMobile && (
|
||||
<Button
|
||||
type="text"
|
||||
icon={<MenuOutlined />}
|
||||
onClick={toggleMobileDrawer}
|
||||
aria-label="Åbn navigation"
|
||||
style={{ marginRight: spacing.xs }}
|
||||
/>
|
||||
)}
|
||||
<Space split={!isMobile ? <Divider type="vertical" style={{ height: 24, margin: '0 8px' }} /> : undefined}>
|
||||
<CompanySwitcher compact={isMobile} />
|
||||
{!isMobile && <FiscalYearSelector />}
|
||||
</Space>
|
||||
</Space>
|
||||
|
||||
{/* Right side - User actions */}
|
||||
<Space size="middle">
|
||||
{/* Team/User Management - only for owners */}
|
||||
{canAdmin && (
|
||||
<Tooltip title="Administrer brugere">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<TeamOutlined />}
|
||||
onClick={() => setUserAccessOpen(true)}
|
||||
aria-label="Administrer brugere"
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{/* Help */}
|
||||
<Button
|
||||
type="text"
|
||||
icon={<QuestionCircleOutlined />}
|
||||
title="Hjaelp"
|
||||
aria-label="Hjælp"
|
||||
title="Hjælp"
|
||||
/>
|
||||
|
||||
{/* Notifications */}
|
||||
<Button
|
||||
type="text"
|
||||
icon={<BellOutlined />}
|
||||
aria-label="Notifikationer"
|
||||
title="Notifikationer"
|
||||
/>
|
||||
|
||||
{/* Logout */}
|
||||
<Tooltip title="Log ud">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<LogoutOutlined />}
|
||||
onClick={logout}
|
||||
aria-label="Log ud"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
{/* User Menu */}
|
||||
<Dropdown
|
||||
menu={{
|
||||
|
|
@ -98,18 +159,30 @@ export default function Header() {
|
|||
placement="bottomRight"
|
||||
trigger={['click']}
|
||||
>
|
||||
<Space style={{ cursor: 'pointer' }}>
|
||||
<Badge
|
||||
count={activeRole === 'owner' ? <CrownOutlined style={{ color: '#faad14', fontSize: 10 }} /> : 0}
|
||||
offset={[-2, 2]}
|
||||
style={{ cursor: 'pointer' }}
|
||||
role="button"
|
||||
aria-label="Brugermenu"
|
||||
aria-haspopup="menu"
|
||||
tabIndex={0}
|
||||
>
|
||||
<Avatar
|
||||
size="small"
|
||||
icon={<UserOutlined />}
|
||||
style={{ backgroundColor: '#1677ff' }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Text style={{ maxWidth: 120 }} ellipsis>
|
||||
{user?.name || user?.email || 'Bruger'}
|
||||
</Text>
|
||||
</Space>
|
||||
</Badge>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
|
||||
{/* User Access Manager Modal */}
|
||||
<UserAccessManager
|
||||
open={userAccessOpen}
|
||||
onClose={() => setUserAccessOpen(false)}
|
||||
/>
|
||||
</AntHeader>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue