admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat/improve mobile display (#843)

Browse Source 
* Ok 1

* Finished

* Fix PR

* Fix PR

* Fix desktop

* Fix

* Fix absolute listen click outside

* console.log

* Fix according to code review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-23 19:53:35 +02:00
committed by GitHub
parent 742791bd92
commit 21d5133564
45 changed files with 464 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
front/src/modules/settings/components/SettingsNavbar.tsx
View File

@ -12,7 +12,7 @@ import {
} from '@/ui/icon/index';
import NavItem from '@/ui/navbar/components/NavItem';
import NavTitle from '@/ui/navbar/components/NavTitle';
import SubNavbar from '@/ui/navbar/components/SubNavbar';
import SubMenuNavbar from '@/ui/navbar/components/SubMenuNavbar';
export function SettingsNavbar() {
const theme = useTheme();
@ -24,62 +24,60 @@ export function SettingsNavbar() {
}, [signOut]);
return (
<SubNavbar backButtonTitle="Settings">
<>
<NavTitle label="User" />
<NavItem
label="Profile"
to="/settings/profile"
icon={<IconUser size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/profile').pathname,
end: true,
})
}
/>
<NavItem
label="Experience"
to="/settings/profile/experience"
icon={<IconColorSwatch size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/profile/experience').pathname,
end: true,
})
}
/>
<NavTitle label="Workspace" />
<NavItem
label="Members"
to="/settings/workspace-members"
icon={<IconUsers size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace-members').pathname,
end: true,
})
}
/>
<NavItem
label="General"
to="/settings/workspace"
icon={<IconSettings size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace').pathname,
end: true,
})
}
/>
<NavTitle label="Other" />
<NavItem
label="Logout"
onClick={handleLogout}
icon={<IconLogout size={theme.icon.size.md} />}
danger={true}
/>
</>
</SubNavbar>
<SubMenuNavbar backButtonTitle="Settings">
<NavTitle label="User" />
<NavItem
label="Profile"
to="/settings/profile"
icon={<IconUser size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/profile').pathname,
end: true,
})
}
/>
<NavItem
label="Experience"
to="/settings/profile/experience"
icon={<IconColorSwatch size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/profile/experience').pathname,
end: true,
})
}
/>
<NavTitle label="Workspace" />
<NavItem
label="Members"
to="/settings/workspace-members"
icon={<IconUsers size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace-members').pathname,
end: true,
})
}
/>
<NavItem
label="General"
to="/settings/workspace"
icon={<IconSettings size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace').pathname,
end: true,
})
}
/>
<NavTitle label="Other" />
<NavItem
label="Logout"
onClick={handleLogout}
icon={<IconLogout size={theme.icon.size.md} />}
danger={true}
/>
</SubMenuNavbar>
);
}