feat: improve mobile display by tab bar and other changes (#2304)

* feat: improve mobile display by tab bar and other changes * fix: remove unused declaration in mobile navigation * fix: update desktop navbar stories title * fix: retrieve old titles for desktop-navbar stories * fix: styles, manage active tabs * fix: styles, manage active tabs * fix: styles, manage active tabs * fix: styles, manage active tabs * fix: styles, manage active tabs * fix: styles, manage active tabs * fix: styles, manage active tabs * fix: styles, manage active tabs * fix: update logic for tab bar menu icons * fix: remove Settings icon for mobile * fix: resolve comments in pl * feat: rework mobile navigation bar * Fix * Fixes --------- Co-authored-by: Thaïs Guigon <guigon.thais@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2023-12-02 02:16:34 +04:00
parent 74b077f3ca
commit fec8223ab8
50 changed files with 640 additions and 380 deletions
@@ -0,0 +1,85 @@
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import {
+  IconCheckbox,
+  IconList,
+  IconSearch,
+  IconSettings,
+} 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 { useIsSettingsPage } from '../hooks/useIsSettingsPage';
+import { useIsTasksPage } from '../hooks/useIsTasksPage';
+
+type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings';
+
+export const MobileNavigationBar = () => {
+  const [isCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState);
+  const { closeCommandMenu, toggleCommandMenu } = useCommandMenu();
+  const isTasksPage = useIsTasksPage();
+  const isSettingsPage = useIsSettingsPage();
+  const navigate = useNavigate();
+  const [navigationDrawer, setNavigationDrawer] = useRecoilState(
+    navigationDrawerState,
+  );
+
+  const initialActiveItemName: NavigationBarItemName = isCommandMenuOpened
+    ? 'search'
+    : isTasksPage
+    ? 'tasks'
+    : isSettingsPage
+    ? 'settings'
+    : 'main';
+
+  const items: {
+    name: NavigationBarItemName;
+    Icon: IconComponent;
+    onClick: () => void;
+  }[] = [
+    {
+      name: 'main',
+      Icon: IconList,
+      onClick: () => {
+        closeCommandMenu();
+        setNavigationDrawer(navigationDrawer === 'main' ? '' : 'main');
+      },
+    },
+    {
+      name: 'search',
+      Icon: IconSearch,
+      onClick: () => {
+        setNavigationDrawer('');
+        toggleCommandMenu();
+      },
+    },
+    {
+      name: 'tasks',
+      Icon: IconCheckbox,
+      onClick: () => {
+        closeCommandMenu();
+        setNavigationDrawer('');
+        navigate('/tasks');
+      },
+    },
+    {
+      name: 'settings',
+      Icon: IconSettings,
+      onClick: () => {
+        closeCommandMenu();
+        setNavigationDrawer(navigationDrawer === 'settings' ? '' : 'settings');
+      },
+    },
+  ];
+
+  return (
+    <NavigationBar
+      activeItemName={navigationDrawer || initialActiveItemName}
+      items={items}
+    />
+  );
+};