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/NavBackButton.tsx
+++ b/front/src/modules/ui/navigation/navigation-drawer/components/NavBackButton.tsx
@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { IconChevronLeft } from '@/ui/display/icon/index';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+
+type NavBackButtonProps = {
+  title: string;
+};
+
+const StyledIconAndButtonContainer = styled.button`
+  align-items: center;
+  background: inherit;
+  border: none;
+  color: ${({ theme }) => theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const NavBackButton = ({ title }: NavBackButtonProps) => {
+  const navigate = useNavigate();
+  const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
+
+  return (
+    <StyledContainer>
+      <StyledIconAndButtonContainer
+        onClick={() => {
+          navigate(navigationMemorizedUrl, { replace: true });
+        }}
+      >
+        <IconChevronLeft />
+        <span>{title}</span>
+      </StyledIconAndButtonContainer>
+    </StyledContainer>
+  );
+};
+
+export default NavBackButton;