Files
twenty_crm/front/src/AppNavbar.tsx
Félix Malfait 830b76cd9a Icon refactoring (#287)
* Refactor icons

* Fix additional icons
2023-06-14 07:55:54 +02:00

65 lines
1.5 KiB
TypeScript

import { useMatch, useResolvedPath } from 'react-router-dom';
import {
IconBuilding,
IconInbox,
IconSearch,
IconSettings,
IconUser,
} from '@/ui/icons/index';
import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
import NavItem from './modules/ui/layout/navbar/NavItem';
import NavTitle from './modules/ui/layout/navbar/NavTitle';
import NavWorkspaceButton from './modules/ui/layout/navbar/NavWorkspaceButton';
export function AppNavbar() {
return (
<>
<NavWorkspaceButton />
<NavItemsContainer>
<NavItem
label="Search"
to="/search"
icon={<IconSearch size={16} />}
soon={true}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={16} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={16} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="People"
to="/people"
icon={<IconUser size={16} />}
active={
!!useMatch({
path: useResolvedPath('/people').pathname,
end: true,
})
}
/>
<NavItem
label="Companies"
to="/companies"
icon={<IconBuilding size={16} />}
active={
!!useMatch({
path: useResolvedPath('/companies').pathname,
end: true,
})
}
/>
</NavItemsContainer>
</>
);
}