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
+36 -28
View File
@@ -55,7 +55,7 @@ export default function HeaderLayout() {
</Group> </Group>
{/* 3. RIGHT SECTION (Actions & Profile) */} {/* 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"> <ActionIcon variant="subtle" color="gray" size="lg" aria-label="Help">
<HelpCircle size={18} /> <HelpCircle size={18} />
</ActionIcon> </ActionIcon>
@@ -75,7 +75,7 @@ export default function HeaderLayout() {
transition: 'background-color 150ms ease', 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"> <Avatar src={USER.avatar} size={28} radius="xl" color="blue">
{getInitials(USER.name)} {getInitials(USER.name)}
</Avatar> </Avatar>
@@ -94,8 +94,9 @@ export default function HeaderLayout() {
</UnstyledButton> </UnstyledButton>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown p="md">
<Box p="xs" hiddenFrom="sm"> {/* Mobile User Info */}
<Box px="sm" py="xs" hiddenFrom="sm">
<Text size="sm" fw={600} truncate="end"> <Text size="sm" fw={600} truncate="end">
{USER.name} {USER.name}
</Text> </Text>
@@ -105,20 +106,22 @@ export default function HeaderLayout() {
</Box> </Box>
<Menu.Divider hiddenFrom="sm" /> <Menu.Divider hiddenFrom="sm" />
<Box px="sm"> {/* Preferences Section */}
<Menu.Label>{t('common:preferences', { ns: 'common' })}</Menu.Label> <Menu.Label>{t('common:preferences')}</Menu.Label>
<Group px="sm" justify="space-between" wrap="nowrap">
<Group gap="xs" wrap="nowrap"> {/* Custom Language Item */}
<Globe size={14} style={{ opacity: 0.8 }} /> <Group justify="space-between" wrap="nowrap" px="sm" py="xs">
<Text size="sm">{t('common:language', { ns: 'common' })}</Text> <Group gap="sm" wrap="nowrap">
<Globe size={14} />
<Text size="sm">{t('common:language')}</Text>
</Group> </Group>
<Select <Select
size="xs" size="xs"
variant="unstyled" variant="unstyled"
w={110} w={110}
data={[ data={[
{ value: 'en', label: t('common:english', { ns: 'common' }) }, { value: 'en', label: t('common:english') },
{ value: 'id', label: t('common:indonesian', { ns: 'common' }) }, { value: 'id', label: t('common:indonesian') },
]} ]}
value={i18n.resolvedLanguage || i18n.language} value={i18n.resolvedLanguage || i18n.language}
onChange={async (val) => { onChange={async (val) => {
@@ -126,35 +129,40 @@ export default function HeaderLayout() {
await i18n.changeLanguage(val); await i18n.changeLanguage(val);
await secureStorage.setItem(AppStorageKey.LOCALE, val); await secureStorage.setItem(AppStorageKey.LOCALE, val);
}} }}
styles={{ input: { textAlign: 'right' } }} styles={{
input: {
textAlign: 'right',
cursor: 'pointer',
height: '22px',
minHeight: '22px',
},
root: {
marginTop: '-4px',
marginBottom: '-4px',
},
}}
/> />
</Group> </Group>
</Box>
<Menu.Divider /> <Menu.Divider />
<Box px="sm"> {/* Application Section */}
<Menu.Label>{t('common:application', { ns: 'common' })}</Menu.Label> <Menu.Label>{t('common:application')}</Menu.Label>
<Menu.Item leftSection={<Settings size={14} />}> <Menu.Item leftSection={<Settings size={14} />}>{t('common:accountSettings')}</Menu.Item>
{t('common:accountSettings', { ns: 'common' })} <Menu.Item leftSection={<User size={14} />}>{t('common:myProfile')}</Menu.Item>
</Menu.Item>
<Menu.Item leftSection={<User size={14} />}>{t('common:myProfile', { ns: 'common' })}</Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Label>{t('common:workspace', { ns: 'common' })}</Menu.Label> {/* Workspace Section */}
<Menu.Item leftSection={<Briefcase size={14} />}> <Menu.Label>{t('common:workspace')}</Menu.Label>
{t('common:switchWorkspace', { ns: 'common' })} <Menu.Item leftSection={<Briefcase size={14} />}>{t('common:switchWorkspace')}</Menu.Item>
</Menu.Item>
</Box>
<Box px="sm">
<Menu.Divider /> <Menu.Divider />
{/* Sign Out Section */}
<Menu.Item color="red" leftSection={<LogOut size={14} />}> <Menu.Item color="red" leftSection={<LogOut size={14} />}>
{t('common:signOut', { ns: 'common' })} {t('common:signOut')}
</Menu.Item> </Menu.Item>
</Box>
</Menu.Dropdown> </Menu.Dropdown>
</Menu> </Menu>
</Group> </Group>