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

Refactor Layout (#322)

Browse Source 
* Refactor Layout

* Fix storybook

* Fixing tests by forcing msw version before regression
This commit is contained in:
Charles Bochet
2023-06-17 21:24:15 +02:00
committed by GitHub
parent 5ae5f28dcb
commit 49462c69a2
38 changed files with 325 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
front/src/AppNavbar.tsx
View File

@ -1,6 +1,7 @@
import { useMatch, useResolvedPath } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
import {
IconBuildingSkyscraper,
IconInbox,
@ -16,51 +17,51 @@ import NavWorkspaceButton from './modules/ui/layout/navbar/NavWorkspaceButton';
export function AppNavbar() {
const theme = useTheme();
const currentPath = useLocation().pathname;
const shouldDiplaySubNavBar = currentPath.match(/\/settings\//g) !== null;
return (
<>
<NavWorkspaceButton />
<NavItemsContainer>
<NavItem
label="Search"
to="/search"
icon={<IconSearch size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={theme.iconSizeMedium} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="People"
to="/people"
icon={<IconUser size={theme.iconSizeMedium} />}
active={
!!useMatch({
path: useResolvedPath('/people').pathname,
end: true,
})
}
/>
<NavItem
label="Companies"
to="/companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
active={
!!useMatch({
path: useResolvedPath('/companies').pathname,
end: true,
})
}
/>
</NavItemsContainer>
{!shouldDiplaySubNavBar ? (
<>
<NavWorkspaceButton />
<NavItemsContainer>
<NavItem
label="Search"
to="/search"
icon={<IconSearch size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={theme.iconSizeMedium} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="People"
to="/people"
icon={<IconUser size={theme.iconSizeMedium} />}
active={currentPath === '/people'}
/>
<NavItem
label="Companies"
to="/companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
active={currentPath === '/companies'}
/>
</NavItemsContainer>
</>
) : (
<SettingsNavbar />
)}
</>
);
}