eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

refactor: improve layout spacing and enhance preferences menu in HeaderLayout

Browse Source
This commit is contained in:
Firman Ramdhani
2026-07-03 15:59:14 +07:00
parent f9df63a27d
commit 6df6880ba3
1 changed files with 54 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/apps/modules/layouts/components/header.layout.tsx
+54 -46
View File
@@ -55,7 +55,7 @@ export default function HeaderLayout() {
</Group>
{/* 3. RIGHT SECTION (Actions & Profile) */}
<Group wrap="nowrap" gap="xs">
<Group wrap="nowrap" gap="sm">
<ActionIcon variant="subtle" color="gray" size="lg" aria-label="Help">
<HelpCircle size={18} />
</ActionIcon>
@@ -75,7 +75,7 @@ export default function HeaderLayout() {
transition: 'background-color 150ms ease',
}}
>
<Group gap="sm" wrap="nowrap">
<Group gap="sm" wrap="nowrap" pl="sm">
<Avatar src={USER.avatar} size={28} radius="xl" color="blue">
{getInitials(USER.name)}
</Avatar>
@@ -94,8 +94,9 @@ export default function HeaderLayout() {
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>
<Box p="xs" hiddenFrom="sm">
<Menu.Dropdown p="md">
{/* Mobile User Info */}
<Box px="sm" py="xs" hiddenFrom="sm">
<Text size="sm" fw={600} truncate="end">
{USER.name}
</Text>
@@ -105,56 +106,63 @@ export default function HeaderLayout() {
</Box>
<Menu.Divider hiddenFrom="sm" />
<Box px="sm">
<Menu.Label>{t('common:preferences', { ns: 'common' })}</Menu.Label>
<Group px="sm" justify="space-between" wrap="nowrap">
<Group gap="xs" wrap="nowrap">
<Globe size={14} style={{ opacity: 0.8 }} />
<Text size="sm">{t('common:language', { ns: 'common' })}</Text>
</Group>
<Select
size="xs"
variant="unstyled"
w={110}
data={[
{ value: 'en', label: t('common:english', { ns: 'common' }) },
{ value: 'id', label: t('common:indonesian', { ns: 'common' }) },
]}
value={i18n.resolvedLanguage || i18n.language}
onChange={async (val) => {
if (!val) return;
await i18n.changeLanguage(val);
await secureStorage.setItem(AppStorageKey.LOCALE, val);
}}
styles={{ input: { textAlign: 'right' } }}
/>
{/* Preferences Section */}
<Menu.Label>{t('common:preferences')}</Menu.Label>
{/* Custom Language Item */}
<Group justify="space-between" wrap="nowrap" px="sm" py="xs">
<Group gap="sm" wrap="nowrap">
<Globe size={14} />
<Text size="sm">{t('common:language')}</Text>
</Group>
</Box>
<Select
size="xs"
variant="unstyled"
w={110}
data={[
{ value: 'en', label: t('common:english') },
{ value: 'id', label: t('common:indonesian') },
]}
value={i18n.resolvedLanguage || i18n.language}
onChange={async (val) => {
if (!val) return;
await i18n.changeLanguage(val);
await secureStorage.setItem(AppStorageKey.LOCALE, val);
}}
styles={{
input: {
textAlign: 'right',
cursor: 'pointer',
height: '22px',
minHeight: '22px',
},
root: {
marginTop: '-4px',
marginBottom: '-4px',
},
}}
/>
</Group>
<Menu.Divider />
<Box px="sm">
<Menu.Label>{t('common:application', { ns: 'common' })}</Menu.Label>
<Menu.Item leftSection={<Settings size={14} />}>
{t('common:accountSettings', { ns: 'common' })}
</Menu.Item>
<Menu.Item leftSection={<User size={14} />}>{t('common:myProfile', { ns: 'common' })}</Menu.Item>
{/* Application Section */}
<Menu.Label>{t('common:application')}</Menu.Label>
<Menu.Item leftSection={<Settings size={14} />}>{t('common:accountSettings')}</Menu.Item>
<Menu.Item leftSection={<User size={14} />}>{t('common:myProfile')}</Menu.Item>
<Menu.Divider />
<Menu.Divider />
<Menu.Label>{t('common:workspace', { ns: 'common' })}</Menu.Label>
<Menu.Item leftSection={<Briefcase size={14} />}>
{t('common:switchWorkspace', { ns: 'common' })}
</Menu.Item>
</Box>
{/* Workspace Section */}
<Menu.Label>{t('common:workspace')}</Menu.Label>
<Menu.Item leftSection={<Briefcase size={14} />}>{t('common:switchWorkspace')}</Menu.Item>
<Box px="sm">
<Menu.Divider />
<Menu.Divider />
<Menu.Item color="red" leftSection={<LogOut size={14} />}>
{t('common:signOut', { ns: 'common' })}
</Menu.Item>
</Box>
{/* Sign Out Section */}
<Menu.Item color="red" leftSection={<LogOut size={14} />}>
{t('common:signOut')}
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Group>