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>

front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+import { NavigationBarItem } from './NavigationBarItem';
+
+const StyledContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(3)};
+`;
+
+type NavigationBarProps = {
+  activeItemName: string;
+  items: { name: string; Icon: IconComponent; onClick: () => void }[];
+};
+
+export const NavigationBar = ({
+  activeItemName,
+  items,
+}: NavigationBarProps) => (
+  <StyledContainer>
+    {items.map(({ Icon, name, onClick }) => (
+      <NavigationBarItem
+        key={name}
+        Icon={Icon}
+        isActive={activeItemName === name}
+        onClick={onClick}
+      />
+    ))}
+  </StyledContainer>
+);