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

82
front/src/AppNavbar.tsx
View File

@ -11,7 +11,7 @@ import {
IconTargetArrow,
IconUser,
} from '@/ui/icon/index';
import { useIsSubNavbarDisplayed } from '@/ui/layout/hooks/useIsSubNavbarDisplayed';
import { useIsSubMenuNavbarDisplayed } from '@/ui/layout/hooks/useIsSubMenuNavbarDisplayed';
import MainNavbar from '@/ui/navbar/components/MainNavbar';
import NavItem from '@/ui/navbar/components/NavItem';
import NavTitle from '@/ui/navbar/components/NavTitle';
@ -21,51 +21,49 @@ export function AppNavbar() {
const currentPath = useLocation().pathname;
const { openCommandMenu } = useCommandMenu();
const isSubNavbarDisplayed = useIsSubNavbarDisplayed();
const isInSubMenu = useIsSubMenuNavbarDisplayed();
return (
<>
{!isSubNavbarDisplayed ? (
{!isInSubMenu ? (
<MainNavbar>
<>
<NavItem
label="Search"
icon={<IconSearch size={theme.icon.size.md} />}
onClick={() => {
openCommandMenu();
}}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={theme.icon.size.md} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={theme.icon.size.md} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="Companies"
to="/companies"
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
active={currentPath === '/companies'}
/>
<NavItem
label="People"
to="/people"
icon={<IconUser size={theme.icon.size.md} />}
active={currentPath === '/people'}
/>
<NavItem
label="Opportunities"
to="/opportunities"
icon={<IconTargetArrow size={theme.icon.size.md} />}
active={currentPath === '/opportunities'}
/>
</>
<NavItem
label="Search"
icon={<IconSearch size={theme.icon.size.md} />}
onClick={() => {
openCommandMenu();
}}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={theme.icon.size.md} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={theme.icon.size.md} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="Companies"
to="/companies"
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
active={currentPath === '/companies'}
/>
<NavItem
label="People"
to="/people"
icon={<IconUser size={theme.icon.size.md} />}
active={currentPath === '/people'}
/>
<NavItem
label="Opportunities"
to="/opportunities"
icon={<IconTargetArrow size={theme.icon.size.md} />}
active={currentPath === '/opportunities'}
/>
</MainNavbar>
) : (
<SettingsNavbar />