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
--- a/front/src/modules/ui/navigation/navigation-drawer/components/NavCollapseButton.tsx
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/NavCollapseButton.tsx
@ -0,0 +1,79 @@
+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;