Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/navigation/navbar/components/MainNavbar.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+
+import NavItemsContainer from './NavItemsContainer';
+import NavWorkspaceButton from './NavWorkspaceButton';
+import SupportChat from './SupportChat';
+
+type MainNavbarProps = {
+  children: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(2.5)};
+  width: 100%;
+`;
+
+const MainNavbar = ({ children }: MainNavbarProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleHover = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <StyledContainer>
+      <div onMouseEnter={handleHover} onMouseLeave={handleMouseLeave}>
+        <NavWorkspaceButton showCollapseButton={isHovered} />
+        <NavItemsContainer>{children}</NavItemsContainer>
+      </div>
+      <SupportChat />
+    </StyledContainer>
+  );
+};
+
+export default MainNavbar;

front/src/modules/ui/navigation/navbar/components/NavBackButton.tsx

@@ -0,0 +1,56 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { IconChevronLeft } from '@/ui/display/icon/index';
+import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
+
+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 [, setIsNavbarSwitchingSize] = useRecoilState(
+    isNavbarSwitchingSizeState,
+  );
+
+  return (
+    <>
+      <StyledContainer>
+        <StyledIconAndButtonContainer
+          onClick={() => {
+            setIsNavbarSwitchingSize(true);
+            navigate('/', { replace: true });
+          }}
+        >
+          <IconChevronLeft />
+          <span>{title}</span>
+        </StyledIconAndButtonContainer>
+      </StyledContainer>
+    </>
+  );
+};
+
+export default NavBackButton;

front/src/modules/ui/navigation/navbar/components/NavCollapseButton.tsx

@@ -0,0 +1,75 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { useRecoilState } from 'recoil';
+
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse,
+} from '@/ui/display/icon';
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
+
+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 [isNavbarOpened, setIsNavbarOpened] =
+    useRecoilState(isNavbarOpenedState);
+
+  const iconSize = 'small';
+  const theme = useTheme();
+
+  return (
+    <>
+      <StyledCollapseButton
+        animate={{
+          opacity: show ? 1 : 0,
+        }}
+        transition={{
+          duration: theme.animation.duration.normal,
+        }}
+        onClick={() => setIsNavbarOpened(!isNavbarOpened)}
+      >
+        <IconButton
+          Icon={
+            direction === 'left'
+              ? IconLayoutSidebarLeftCollapse
+              : IconLayoutSidebarRightCollapse
+          }
+          variant="tertiary"
+          size={iconSize}
+        />
+      </StyledCollapseButton>
+    </>
+  );
+};
+
+export default NavCollapseButton;

front/src/modules/ui/navigation/navbar/components/NavItem.tsx

@@ -0,0 +1,166 @@
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { isNavbarOpenedState } from '../../../layout/states/isNavbarOpenedState';
+
+type NavItemProps = {
+  label: string;
+  to?: string;
+  onClick?: () => void;
+  Icon: IconComponent;
+  active?: boolean;
+  danger?: boolean;
+  soon?: boolean;
+  count?: number;
+  keyboard?: string[];
+};
+
+type StyledItemProps = {
+  active?: boolean;
+  danger?: boolean;
+  soon?: boolean;
+};
+
+const StyledItem = styled.button<StyledItemProps>`
+  align-items: center;
+  background: ${(props) =>
+    props.active ? props.theme.background.transparent.light : 'inherit'};
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) => {
+    if (props.active) {
+      return props.theme.font.color.primary;
+    }
+    if (props.danger) {
+      return props.theme.color.red;
+    }
+    if (props.soon) {
+      return props.theme.font.color.light;
+    }
+    return props.theme.font.color.secondary;
+  }};
+  cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${({ theme }) => theme.font.size.md};
+  margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
+  :hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+    color: ${(props) =>
+      props.danger ? props.theme.color.red : props.theme.font.color.primary};
+  }
+  :hover .keyboard-shortcuts {
+    visibility: visible;
+  }
+  user-select: none;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    font-size: ${({ theme }) => theme.font.size.lg};
+  }
+`;
+
+const StyledItemLabel = styled.div`
+  display: flex;
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledSoonPill = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  border-radius: 50px;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  height: 16px;
+  justify-content: center;
+  margin-left: auto;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledItemCount = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.blue};
+  border-radius: ${({ theme }) => theme.border.radius.rounded};
+  color: ${({ theme }) => theme.grayScale.gray0};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  height: 16px;
+  justify-content: center;
+  margin-left: auto;
+  width: 16px;
+`;
+
+const StyledKeyBoardShortcut = styled.div`
+  align-items: center;
+  border-radius: 4px;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  justify-content: center;
+  letter-spacing: 1px;
+  margin-left: auto;
+  visibility: hidden;
+`;
+
+const NavItem = ({
+  label,
+  Icon,
+  to,
+  onClick,
+  active,
+  danger,
+  soon,
+  count,
+  keyboard,
+}: NavItemProps) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const [, setIsNavbarOpened] = useRecoilState(isNavbarOpenedState);
+
+  const isMobile = useIsMobile();
+
+  const handleItemClick = () => {
+    if (isMobile) {
+      setIsNavbarOpened(false);
+    }
+
+    if (onClick) {
+      onClick();
+    } else if (to) {
+      navigate(to);
+    }
+  };
+
+  return (
+    <StyledItem
+      onClick={handleItemClick}
+      active={active}
+      aria-selected={active}
+      danger={danger}
+      soon={soon}
+    >
+      {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
+      <StyledItemLabel>{label}</StyledItemLabel>
+      {soon && <StyledSoonPill>Soon</StyledSoonPill>}
+      {!!count && <StyledItemCount>{count}</StyledItemCount>}
+      {keyboard && (
+        <StyledKeyBoardShortcut className="keyboard-shortcuts">
+          {keyboard.map((key) => key)}
+        </StyledKeyBoardShortcut>
+      )}
+    </StyledItem>
+  );
+};
+
+export default NavItem;

front/src/modules/ui/navigation/navbar/components/NavItemsContainer.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+type NavItemsContainerProps = {
+  children: React.ReactNode;
+};
+
+const StyledNavItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 40px;
+`;
+
+const NavItemsContainer = ({ children }: NavItemsContainerProps) => (
+  <StyledNavItemsContainer>{children}</StyledNavItemsContainer>
+);
+
+export default NavItemsContainer;

front/src/modules/ui/navigation/navbar/components/NavTitle.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+type NavTitleProps = {
+  label: string;
+};
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(8)};
+  text-transform: uppercase;
+`;
+
+const NavTitle = ({ label }: NavTitleProps) => (
+  <StyledTitle>{label}</StyledTitle>
+);
+
+export default NavTitle;

front/src/modules/ui/navigation/navbar/components/NavWorkspaceButton.tsx

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
+
+import NavCollapseButton from './NavCollapseButton';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  align-self: flex-start;
+  background: inherit;
+  border: 0;
+  display: flex;
+  height: 34px;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  user-select: none;
+`;
+
+const StyledLogoAndNameContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+type StyledLogoProps = {
+  logo?: string | null;
+};
+
+const StyledLogo = styled.div<StyledLogoProps>`
+  background: url(${(props) => props.logo});
+  background-position: center;
+  background-size: cover;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  height: 16px;
+  width: 16px;
+`;
+
+const StyledName = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-family: 'Inter';
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+type NavWorkspaceButtonProps = {
+  showCollapseButton: boolean;
+};
+
+const NavWorkspaceButton = ({
+  showCollapseButton,
+}: NavWorkspaceButtonProps) => {
+  const currentUser = useRecoilValue(currentUserState);
+
+  const currentWorkspace = currentUser?.workspaceMember?.workspace;
+  const DEFAULT_LOGO =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
+
+  return (
+    <StyledContainer>
+      <StyledLogoAndNameContainer>
+        <StyledLogo
+          logo={
+            currentWorkspace?.logo
+              ? getImageAbsoluteURIOrBase64(currentWorkspace.logo)
+              : DEFAULT_LOGO
+          }
+        ></StyledLogo>
+        <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
+      </StyledLogoAndNameContainer>
+      <NavCollapseButton direction="left" show={showCollapseButton} />
+    </StyledContainer>
+  );
+};
+
+export default NavWorkspaceButton;

front/src/modules/ui/navigation/navbar/components/NavbarAnimatedContainer.tsx

@@ -0,0 +1,62 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { useIsSubMenuNavbarDisplayed } from '@/ui/layout/hooks/useIsSubMenuNavbarDisplayed';
+import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
+import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { leftNavbarWidth, leftSubMenuNavbarWidth } from '../constants';
+
+const StyledNavbarContainer = styled(motion.div)`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+type NavbarAnimatedContainerProps = {
+  children: React.ReactNode;
+};
+
+export const NavbarAnimatedContainer = ({
+  children,
+}: NavbarAnimatedContainerProps) => {
+  const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
+  const [, setIsNavbarSwitchingSize] = useRecoilState(
+    isNavbarSwitchingSizeState,
+  );
+  const isInSubMenu = useIsSubMenuNavbarDisplayed();
+  const theme = useTheme();
+
+  const isMobile = useIsMobile();
+
+  const leftBarWidth = isInSubMenu
+    ? isMobile
+      ? leftSubMenuNavbarWidth.mobile
+      : leftSubMenuNavbarWidth.desktop
+    : isMobile
+    ? leftNavbarWidth.mobile
+    : leftNavbarWidth.desktop;
+
+  return (
+    <StyledNavbarContainer
+      onAnimationComplete={() => {
+        setIsNavbarSwitchingSize(false);
+      }}
+      animate={{
+        width: isNavbarOpened ? leftBarWidth : '0',
+        opacity: isNavbarOpened ? 1 : 0,
+      }}
+      transition={{
+        duration: theme.animation.duration.normal,
+      }}
+    >
+      {children}
+    </StyledNavbarContainer>
+  );
+};

front/src/modules/ui/navigation/navbar/components/SubMenuNavbar.tsx

@@ -0,0 +1,80 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconBrandGithub } from '@/ui/display/icon';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import packageJson from '../../../../../../package.json';
+import { githubLink, leftNavbarWidth } from '../constants';
+
+import NavBackButton from './NavBackButton';
+import NavItemsContainer from './NavItemsContainer';
+
+type SubMenuNavbarProps = {
+  children: React.ReactNode;
+  backButtonTitle: string;
+  displayVersion?: boolean;
+};
+
+const StyledVersionContainer = styled.div`
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledVersion = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  :hover {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledVersionLink = styled.a`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  text-decoration: none;
+  :hover {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  padding-top: ${({ theme }) => theme.spacing(9)};
+  width: ${() => (useIsMobile() ? '100%' : leftNavbarWidth.desktop)};
+`;
+
+const SubMenuNavbar = ({
+  children,
+  backButtonTitle,
+  displayVersion,
+}: SubMenuNavbarProps) => {
+  const version = packageJson.version;
+
+  const theme = useTheme();
+
+  return (
+    <StyledContainer>
+      <div>
+        <NavBackButton title={backButtonTitle} />
+        <NavItemsContainer>{children}</NavItemsContainer>
+      </div>
+      {displayVersion && (
+        <StyledVersionContainer>
+          <StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
+            <IconBrandGithub size={theme.icon.size.md} />
+            <StyledVersion>{version}</StyledVersion>
+          </StyledVersionLink>
+        </StyledVersionContainer>
+      )}
+    </StyledContainer>
+  );
+};
+
+export default SubMenuNavbar;

front/src/modules/ui/navigation/navbar/components/SupportChat.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { supportChatState } from '@/client-config/states/supportChatState';
+import { IconHelpCircle } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
+import { User } from '~/generated/graphql';
+
+const StyledButtonContainer = styled.div`
+  display: flex;
+`;
+
+const insertScript = ({
+  src,
+  innerHTML,
+  onLoad,
+}: {
+  src?: string;
+  innerHTML?: string;
+  onLoad?: (...args: any[]) => void;
+}) => {
+  const script = document.createElement('script');
+  if (src) script.src = src;
+  if (innerHTML) script.innerHTML = innerHTML;
+  if (onLoad) script.onload = onLoad;
+  document.body.appendChild(script);
+};
+
+const SupportChat = () => {
+  const currentUser = useRecoilValue(currentUserState);
+  const supportChat = useRecoilValue(supportChatState);
+  const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
+
+  const configureFront = useCallback(
+    (
+      chatId: string,
+      currentUser: Pick<User, 'email' | 'displayName' | 'supportUserHash'>,
+    ) => {
+      const url = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
+      const script = document.querySelector(`script[src="${url}"]`);
+
+      if (!script) {
+        insertScript({
+          src: url,
+          onLoad: () => {
+            window.FrontChat?.('init', {
+              chatId,
+              useDefaultLauncher: false,
+              email: currentUser.email,
+              name: currentUser.displayName,
+              userHash: currentUser?.supportUserHash,
+            });
+            setIsFrontChatLoaded(true);
+          },
+        });
+      }
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (
+      supportChat?.supportDriver === 'front' &&
+      supportChat.supportFrontChatId &&
+      currentUser?.email &&
+      !isFrontChatLoaded
+    ) {
+      configureFront(supportChat.supportFrontChatId, currentUser);
+    }
+  }, [
+    configureFront,
+    currentUser,
+    isFrontChatLoaded,
+    supportChat?.supportDriver,
+    supportChat.supportFrontChatId,
+  ]);
+
+  return isFrontChatLoaded ? (
+    <StyledButtonContainer>
+      <Button
+        variant={'tertiary'}
+        size={'small'}
+        title="Support"
+        Icon={IconHelpCircle}
+        onClick={() => window.FrontChat?.('show')}
+      />
+    </StyledButtonContainer>
+  ) : null;
+};
+
+export default SupportChat;

front/src/modules/ui/navigation/navbar/components/__stories__/MainNavbar.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Favorites } from '@/favorites/components/Favorites';
+import {
+  IconBell,
+  IconBuildingSkyscraper,
+  IconCheckbox,
+  IconSearch,
+  IconSettings,
+  IconTargetArrow,
+  IconUser,
+} from '@/ui/display/icon';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import MainNavbar from '../MainNavbar';
+import NavItem from '../NavItem';
+import NavTitle from '../NavTitle';
+
+const meta: Meta<typeof MainNavbar> = {
+  title: 'UI/Navbar/MainNavbar',
+  component: MainNavbar,
+};
+
+export default meta;
+type Story = StoryObj<typeof MainNavbar>;
+
+const navItems = (
+  <>
+    <NavItem label="Search" Icon={IconSearch} />
+    <NavItem label="Notifications" to="/inbox" Icon={IconBell} soon={true} />
+    <NavItem label="Settings" to="/settings/profile" Icon={IconSettings} />
+    <NavItem label="Tasks" to="/tasks" Icon={IconCheckbox} count={2} />
+    <Favorites />
+    <NavTitle label="Workspace" />
+    <NavItem label="Companies" to="/companies" Icon={IconBuildingSkyscraper} />
+    <NavItem label="People" to="/people" Icon={IconUser} />
+    <NavItem label="Opportunities" Icon={IconTargetArrow} />
+  </>
+);
+
+export const Default: Story = {
+  args: { children: navItems },
+  argTypes: { children: { control: false } },
+  decorators: [ComponentWithRouterDecorator],
+};

front/src/modules/ui/navigation/navbar/components/__stories__/NavCollapseButton.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import NavCollapseButton from '../NavCollapseButton';
+
+const meta: Meta<typeof NavCollapseButton> = {
+  title: 'UI/Navbar/NavCollapseButton',
+  component: NavCollapseButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof NavCollapseButton>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};
+
+export const Hidden: Story = {
+  args: { show: false },
+  decorators: [ComponentDecorator],
+};

front/src/modules/ui/navigation/navbar/components/__stories__/NavItem.stories.tsx

@@ -0,0 +1,95 @@
+import styled from '@emotion/styled';
+import { Decorator, Meta, StoryObj } from '@storybook/react';
+
+import { IconSearch, IconSettings } from '@/ui/display/icon';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { CatalogStory } from '~/testing/types';
+
+import NavItem from '../NavItem';
+
+const meta: Meta<typeof NavItem> = {
+  title: 'UI/Navbar/NavItem',
+  component: NavItem,
+};
+
+const StyledNavItemContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+`;
+
+const ComponentDecorator: Decorator = (Story) => (
+  <StyledNavItemContainer>
+    <Story />
+  </StyledNavItemContainer>
+);
+
+export default meta;
+type Story = StoryObj<typeof NavItem>;
+
+export const Default: Story = {
+  args: {
+    label: 'Search',
+    Icon: IconSearch,
+    onClick: () => console.log('clicked'),
+    active: true,
+  },
+  argTypes: { Icon: { control: false }, onClick: { control: false } },
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+};
+
+export const Catalog: CatalogStory<Story, typeof NavItem> = {
+  args: Default.args,
+  decorators: [
+    ComponentDecorator,
+    CatalogDecorator,
+    ComponentWithRouterDecorator,
+  ],
+  parameters: {
+    pseudo: { hover: ['button:has(svg.tabler-icon-settings)'] },
+    catalog: {
+      dimensions: [
+        {
+          name: 'active',
+          values: [true, false],
+          props: (active: boolean) => ({ active }),
+          labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
+        },
+        {
+          name: 'danger',
+          values: [true, false],
+          props: (danger: boolean) => ({ danger }),
+          labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
+        },
+        {
+          name: 'states',
+          values: ['Default', 'Hover'],
+          props: (state: string) =>
+            state === 'Default'
+              ? {}
+              : { label: 'Settings', Icon: IconSettings },
+        },
+      ],
+    },
+  },
+};
+
+export const Soon: Story = {
+  args: {
+    ...Default.args,
+    active: false,
+    soon: true,
+  },
+  argTypes: { Icon: { control: false }, onClick: { control: false } },
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+};
+
+export const Count: Story = {
+  args: {
+    ...Default.args,
+    count: 3,
+  },
+  argTypes: { Icon: { control: false }, onClick: { control: false } },
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+};

front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  IconColorSwatch,
+  IconLogout,
+  IconSettings,
+  IconUserCircle,
+  IconUsers,
+} from '@/ui/display/icon';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import NavItem from '../NavItem';
+import NavTitle from '../NavTitle';
+import SubMenuNavbar from '../SubMenuNavbar';
+
+const meta: Meta<typeof SubMenuNavbar> = {
+  title: 'UI/Navbar/SubMenuNavbar',
+  component: SubMenuNavbar,
+};
+
+export default meta;
+type Story = StoryObj<typeof SubMenuNavbar>;
+
+const navItems = (
+  <>
+    <NavTitle label="User" />
+    <NavItem
+      label="Profile"
+      to="/settings/profile"
+      Icon={IconUserCircle}
+      active
+    />
+    <NavItem
+      label="Experience"
+      to="/settings/profile/experience"
+      Icon={IconColorSwatch}
+    />
+    <NavTitle label="Workspace" />
+    <NavItem label="General" to="/settings/workspace" Icon={IconSettings} />
+    <NavItem
+      label="Members"
+      to="/settings/workspace-members"
+      Icon={IconUsers}
+    />
+    <NavTitle label="Other" />
+
+    <NavItem label="Logout" Icon={IconLogout} />
+  </>
+);
+
+export const Default: Story = {
+  args: { children: navItems, backButtonTitle: 'Back' },
+  argTypes: { children: { control: false } },
+  decorators: [ComponentWithRouterDecorator],
+};

front/src/modules/ui/navigation/navbar/constants/index.ts

@@ -0,0 +1,11 @@
+export const leftNavbarWidth = {
+  mobile: 'calc(100% - 16px)',
+  desktop: '220px',
+};
+
+export const leftSubMenuNavbarWidth = {
+  mobile: 'calc(100% - 16px)',
+  desktop: '520px',
+};
+
+export const githubLink = 'https://github.com/twentyhq/twenty';