feat: add back button in company details top bar (#729)

* feat: add back button in company details top bar

Closes #636

* Add back button on person page

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/layout/top-bar/components/TopBar.tsx

@@ -1,8 +1,9 @@
-import { ReactNode } from 'react';
+import { ReactNode, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { IconButton } from '@/ui/button/components/IconButton';
-import { IconPlus } from '@/ui/icon/index';
+import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
 
 export const TOP_BAR_MIN_HEIGHT = 40;
@@ -27,17 +28,36 @@ const TitleContainer = styled.div`
   width: 100%;
 `;
 
+const BackIconButton = styled(IconButton)`
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
 type OwnProps = {
   title: string;
+  hasBackButton?: boolean;
   icon: ReactNode;
   onAddButtonClick?: () => void;
 };
 
-export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
+export function TopBar({
+  title,
+  hasBackButton,
+  icon,
+  onAddButtonClick,
+}: OwnProps) {
+  const navigate = useNavigate();
+  const navigateBack = useCallback(() => navigate(-1), [navigate]);
+
   return (
     <>
       <TopBarContainer>
         <NavCollapseButton hideIfOpen={true} />
+        {hasBackButton && (
+          <BackIconButton
+            icon={<IconChevronLeft size={16} />}
+            onClick={navigateBack}
+          />
+        )}
         {icon}
         <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
         {onAddButtonClick && (