fix: several Navigation Bar and Drawer fixes (#2845)
* fix: several Navigation Bar and Drawer fixes Fixes #2821 - Fix navigation drawer animations - Fix navigation bar positioning - Do not display navigation drawer collapse button on mobile - Refactor code and rename componentst * Fix storybook test * fix: fix NavigationDrawerHeader elements space-between --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thaïs
@ -2,8 +2,8 @@ import styled from '@emotion/styled';
|
||||
|
||||
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
|
||||
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
|
||||
import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
|
||||
import NavTitle from '@/ui/navigation/navigation-drawer/components/NavTitle';
|
||||
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
|
||||
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
|
||||
import { useFavorites } from '../hooks/useFavorites';
|
||||
@ -24,7 +24,7 @@ export const Favorites = () => {
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<NavTitle label="Favorites" />
|
||||
<NavigationDrawerSectionTitle label="Favorites" />
|
||||
<DraggableList
|
||||
onDragEnd={handleReorderFavorite}
|
||||
draggableItems={
|
||||
@ -45,7 +45,7 @@ export const Favorites = () => {
|
||||
draggableId={id}
|
||||
index={index}
|
||||
itemComponent={
|
||||
<NavItem
|
||||
<NavigationDrawerItem
|
||||
key={id}
|
||||
label={labelIdentifier}
|
||||
Icon={() => (
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
||||
import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
|
||||
import { SupportChat } from '@/support/components/SupportChat';
|
||||
import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
|
||||
import {
|
||||
NavigationDrawer,
|
||||
NavigationDrawerProps,
|
||||
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
|
||||
|
||||
import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
|
||||
import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
|
||||
|
||||
import { MainNavigationDrawerItems } from './MainNavigationDrawerItems';
|
||||
|
||||
export type AppNavigationDrawerProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const AppNavigationDrawer = ({
|
||||
className,
|
||||
}: AppNavigationDrawerProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
const isSettingsPage = useIsSettingsPage();
|
||||
const currentMobileNavigationDrawer = useRecoilValue(
|
||||
currentMobileNavigationDrawerState,
|
||||
);
|
||||
const setIsNavigationDrawerOpen = useSetRecoilState(
|
||||
isNavigationDrawerOpenState,
|
||||
);
|
||||
const currentWorkspace = useRecoilValue(currentWorkspaceState);
|
||||
|
||||
const isSettingsDrawer = isMobile
|
||||
? currentMobileNavigationDrawer === 'settings'
|
||||
: isSettingsPage;
|
||||
|
||||
const drawerProps: NavigationDrawerProps = isSettingsDrawer
|
||||
? {
|
||||
isSubMenu: true,
|
||||
title: 'Settings',
|
||||
children: <SettingsNavigationDrawerItems />,
|
||||
footer: <GithubVersionLink />,
|
||||
}
|
||||
: {
|
||||
logo:
|
||||
(currentWorkspace?.logo &&
|
||||
getImageAbsoluteURIOrBase64(currentWorkspace.logo)) ??
|
||||
undefined,
|
||||
title: currentWorkspace?.displayName ?? undefined,
|
||||
children: <MainNavigationDrawerItems />,
|
||||
footer: <SupportChat />,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setIsNavigationDrawerOpen(!isMobile);
|
||||
}, [isMobile, setIsNavigationDrawerOpen]);
|
||||
|
||||
return (
|
||||
<NavigationDrawer
|
||||
className={className}
|
||||
isSubMenu={drawerProps.isSubMenu}
|
||||
logo={drawerProps.logo}
|
||||
title={drawerProps.title}
|
||||
footer={drawerProps.footer}
|
||||
>
|
||||
{drawerProps.children}
|
||||
</NavigationDrawer>
|
||||
);
|
||||
};
|
||||
@ -1,64 +0,0 @@
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useCurrentUserTaskCount } from '@/activities/tasks/hooks/useCurrentUserDueTaskCount';
|
||||
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import { useIsTasksPage } from '@/navigation/hooks/useIsTasksPage';
|
||||
import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
|
||||
import {
|
||||
IconBell,
|
||||
IconCheckbox,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
} from '@/ui/display/icon/index';
|
||||
import MainNavbar from '@/ui/navigation/navigation-drawer/components/MainNavbar';
|
||||
import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
|
||||
import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
|
||||
|
||||
import { WorkspaceNavItems } from './WorkspaceNavItems';
|
||||
|
||||
export const DesktopNavigationDrawer = () => {
|
||||
const { toggleCommandMenu } = useCommandMenu();
|
||||
const isSettingsPage = useIsSettingsPage();
|
||||
const isTasksPage = useIsTasksPage();
|
||||
const { currentUserDueTaskCount } = useCurrentUserTaskCount();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const setNavigationMemorizedUrl = useSetRecoilState(
|
||||
navigationMemorizedUrlState,
|
||||
);
|
||||
|
||||
return isSettingsPage ? (
|
||||
<SettingsNavbar />
|
||||
) : (
|
||||
<MainNavbar>
|
||||
<NavItem
|
||||
label="Search"
|
||||
Icon={IconSearch}
|
||||
onClick={toggleCommandMenu}
|
||||
keyboard={['⌘', 'K']}
|
||||
/>
|
||||
<NavItem label="Notifications" to="/inbox" Icon={IconBell} soon />
|
||||
<NavItem
|
||||
label="Settings"
|
||||
onClick={() => {
|
||||
setNavigationMemorizedUrl(location.pathname + location.search);
|
||||
navigate('/settings/profile');
|
||||
}}
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
<NavItem
|
||||
label="Tasks"
|
||||
to="/tasks"
|
||||
active={isTasksPage}
|
||||
Icon={IconCheckbox}
|
||||
count={currentUserDueTaskCount}
|
||||
/>
|
||||
<Favorites />
|
||||
<WorkspaceNavItems />
|
||||
</MainNavbar>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,79 @@
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useCurrentUserTaskCount } from '@/activities/tasks/hooks/useCurrentUserDueTaskCount';
|
||||
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetadataNavItems';
|
||||
import {
|
||||
IconBell,
|
||||
IconCheckbox,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
IconTargetArrow,
|
||||
} from '@/ui/display/icon';
|
||||
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
|
||||
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { useIsTasksPage } from '../hooks/useIsTasksPage';
|
||||
|
||||
export const MainNavigationDrawerItems = () => {
|
||||
const isMobile = useIsMobile();
|
||||
const { toggleCommandMenu } = useCommandMenu();
|
||||
const isTasksPage = useIsTasksPage();
|
||||
const { currentUserDueTaskCount } = useCurrentUserTaskCount();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const setNavigationMemorizedUrl = useSetRecoilState(
|
||||
navigationMemorizedUrlState,
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<NavigationDrawerItem
|
||||
label="Search"
|
||||
Icon={IconSearch}
|
||||
onClick={toggleCommandMenu}
|
||||
keyboard={['⌘', 'K']}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Notifications"
|
||||
to="/inbox"
|
||||
Icon={IconBell}
|
||||
soon
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Settings"
|
||||
onClick={() => {
|
||||
setNavigationMemorizedUrl(location.pathname + location.search);
|
||||
navigate('/settings/profile');
|
||||
}}
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Tasks"
|
||||
to="/tasks"
|
||||
active={isTasksPage}
|
||||
Icon={IconCheckbox}
|
||||
count={currentUserDueTaskCount}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Favorites />
|
||||
|
||||
<NavigationDrawerSectionTitle label="Workspace" />
|
||||
<ObjectMetadataNavItems />
|
||||
<NavigationDrawerItem
|
||||
label="Opportunities"
|
||||
to="/objects/opportunities"
|
||||
active={location.pathname === '/objects/opportunities'}
|
||||
Icon={IconTargetArrow}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -11,10 +11,11 @@ import {
|
||||
} from '@/ui/display/icon';
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
|
||||
import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
|
||||
import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
|
||||
import { useIsTasksPage } from '../hooks/useIsTasksPage';
|
||||
import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
|
||||
|
||||
type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings';
|
||||
|
||||
@ -24,11 +25,15 @@ export const MobileNavigationBar = () => {
|
||||
const isTasksPage = useIsTasksPage();
|
||||
const isSettingsPage = useIsSettingsPage();
|
||||
const navigate = useNavigate();
|
||||
const [navigationDrawer, setNavigationDrawer] = useRecoilState(
|
||||
navigationDrawerState,
|
||||
const [isNavigationDrawerOpen, setIsNavigationDrawerOpen] = useRecoilState(
|
||||
isNavigationDrawerOpenState,
|
||||
);
|
||||
const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
|
||||
useRecoilState(currentMobileNavigationDrawerState);
|
||||
|
||||
const initialActiveItemName: NavigationBarItemName = isCommandMenuOpened
|
||||
const activeItemName = isNavigationDrawerOpen
|
||||
? currentMobileNavigationDrawer
|
||||
: isCommandMenuOpened
|
||||
? 'search'
|
||||
: isTasksPage
|
||||
? 'tasks'
|
||||
@ -46,14 +51,17 @@ export const MobileNavigationBar = () => {
|
||||
Icon: IconList,
|
||||
onClick: () => {
|
||||
closeCommandMenu();
|
||||
setNavigationDrawer(navigationDrawer === 'main' ? '' : 'main');
|
||||
setIsNavigationDrawerOpen(
|
||||
(previousIsOpen) => activeItemName !== 'main' || !previousIsOpen,
|
||||
);
|
||||
setCurrentMobileNavigationDrawer('main');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'search',
|
||||
Icon: IconSearch,
|
||||
onClick: () => {
|
||||
setNavigationDrawer('');
|
||||
setIsNavigationDrawerOpen(false);
|
||||
toggleCommandMenu();
|
||||
},
|
||||
},
|
||||
@ -62,7 +70,7 @@ export const MobileNavigationBar = () => {
|
||||
Icon: IconCheckbox,
|
||||
onClick: () => {
|
||||
closeCommandMenu();
|
||||
setNavigationDrawer('');
|
||||
setIsNavigationDrawerOpen(false);
|
||||
navigate('/tasks');
|
||||
},
|
||||
},
|
||||
@ -71,15 +79,13 @@ export const MobileNavigationBar = () => {
|
||||
Icon: IconSettings,
|
||||
onClick: () => {
|
||||
closeCommandMenu();
|
||||
setNavigationDrawer(navigationDrawer === 'settings' ? '' : 'settings');
|
||||
setIsNavigationDrawerOpen(
|
||||
(previousIsOpen) => activeItemName !== 'settings' || !previousIsOpen,
|
||||
);
|
||||
setCurrentMobileNavigationDrawer('settings');
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<NavigationBar
|
||||
activeItemName={navigationDrawer || initialActiveItemName}
|
||||
items={items}
|
||||
/>
|
||||
);
|
||||
return <NavigationBar activeItemName={activeItemName} items={items} />;
|
||||
};
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
|
||||
import MainNavbar from '@/ui/navigation/navigation-drawer/components/MainNavbar';
|
||||
import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
|
||||
|
||||
import { WorkspaceNavItems } from './WorkspaceNavItems';
|
||||
|
||||
export const MobileNavigationDrawer = () => {
|
||||
const [navigationDrawer] = useRecoilState(navigationDrawerState);
|
||||
|
||||
return navigationDrawer === 'settings' ? (
|
||||
<SettingsNavbar />
|
||||
) : (
|
||||
<MainNavbar>
|
||||
<Favorites />
|
||||
<WorkspaceNavItems />
|
||||
</MainNavbar>
|
||||
);
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetadataNavItems';
|
||||
import { IconTargetArrow } from '@/ui/display/icon/index';
|
||||
import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
|
||||
import NavTitle from '@/ui/navigation/navigation-drawer/components/NavTitle';
|
||||
|
||||
export const WorkspaceNavItems = () => {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavTitle label="Workspace" />
|
||||
<ObjectMetadataNavItems />
|
||||
<NavItem
|
||||
label="Opportunities"
|
||||
to="/objects/opportunities"
|
||||
active={pathname === '/objects/opportunities'}
|
||||
Icon={IconTargetArrow}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,77 @@
|
||||
import { useEffect } from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
|
||||
import {
|
||||
AppNavigationDrawer,
|
||||
AppNavigationDrawerProps,
|
||||
} from '../AppNavigationDrawer';
|
||||
|
||||
const MobileNavigationDrawerStateSetterEffect = ({
|
||||
mobileNavigationDrawer = 'main',
|
||||
}: {
|
||||
mobileNavigationDrawer?: 'main' | 'settings';
|
||||
}) => {
|
||||
const isMobile = useIsMobile();
|
||||
const setIsNavigationDrawerOpen = useSetRecoilState(
|
||||
isNavigationDrawerOpenState,
|
||||
);
|
||||
const setCurrentMobileNavigationDrawer = useSetRecoilState(
|
||||
currentMobileNavigationDrawerState,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) return;
|
||||
|
||||
setIsNavigationDrawerOpen(true);
|
||||
setCurrentMobileNavigationDrawer(mobileNavigationDrawer);
|
||||
}, [
|
||||
isMobile,
|
||||
mobileNavigationDrawer,
|
||||
setCurrentMobileNavigationDrawer,
|
||||
setIsNavigationDrawerOpen,
|
||||
]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
type StoryArgs = AppNavigationDrawerProps & {
|
||||
mobileNavigationDrawer?: 'main' | 'settings';
|
||||
routePath: string;
|
||||
};
|
||||
|
||||
const meta: Meta<StoryArgs> = {
|
||||
title: 'Modules/Navigation/AppNavigationDrawer',
|
||||
decorators: [
|
||||
(Story, { args }) => (
|
||||
<MemoryRouter initialEntries={[args.routePath]}>
|
||||
<Story />
|
||||
<MobileNavigationDrawerStateSetterEffect
|
||||
mobileNavigationDrawer={args.mobileNavigationDrawer}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
),
|
||||
SnackBarDecorator,
|
||||
],
|
||||
component: AppNavigationDrawer,
|
||||
args: { routePath: AppPath.Index },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<StoryArgs>;
|
||||
|
||||
export const Main: Story = {};
|
||||
|
||||
export const Settings: Story = {
|
||||
args: {
|
||||
mobileNavigationDrawer: 'settings',
|
||||
routePath: '/settings/appearance',
|
||||
},
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { DesktopNavigationDrawer } from '../DesktopNavigationDrawer';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
|
||||
const meta: Meta<typeof DesktopNavigationDrawer> = {
|
||||
title: 'Modules/Navigation/DesktopNavigationDrawer',
|
||||
component: DesktopNavigationDrawer,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof DesktopNavigationDrawer>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [
|
||||
ComponentDecorator,
|
||||
ComponentWithRouterDecorator,
|
||||
SnackBarDecorator,
|
||||
],
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { MobileNavigationDrawer } from '../MobileNavigationDrawer';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
|
||||
const meta: Meta<typeof MobileNavigationDrawer> = {
|
||||
title: 'Modules/Navigation/MobileNavigationDrawer',
|
||||
component: MobileNavigationDrawer,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MobileNavigationDrawer>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [
|
||||
ComponentDecorator,
|
||||
ComponentWithRouterDecorator,
|
||||
SnackBarDecorator,
|
||||
],
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const currentMobileNavigationDrawerState = atom<'main' | 'settings'>({
|
||||
key: 'currentMobileNavigationDrawerState',
|
||||
default: 'main',
|
||||
});
|
||||
@ -3,7 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
|
||||
import { Icon123 } from '@/ui/input/constants/icons';
|
||||
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
|
||||
import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
|
||||
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
|
||||
|
||||
export const ObjectMetadataNavItems = () => {
|
||||
const { activeObjectMetadataItems } = useObjectMetadataItemForSettings();
|
||||
@ -13,10 +13,9 @@ export const ObjectMetadataNavItems = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{activeObjectMetadataItems.map((objectMetadataItem) => {
|
||||
if (objectMetadataItem.nameSingular === 'opportunity') return null;
|
||||
return (
|
||||
<NavItem
|
||||
{activeObjectMetadataItems.map((objectMetadataItem) =>
|
||||
objectMetadataItem.nameSingular === 'opportunity' ? null : (
|
||||
<NavigationDrawerItem
|
||||
key={objectMetadataItem.id}
|
||||
label={objectMetadataItem.labelPlural}
|
||||
to={`/objects/${objectMetadataItem.namePlural}`}
|
||||
@ -28,8 +27,8 @@ export const ObjectMetadataNavItems = () => {
|
||||
navigate(`/objects/${objectMetadataItem.namePlural}`);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
),
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -13,14 +13,12 @@ import {
|
||||
IconUserCircle,
|
||||
IconUsers,
|
||||
} from '@/ui/display/icon';
|
||||
import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
|
||||
import NavTitle from '@/ui/navigation/navigation-drawer/components/NavTitle';
|
||||
import SubMenuNavbar from '@/ui/navigation/navigation-drawer/components/SubMenuNavbar';
|
||||
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
|
||||
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
|
||||
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
|
||||
export const SettingsNavbar = () => {
|
||||
export const SettingsNavigationDrawerItems = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { signOut } = useAuth();
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
@ -35,9 +33,9 @@ export const SettingsNavbar = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<SubMenuNavbar backButtonTitle="Settings" displayVersion={true}>
|
||||
<NavTitle label="User" />
|
||||
<NavItem
|
||||
<>
|
||||
<NavigationDrawerSectionTitle label="User" />
|
||||
<NavigationDrawerItem
|
||||
label="Profile"
|
||||
to="/settings/profile"
|
||||
Icon={IconUserCircle}
|
||||
@ -48,7 +46,7 @@ export const SettingsNavbar = () => {
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
<NavigationDrawerItem
|
||||
label="Appearance"
|
||||
to="/settings/profile/appearance"
|
||||
Icon={IconColorSwatch}
|
||||
@ -59,9 +57,8 @@ export const SettingsNavbar = () => {
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{isMessagingEnabled && (
|
||||
<NavItem
|
||||
<NavigationDrawerItem
|
||||
label="Accounts"
|
||||
to="/settings/accounts"
|
||||
Icon={IconAt}
|
||||
@ -69,8 +66,8 @@ export const SettingsNavbar = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
<NavTitle label="Workspace" />
|
||||
<NavItem
|
||||
<NavigationDrawerSectionTitle label="Workspace" />
|
||||
<NavigationDrawerItem
|
||||
label="General"
|
||||
to="/settings/workspace"
|
||||
Icon={IconSettings}
|
||||
@ -81,7 +78,7 @@ export const SettingsNavbar = () => {
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
<NavigationDrawerItem
|
||||
label="Members"
|
||||
to="/settings/workspace-members"
|
||||
Icon={IconUsers}
|
||||
@ -92,7 +89,7 @@ export const SettingsNavbar = () => {
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
<NavigationDrawerItem
|
||||
label="Data model"
|
||||
to="/settings/objects"
|
||||
Icon={IconHierarchy2}
|
||||
@ -103,7 +100,7 @@ export const SettingsNavbar = () => {
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
<NavigationDrawerItem
|
||||
label="Developers"
|
||||
to="/settings/developers/api-keys"
|
||||
Icon={IconRobot}
|
||||
@ -115,8 +112,12 @@ export const SettingsNavbar = () => {
|
||||
}
|
||||
/>
|
||||
|
||||
<NavTitle label="Other" />
|
||||
<NavItem label="Logout" onClick={handleLogout} Icon={IconLogout} />
|
||||
</SubMenuNavbar>
|
||||
<NavigationDrawerSectionTitle label="Other" />
|
||||
<NavigationDrawerItem
|
||||
label="Logout"
|
||||
onClick={handleLogout}
|
||||
Icon={IconLogout}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -30,7 +30,7 @@ const insertScript = ({
|
||||
document.body.appendChild(script);
|
||||
};
|
||||
|
||||
const SupportChat = () => {
|
||||
export const SupportChat = () => {
|
||||
const currentUser = useRecoilValue(currentUserState);
|
||||
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
|
||||
const supportChat = useRecoilValue(supportChatState);
|
||||
@ -93,8 +93,8 @@ const SupportChat = () => {
|
||||
return isFrontChatLoaded ? (
|
||||
<StyledButtonContainer>
|
||||
<Button
|
||||
variant={'tertiary'}
|
||||
size={'small'}
|
||||
variant="tertiary"
|
||||
size="small"
|
||||
title="Support"
|
||||
Icon={IconHelpCircle}
|
||||
onClick={() => window.FrontChat?.('show')}
|
||||
@ -102,5 +102,3 @@ const SupportChat = () => {
|
||||
</StyledButtonContainer>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default SupportChat;
|
||||
@ -8,11 +8,9 @@ import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
|
||||
import { CommandMenu } from '@/command-menu/components/CommandMenu';
|
||||
import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
|
||||
import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
|
||||
import { DesktopNavigationDrawer } from '@/navigation/components/DesktopNavigationDrawer';
|
||||
import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
|
||||
import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
|
||||
import { MobileNavigationDrawer } from '@/navigation/components/MobileNavigationDrawer';
|
||||
import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
|
||||
import { NavbarAnimatedContainer } from '@/ui/navigation/navigation-drawer/components/NavbarAnimatedContainer';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
const StyledLayout = styled.div`
|
||||
@ -42,15 +40,18 @@ const StyledLayout = styled.div`
|
||||
|
||||
const StyledPageContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
`;
|
||||
|
||||
const StyledAppNavigationDrawer = styled(AppNavigationDrawer)`
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const StyledMainContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 0 1 100%;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
@ -61,14 +62,13 @@ type DefaultLayoutProps = {
|
||||
export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
|
||||
const onboardingStatus = useOnboardingStatus();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<StyledLayout>
|
||||
<CommandMenu />
|
||||
<KeyboardShortcutMenu />
|
||||
<StyledPageContainer>
|
||||
<NavbarAnimatedContainer>
|
||||
{isMobile ? <MobileNavigationDrawer /> : <DesktopNavigationDrawer />}
|
||||
</NavbarAnimatedContainer>
|
||||
<StyledAppNavigationDrawer />
|
||||
<StyledMainContainer>
|
||||
{onboardingStatus &&
|
||||
onboardingStatus !== OnboardingStatus.Completed ? (
|
||||
|
||||
@ -8,8 +8,8 @@ import { IconChevronLeft } from '@/ui/display/icon/index';
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
|
||||
import { IconButton } from '@/ui/input/button/components/IconButton';
|
||||
import NavCollapseButton from '@/ui/navigation/navigation-drawer/components/NavCollapseButton';
|
||||
import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
|
||||
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
@ -91,14 +91,14 @@ export const PageHeader = ({
|
||||
const isMobile = useIsMobile();
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const navigationDrawer = useRecoilValue(navigationDrawerState);
|
||||
const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
|
||||
|
||||
return (
|
||||
<StyledTopBarContainer>
|
||||
<StyledLeftContainer>
|
||||
{navigationDrawer === '' && (
|
||||
{!isMobile && !isNavigationDrawerOpen && (
|
||||
<StyledTopBarButtonContainer>
|
||||
<NavCollapseButton direction="right" />
|
||||
<NavigationDrawerCollapseButton direction="right" />
|
||||
</StyledTopBarButtonContainer>
|
||||
)}
|
||||
{hasBackButton && (
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { ReactNode } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/PageHeader';
|
||||
import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
|
||||
@ -15,12 +14,11 @@ const StyledMainContainer = styled.div`
|
||||
background: ${({ theme }) => theme.background.noisy};
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: calc(
|
||||
100% - ${({ theme }) => theme.spacing(5)} - ${PAGE_BAR_MIN_HEIGHT}px
|
||||
);
|
||||
padding-bottom: ${({ theme }) => theme.spacing(3)};
|
||||
min-height: 0;
|
||||
padding-bottom: ${({ theme }) => theme.spacing(4)};
|
||||
padding-right: ${({ theme }) => theme.spacing(3)};
|
||||
width: 100%;
|
||||
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconBrandGithub } from '@/ui/display/icon';
|
||||
|
||||
import packageJson from '../../../../../../package.json';
|
||||
import { githubLink } from '../constants';
|
||||
|
||||
const StyledVersionLink = styled.a`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
padding: 0 ${({ theme }) => theme.spacing(1)};
|
||||
text-decoration: none;
|
||||
|
||||
:hover {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
export const GithubVersionLink = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
|
||||
<IconBrandGithub size={theme.icon.size.md} />
|
||||
{packageJson.version}
|
||||
</StyledVersionLink>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { GithubVersionLink } from '../GithubVersionLink';
|
||||
|
||||
const meta: Meta<typeof GithubVersionLink> = {
|
||||
title: 'UI/Navigation/Link/GithubVersionLink',
|
||||
component: GithubVersionLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof GithubVersionLink>;
|
||||
|
||||
export const Default: Story = {};
|
||||
1
front/src/modules/ui/navigation/link/constants/index.ts
Normal file
1
front/src/modules/ui/navigation/link/constants/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export const githubLink = 'https://github.com/twentyhq/twenty';
|
||||
@ -1,45 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import NavItemsContainer from './NavItemsContainer';
|
||||
import NavWorkspaceButton from './NavWorkspaceButton';
|
||||
import SupportChat from './SupportChat';
|
||||
|
||||
type MainNavbarProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2.5)};
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const MainNavbar = ({ children }: MainNavbarProps) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleHover = () => {
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<div onMouseEnter={handleHover} onMouseLeave={handleMouseLeave}>
|
||||
<NavWorkspaceButton showCollapseButton={isHovered} />
|
||||
<NavItemsContainer>{children}</NavItemsContainer>
|
||||
</div>
|
||||
<SupportChat />
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainNavbar;
|
||||
@ -1,79 +0,0 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import {
|
||||
IconLayoutSidebarLeftCollapse,
|
||||
IconLayoutSidebarRightCollapse,
|
||||
} from '@/ui/display/icon';
|
||||
import { IconButton } from '@/ui/input/button/components/IconButton';
|
||||
import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
|
||||
|
||||
const StyledCollapseButton = styled(motion.div)`
|
||||
align-items: center;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.quaternary};
|
||||
}
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
|
||||
padding: 0;
|
||||
|
||||
user-select: none;
|
||||
width: 24px;
|
||||
`;
|
||||
|
||||
type NavCollapseButtonProps = {
|
||||
direction?: 'left' | 'right';
|
||||
show?: boolean;
|
||||
};
|
||||
|
||||
const NavCollapseButton = ({
|
||||
direction = 'left',
|
||||
show = true,
|
||||
}: NavCollapseButtonProps) => {
|
||||
const setNavigationDrawer = useSetRecoilState(navigationDrawerState);
|
||||
|
||||
const iconSize = 'small';
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledCollapseButton
|
||||
initial={false}
|
||||
animate={{
|
||||
opacity: show ? 1 : 0,
|
||||
}}
|
||||
transition={{
|
||||
duration: theme.animation.duration.normal,
|
||||
}}
|
||||
onClick={() =>
|
||||
setNavigationDrawer((navigationDrawer) =>
|
||||
navigationDrawer === '' ? 'main' : '',
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
Icon={
|
||||
direction === 'left'
|
||||
? IconLayoutSidebarLeftCollapse
|
||||
: IconLayoutSidebarRightCollapse
|
||||
}
|
||||
variant="tertiary"
|
||||
size={iconSize}
|
||||
/>
|
||||
</StyledCollapseButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavCollapseButton;
|
||||
@ -1,17 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type NavItemsContainerProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const StyledNavItemsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 40px;
|
||||
`;
|
||||
|
||||
const NavItemsContainer = ({ children }: NavItemsContainerProps) => (
|
||||
<StyledNavItemsContainer>{children}</StyledNavItemsContainer>
|
||||
);
|
||||
|
||||
export default NavItemsContainer;
|
||||
@ -1,80 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
|
||||
|
||||
import NavCollapseButton from './NavCollapseButton';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
display: flex;
|
||||
height: 34px;
|
||||
justify-content: space-between;
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const StyledLogoAndNameContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
type StyledLogoProps = {
|
||||
logo?: string | null;
|
||||
};
|
||||
|
||||
const StyledLogo = styled.div<StyledLogoProps>`
|
||||
background: url(${(props) => props.logo});
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: ${({ theme }) => theme.border.radius.xs};
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
`;
|
||||
|
||||
const StyledName = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-family: 'Inter';
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type NavWorkspaceButtonProps = {
|
||||
showCollapseButton: boolean;
|
||||
};
|
||||
|
||||
const NavWorkspaceButton = ({
|
||||
showCollapseButton,
|
||||
}: NavWorkspaceButtonProps) => {
|
||||
const currentWorkspace = useRecoilValue(currentWorkspaceState);
|
||||
const isMobile = useIsMobile();
|
||||
const DEFAULT_LOGO =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledLogoAndNameContainer>
|
||||
<StyledLogo
|
||||
logo={
|
||||
currentWorkspace?.logo
|
||||
? getImageAbsoluteURIOrBase64(currentWorkspace.logo)
|
||||
: DEFAULT_LOGO
|
||||
}
|
||||
></StyledLogo>
|
||||
<StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
|
||||
</StyledLogoAndNameContainer>
|
||||
{!isMobile && (
|
||||
<NavCollapseButton direction="left" show={showCollapseButton} />
|
||||
)}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavWorkspaceButton;
|
||||
@ -1,55 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
|
||||
import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { desktopNavDrawerWidths } from '../constants';
|
||||
|
||||
const StyledNavbarContainer = styled(motion.div)`
|
||||
align-items: end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
type NavbarAnimatedContainerProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export const NavbarAnimatedContainer = ({
|
||||
children,
|
||||
}: NavbarAnimatedContainerProps) => {
|
||||
const navigationDrawer = useRecoilValue(navigationDrawerState);
|
||||
|
||||
const isInSubMenu = useIsSettingsPage();
|
||||
const theme = useTheme();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const desktopWidth =
|
||||
navigationDrawer === ''
|
||||
? 12
|
||||
: isInSubMenu
|
||||
? desktopNavDrawerWidths.submenu
|
||||
: desktopNavDrawerWidths.menu;
|
||||
|
||||
return (
|
||||
<StyledNavbarContainer
|
||||
initial={false}
|
||||
animate={{
|
||||
width: !isMobile ? desktopWidth : navigationDrawer ? '100%' : 0,
|
||||
opacity: navigationDrawer === '' ? 0 : 1,
|
||||
}}
|
||||
transition={{
|
||||
duration: theme.animation.duration.normal,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</StyledNavbarContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,118 @@
|
||||
import { ReactNode, useState } from 'react';
|
||||
import { css, useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { desktopNavDrawerWidths } from '../constants';
|
||||
|
||||
import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
|
||||
import { NavigationDrawerHeader } from './NavigationDrawerHeader';
|
||||
|
||||
export type NavigationDrawerProps = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
footer?: ReactNode;
|
||||
isSubMenu?: boolean;
|
||||
logo?: string;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
const StyledAnimatedContainer = styled(motion.div)`
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(10)};
|
||||
height: 100%;
|
||||
min-width: ${desktopNavDrawerWidths.menu};
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(4)};
|
||||
|
||||
${({ isSubMenu, theme }) =>
|
||||
isSubMenu
|
||||
? css`
|
||||
padding-top: ${theme.spacing(11)};
|
||||
`
|
||||
: ''}
|
||||
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledItemsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: auto;
|
||||
`;
|
||||
|
||||
export const NavigationDrawer = ({
|
||||
children,
|
||||
className,
|
||||
footer,
|
||||
isSubMenu,
|
||||
logo,
|
||||
title,
|
||||
}: NavigationDrawerProps) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const isMobile = useIsMobile();
|
||||
const theme = useTheme();
|
||||
const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
|
||||
|
||||
const handleHover = () => {
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
const desktopWidth = !isNavigationDrawerOpen
|
||||
? 12
|
||||
: isSubMenu
|
||||
? desktopNavDrawerWidths.submenu
|
||||
: desktopNavDrawerWidths.menu;
|
||||
|
||||
const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
|
||||
|
||||
return (
|
||||
<StyledAnimatedContainer
|
||||
className={className}
|
||||
initial={false}
|
||||
animate={{
|
||||
width: isMobile ? mobileWidth : desktopWidth,
|
||||
opacity: isNavigationDrawerOpen ? 1 : 0,
|
||||
}}
|
||||
transition={{
|
||||
duration: theme.animation.duration.normal,
|
||||
}}
|
||||
>
|
||||
<StyledContainer
|
||||
isSubMenu={isSubMenu}
|
||||
onMouseEnter={handleHover}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{isSubMenu && title ? (
|
||||
!isMobile && <NavigationDrawerBackButton title={title} />
|
||||
) : (
|
||||
<NavigationDrawerHeader
|
||||
name={title}
|
||||
logo={logo}
|
||||
showCollapseButton={isHovered}
|
||||
/>
|
||||
)}
|
||||
<StyledItemsContainer>{children}</StyledItemsContainer>
|
||||
{footer}
|
||||
</StyledContainer>
|
||||
</StyledAnimatedContainer>
|
||||
);
|
||||
};
|
||||
@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil';
|
||||
import { IconChevronLeft } from '@/ui/display/icon/index';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
|
||||
type NavBackButtonProps = {
|
||||
type NavigationDrawerBackButtonProps = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
@ -30,7 +30,9 @@ const StyledContainer = styled.div`
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const NavBackButton = ({ title }: NavBackButtonProps) => {
|
||||
export const NavigationDrawerBackButton = ({
|
||||
title,
|
||||
}: NavigationDrawerBackButtonProps) => {
|
||||
const navigate = useNavigate();
|
||||
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
|
||||
|
||||
@ -47,5 +49,3 @@ const NavBackButton = ({ title }: NavBackButtonProps) => {
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavBackButton;
|
||||
@ -0,0 +1,58 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import {
|
||||
IconLayoutSidebarLeftCollapse,
|
||||
IconLayoutSidebarRightCollapse,
|
||||
} from '@/ui/display/icon';
|
||||
import { IconButton } from '@/ui/input/button/components/IconButton';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
|
||||
const StyledCollapseButton = styled.div`
|
||||
align-items: center;
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: ${({ theme }) => theme.spacing(6)};
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
width: ${({ theme }) => theme.spacing(6)};
|
||||
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.quaternary};
|
||||
}
|
||||
`;
|
||||
|
||||
type NavigationDrawerCollapseButtonProps = {
|
||||
className?: string;
|
||||
direction?: 'left' | 'right';
|
||||
};
|
||||
|
||||
export const NavigationDrawerCollapseButton = ({
|
||||
className,
|
||||
direction = 'left',
|
||||
}: NavigationDrawerCollapseButtonProps) => {
|
||||
const setIsNavigationDrawerOpen = useSetRecoilState(
|
||||
isNavigationDrawerOpenState,
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledCollapseButton
|
||||
className={className}
|
||||
onClick={() =>
|
||||
setIsNavigationDrawerOpen((previousIsOpen) => !previousIsOpen)
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
Icon={
|
||||
direction === 'left'
|
||||
? IconLayoutSidebarLeftCollapse
|
||||
: IconLayoutSidebarRightCollapse
|
||||
}
|
||||
variant="tertiary"
|
||||
size="small"
|
||||
/>
|
||||
</StyledCollapseButton>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: 34px;
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const StyledLogo = styled.div<{ logo: string }>`
|
||||
background: url(${({ logo }) => logo});
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: ${({ theme }) => theme.border.radius.xs};
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
`;
|
||||
|
||||
const StyledName = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-family: 'Inter';
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
`;
|
||||
|
||||
const StyledNavigationDrawerCollapseButton = styled(
|
||||
NavigationDrawerCollapseButton,
|
||||
)<{ show?: boolean }>`
|
||||
margin-left: auto;
|
||||
opacity: ${({ show }) => (show ? 1 : 0)};
|
||||
transition: opacity ${({ theme }) => theme.animation.duration.normal}s;
|
||||
`;
|
||||
|
||||
type NavigationDrawerHeaderProps = {
|
||||
name?: string;
|
||||
logo?: string;
|
||||
showCollapseButton: boolean;
|
||||
};
|
||||
|
||||
export const NavigationDrawerHeader = ({
|
||||
name = 'Twenty',
|
||||
logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=',
|
||||
showCollapseButton,
|
||||
}: NavigationDrawerHeaderProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledLogo logo={logo} />
|
||||
<StyledName>{name}</StyledName>
|
||||
{!isMobile && (
|
||||
<StyledNavigationDrawerCollapseButton
|
||||
direction="left"
|
||||
show={showCollapseButton}
|
||||
/>
|
||||
)}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
@ -4,11 +4,11 @@ import styled from '@emotion/styled';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { navigationDrawerState } from '@/ui/navigation/states/navigationDrawerState';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
type NavItemProps = {
|
||||
type NavigationDrawerItemProps = {
|
||||
className?: string;
|
||||
label: string;
|
||||
to?: string;
|
||||
@ -49,20 +49,24 @@ const StyledItem = styled.div<StyledItemProps>`
|
||||
display: flex;
|
||||
font-family: 'Inter';
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
padding-right: ${({ theme }) => theme.spacing(1)};
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
|
||||
|
||||
:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
color: ${(props) =>
|
||||
props.danger ? props.theme.color.red : props.theme.font.color.primary};
|
||||
}
|
||||
|
||||
:hover .keyboard-shortcuts {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
@ -72,7 +76,6 @@ const StyledItem = styled.div<StyledItemProps>`
|
||||
|
||||
const StyledItemLabel = styled.div`
|
||||
display: flex;
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledSoonPill = styled.div`
|
||||
@ -114,7 +117,7 @@ const StyledKeyBoardShortcut = styled.div`
|
||||
visibility: hidden;
|
||||
`;
|
||||
|
||||
const NavItem = ({
|
||||
export const NavigationDrawerItem = ({
|
||||
className,
|
||||
label,
|
||||
Icon,
|
||||
@ -125,15 +128,17 @@ const NavItem = ({
|
||||
soon,
|
||||
count,
|
||||
keyboard,
|
||||
}: NavItemProps) => {
|
||||
}: NavigationDrawerItemProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useIsMobile();
|
||||
const navigate = useNavigate();
|
||||
const setNavigationDrawer = useSetRecoilState(navigationDrawerState);
|
||||
const setIsNavigationDrawerOpen = useSetRecoilState(
|
||||
isNavigationDrawerOpenState,
|
||||
);
|
||||
|
||||
const handleItemClick = () => {
|
||||
if (isMobile) {
|
||||
setNavigationDrawer('');
|
||||
setIsNavigationDrawerOpen(false);
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
@ -165,5 +170,3 @@ const NavItem = ({
|
||||
</StyledItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavItem;
|
||||
@ -1,6 +1,6 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type NavTitleProps = {
|
||||
type NavigationDrawerSectionTitleProps = {
|
||||
label: string;
|
||||
};
|
||||
|
||||
@ -15,8 +15,6 @@ const StyledTitle = styled.div`
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const NavTitle = ({ label }: NavTitleProps) => (
|
||||
<StyledTitle>{label}</StyledTitle>
|
||||
);
|
||||
|
||||
export default NavTitle;
|
||||
export const NavigationDrawerSectionTitle = ({
|
||||
label,
|
||||
}: NavigationDrawerSectionTitleProps) => <StyledTitle>{label}</StyledTitle>;
|
||||
@ -1,91 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconBrandGithub } from '@/ui/display/icon';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import packageJson from '../../../../../../package.json';
|
||||
import { desktopNavDrawerWidths, githubLink } from '../constants';
|
||||
|
||||
import NavBackButton from './NavBackButton';
|
||||
import NavItemsContainer from './NavItemsContainer';
|
||||
|
||||
type SubMenuNavbarProps = {
|
||||
children: ReactNode;
|
||||
backButtonTitle: string;
|
||||
displayVersion?: boolean;
|
||||
};
|
||||
|
||||
const StyledVersionContainer = styled.div`
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledVersion = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
|
||||
:hover {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledVersionLink = styled.a`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
|
||||
:hover {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
padding-top: ${({ theme }) => theme.spacing(11)};
|
||||
width: ${desktopNavDrawerWidths.menu};
|
||||
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const SubMenuNavbar = ({
|
||||
children,
|
||||
backButtonTitle,
|
||||
displayVersion,
|
||||
}: SubMenuNavbarProps) => {
|
||||
const version = packageJson.version;
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<div>
|
||||
{!isMobile && <NavBackButton title={backButtonTitle} />}
|
||||
<NavItemsContainer>{children}</NavItemsContainer>
|
||||
</div>
|
||||
{displayVersion && (
|
||||
<StyledVersionContainer>
|
||||
<StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
|
||||
<IconBrandGithub size={theme.icon.size.md} />
|
||||
<StyledVersion>{version}</StyledVersion>
|
||||
</StyledVersionLink>
|
||||
</StyledVersionContainer>
|
||||
)}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubMenuNavbar;
|
||||
@ -1,47 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import {
|
||||
IconBell,
|
||||
IconBuildingSkyscraper,
|
||||
IconCheckbox,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
IconTargetArrow,
|
||||
IconUser,
|
||||
} from '@/ui/display/icon';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
|
||||
import MainNavbar from '../MainNavbar';
|
||||
import NavItem from '../NavItem';
|
||||
import NavTitle from '../NavTitle';
|
||||
|
||||
const meta: Meta<typeof MainNavbar> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/MainNavbar',
|
||||
component: MainNavbar,
|
||||
decorators: [SnackBarDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MainNavbar>;
|
||||
|
||||
const navItems = (
|
||||
<>
|
||||
<NavItem label="Search" Icon={IconSearch} />
|
||||
<NavItem label="Notifications" to="/inbox" Icon={IconBell} soon={true} />
|
||||
<NavItem label="Settings" to="/settings/profile" Icon={IconSettings} />
|
||||
<NavItem label="Tasks" to="/tasks" Icon={IconCheckbox} count={2} />
|
||||
<Favorites />
|
||||
<NavTitle label="Workspace" />
|
||||
<NavItem label="Companies" to="/companies" Icon={IconBuildingSkyscraper} />
|
||||
<NavItem label="People" to="/people" Icon={IconUser} />
|
||||
<NavItem label="Opportunities" Icon={IconTargetArrow} />
|
||||
</>
|
||||
);
|
||||
|
||||
export const Default: Story = {
|
||||
args: { children: navItems },
|
||||
argTypes: { children: { control: false } },
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
};
|
||||
@ -1,22 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import NavCollapseButton from '../NavCollapseButton';
|
||||
|
||||
const meta: Meta<typeof NavCollapseButton> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavCollapseButton',
|
||||
component: NavCollapseButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavCollapseButton>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Hidden: Story = {
|
||||
args: { show: false },
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
@ -1,100 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconSearch, IconSettings } from '@/ui/display/icon';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import NavItem from '../NavItem';
|
||||
|
||||
const meta: Meta<typeof NavItem> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavItem',
|
||||
component: NavItem,
|
||||
args: {
|
||||
label: 'Search',
|
||||
Icon: IconSearch,
|
||||
active: true,
|
||||
},
|
||||
argTypes: { Icon: { control: false } },
|
||||
};
|
||||
|
||||
const StyledNavItemContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const ComponentDecorator: Decorator = (Story) => (
|
||||
<StyledNavItemContainer>
|
||||
<Story />
|
||||
</StyledNavItemContainer>
|
||||
);
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavItem>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [ComponentDecorator, ComponentWithRouterDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof NavItem> = {
|
||||
decorators: [
|
||||
ComponentDecorator,
|
||||
CatalogDecorator,
|
||||
ComponentWithRouterDecorator,
|
||||
],
|
||||
parameters: {
|
||||
pseudo: { hover: ['button:has(svg.tabler-icon-settings)'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'active',
|
||||
values: [true, false],
|
||||
props: (active: boolean) => ({ active }),
|
||||
labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
|
||||
},
|
||||
{
|
||||
name: 'danger',
|
||||
values: [true, false],
|
||||
props: (danger: boolean) => ({ danger }),
|
||||
labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['Default', 'Hover'],
|
||||
props: (state: string) =>
|
||||
state === 'Default'
|
||||
? {}
|
||||
: { label: 'Settings', Icon: IconSettings },
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const WithSoonPill: Story = {
|
||||
...Default,
|
||||
args: {
|
||||
active: false,
|
||||
soon: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCount: Story = {
|
||||
...Default,
|
||||
args: {
|
||||
count: 3,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithKeyboardKeys: Story = {
|
||||
...Default,
|
||||
args: {
|
||||
className: "hover",
|
||||
keyboard: ['⌘', 'K'],
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: [".hover"] },
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,109 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import {
|
||||
IconBell,
|
||||
IconBuildingSkyscraper,
|
||||
IconCheckbox,
|
||||
IconColorSwatch,
|
||||
IconLogout,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
IconTargetArrow,
|
||||
IconUser,
|
||||
IconUserCircle,
|
||||
IconUsers,
|
||||
} from '@/ui/display/icon';
|
||||
import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
|
||||
import { NavigationDrawer } from '../NavigationDrawer';
|
||||
import { NavigationDrawerItem } from '../NavigationDrawerItem';
|
||||
import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
|
||||
|
||||
const meta: Meta<typeof NavigationDrawer> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
|
||||
component: NavigationDrawer,
|
||||
decorators: [ComponentWithRouterDecorator, SnackBarDecorator],
|
||||
parameters: { layout: 'fullscreen' },
|
||||
argTypes: { children: { control: false }, footer: { control: false } },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavigationDrawer>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<NavigationDrawerItem label="Search" Icon={IconSearch} active />
|
||||
<NavigationDrawerItem
|
||||
label="Notifications"
|
||||
to="/inbox"
|
||||
Icon={IconBell}
|
||||
soon={true}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Settings"
|
||||
to="/settings/profile"
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Tasks"
|
||||
to="/tasks"
|
||||
Icon={IconCheckbox}
|
||||
count={2}
|
||||
/>
|
||||
<Favorites />
|
||||
<NavigationDrawerSectionTitle label="Workspace" />
|
||||
<NavigationDrawerItem
|
||||
label="Companies"
|
||||
to="/companies"
|
||||
Icon={IconBuildingSkyscraper}
|
||||
/>
|
||||
<NavigationDrawerItem label="People" to="/people" Icon={IconUser} />
|
||||
<NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} />
|
||||
</>
|
||||
),
|
||||
footer: null,
|
||||
},
|
||||
};
|
||||
|
||||
export const Submenu: Story = {
|
||||
args: {
|
||||
isSubMenu: true,
|
||||
title: 'Settings',
|
||||
children: (
|
||||
<>
|
||||
<NavigationDrawerSectionTitle label="User" />
|
||||
<NavigationDrawerItem
|
||||
label="Profile"
|
||||
to="/settings/profile"
|
||||
Icon={IconUserCircle}
|
||||
active
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Appearance"
|
||||
to="/settings/profile/appearance"
|
||||
Icon={IconColorSwatch}
|
||||
/>
|
||||
<NavigationDrawerSectionTitle label="Workspace" />
|
||||
<NavigationDrawerItem
|
||||
label="General"
|
||||
to="/settings/workspace"
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Members"
|
||||
to="/settings/workspace-members"
|
||||
Icon={IconUsers}
|
||||
/>
|
||||
|
||||
<NavigationDrawerSectionTitle label="Other" />
|
||||
<NavigationDrawerItem label="Logout" Icon={IconLogout} />
|
||||
</>
|
||||
),
|
||||
footer: <GithubVersionLink />,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { NavigationDrawerCollapseButton } from '../NavigationDrawerCollapseButton';
|
||||
|
||||
const meta: Meta<typeof NavigationDrawerCollapseButton> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavigationDrawerCollapseButton',
|
||||
decorators: [ComponentDecorator],
|
||||
component: NavigationDrawerCollapseButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavigationDrawerCollapseButton>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@ -0,0 +1,94 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconSearch } from '@/ui/display/icon';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { NavigationDrawerItem } from '../NavigationDrawerItem';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const meta: Meta<typeof NavigationDrawerItem> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavigationDrawerItem',
|
||||
component: NavigationDrawerItem,
|
||||
args: {
|
||||
label: 'Search',
|
||||
Icon: IconSearch,
|
||||
},
|
||||
argTypes: { Icon: { control: false } },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavigationDrawerItem>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<StyledContainer>
|
||||
<Story />
|
||||
</StyledContainer>
|
||||
),
|
||||
ComponentWithRouterDecorator,
|
||||
],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof NavigationDrawerItem> = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<StyledContainer>
|
||||
<Story />
|
||||
</StyledContainer>
|
||||
),
|
||||
CatalogDecorator,
|
||||
(Story) => (
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'danger',
|
||||
values: [true, false],
|
||||
props: (danger: boolean) => ({ danger }),
|
||||
labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
|
||||
},
|
||||
{
|
||||
name: 'active',
|
||||
values: [true, false],
|
||||
props: (active: boolean) => ({ active }),
|
||||
labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['Default', 'Hover'],
|
||||
props: (state: string) => ({
|
||||
className: state === 'Hover' ? 'hover' : undefined,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'adornments',
|
||||
values: ['Without Adornments', 'Soon Pill', 'Count', 'Keyboard Keys'],
|
||||
props: (adornmentName: string) =>
|
||||
adornmentName === 'Soon Pill'
|
||||
? { soon: true }
|
||||
: adornmentName === 'Count'
|
||||
? { count: 3 }
|
||||
: adornmentName === 'Keyboard Keys'
|
||||
? { keyboard: ['⌘', 'K'] }
|
||||
: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,55 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import {
|
||||
IconColorSwatch,
|
||||
IconLogout,
|
||||
IconSettings,
|
||||
IconUserCircle,
|
||||
IconUsers,
|
||||
} from '@/ui/display/icon';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import NavItem from '../NavItem';
|
||||
import NavTitle from '../NavTitle';
|
||||
import SubMenuNavbar from '../SubMenuNavbar';
|
||||
|
||||
const meta: Meta<typeof SubMenuNavbar> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/SubMenuNavbar',
|
||||
component: SubMenuNavbar,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SubMenuNavbar>;
|
||||
|
||||
const navItems = (
|
||||
<>
|
||||
<NavTitle label="User" />
|
||||
<NavItem
|
||||
label="Profile"
|
||||
to="/settings/profile"
|
||||
Icon={IconUserCircle}
|
||||
active
|
||||
/>
|
||||
<NavItem
|
||||
label="Appearance"
|
||||
to="/settings/profile/appearance"
|
||||
Icon={IconColorSwatch}
|
||||
/>
|
||||
<NavTitle label="Workspace" />
|
||||
<NavItem label="General" to="/settings/workspace" Icon={IconSettings} />
|
||||
<NavItem
|
||||
label="Members"
|
||||
to="/settings/workspace-members"
|
||||
Icon={IconUsers}
|
||||
/>
|
||||
<NavTitle label="Other" />
|
||||
|
||||
<NavItem label="Logout" Icon={IconLogout} />
|
||||
</>
|
||||
);
|
||||
|
||||
export const Default: Story = {
|
||||
args: { children: navItems, backButtonTitle: 'Back' },
|
||||
argTypes: { children: { control: false } },
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
};
|
||||
@ -2,5 +2,3 @@ export const desktopNavDrawerWidths = {
|
||||
menu: '236px',
|
||||
submenu: '536px',
|
||||
};
|
||||
|
||||
export const githubLink = 'https://github.com/twentyhq/twenty';
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
|
||||
const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
|
||||
|
||||
export const isNavigationDrawerOpenState = atom({
|
||||
key: 'isNavigationDrawerOpen',
|
||||
default: !isMobile,
|
||||
});
|
||||
@ -1,6 +0,0 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const navigationDrawerState = atom<'main' | 'settings' | ''>({
|
||||
key: 'ui/navigationDrawerState',
|
||||
default: 'main',
|
||||
});
|
||||
Reference in New Issue
Block a user