Make the sidebar collapsable (#260)

* Make the sidebar collapsable

* Fix padding

* Automatically collapase sidebar and hide container on mobile

* Hide navbar content when navbar is collapsed

* Update naming convention for states

front/src/modules/auth/states/currentUserState.ts

@@ -3,6 +3,6 @@ import { atom } from 'recoil';
 import { User } from '@/users/interfaces/user.interface';
 
 export const currentUserState = atom<User | null>({
-  key: 'auth/current-user',
+  key: 'currentUserState',
   default: null,
 });

front/src/modules/auth/states/isAuthenticatedState.ts

@@ -3,7 +3,7 @@ import { selector } from 'recoil';
 import { currentUserState } from './currentUserState';
 
 export const isAuthenticatedState = selector<boolean>({
-  key: 'auth/is-authenticated',
+  key: 'isAuthenticatedState',
   get: ({ get }) => {
     const user = get(currentUserState);
     return !!user;

front/src/modules/auth/states/isAuthenticatingState.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
 export const isAuthenticatingState = atom<boolean>({
-  key: 'auth/is-authenticating',
+  key: 'isAuthenticatingState',
   default: true,
 });

front/src/modules/ui/icons/components/IconSidebarLeftCollapse.tsx

@@ -0,0 +1 @@
+export { TbLayoutSidebarLeftCollapse as IconSidebarLeftCollapse } from 'react-icons/tb';

front/src/modules/ui/icons/components/IconSidebarRightCollapse.tsx

@@ -0,0 +1 @@
+export { TbLayoutSidebarRightCollapse as IconSidebarRightCollapse } from 'react-icons/tb';

front/src/modules/ui/icons/index.ts

@@ -1,3 +1,5 @@
 export { IconAddressBook } from './components/IconAddressBook';
 export { IconComment } from './components/IconComment';
+export { IconSidebarLeftCollapse } from './components/IconSidebarLeftCollapse';
+export { IconSidebarRightCollapse } from './components/IconSidebarRightCollapse';
 export { IconAward } from '@tabler/icons-react';

front/src/modules/ui/layout/AppLayout.tsx

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { CommandMenu } from '@/search/components/CommandMenu';
 
 import { Navbar } from './navbar/Navbar';
+import { isNavbarOpenedState } from './states/isNavbarOpenedState';
+import { MOBILE_VIEWPORT } from './styles/themes';
 
 const StyledLayout = styled.div`
   display: flex;
@@ -18,9 +20,17 @@ const StyledLayout = styled.div`
 const NAVBAR_WIDTH = '236px';
 
 const MainContainer = styled.div`
+  overflow: hidden;
   display: flex;
   flex-direction: row;
-  width: calc(100% - ${NAVBAR_WIDTH});
+  width: ${() =>
+    useRecoilValue(isNavbarOpenedState)
+      ? `(calc(100% -  ${NAVBAR_WIDTH})`
+      : '100%'};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
+  }
 `;
 
 type OwnProps = {

front/src/modules/ui/layout/navbar/NavItem.tsx

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { MOBILE_VIEWPORT } from '../styles/themes';
+
 type OwnProps = {
   label: string;
   to: string;
@@ -33,6 +35,10 @@ const StyledItem = styled.button<StyledItemProps>`
     color: ${(props) => props.theme.text100};
   }
   margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    font-size: ${(props) => props.theme.fontSizeLarge};
+  }
 `;
 
 const StyledItemLabel = styled.div`

front/src/modules/ui/layout/navbar/Navbar.tsx

@@ -1,17 +1,31 @@
 import { TbBuilding, TbUser } from 'react-icons/tb';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
+import { MOBILE_VIEWPORT } from '../styles/themes';
 
 import NavItem from './NavItem';
 import NavTitle from './NavTitle';
 import WorkspaceContainer from './WorkspaceContainer';
 
+const NavbarContent = styled.div`
+  display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
+`;
+
 const NavbarContainer = styled.div`
-  display: flex;
   flex-direction: column;
-  width: 220px;
+  width: ${() => (useRecoilValue(isNavbarOpenedState) ? '220px' : '0')};
   padding: ${(props) => props.theme.spacing(2)};
   flex-shrink: 0;
+  overflow: hidden;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: ${(props) =>
+      useRecoilValue(isNavbarOpenedState)
+        ? `calc(100% - ` + props.theme.spacing(4) + `)`
+        : '0'};
 `;
 
 const NavItemsContainer = styled.div`
@@ -24,32 +38,34 @@ export function Navbar() {
   return (
     <>
       <NavbarContainer>
-        <WorkspaceContainer />
+        <NavbarContent>
-        <NavItemsContainer>
+          <WorkspaceContainer />
-          <NavTitle label="Workspace" />
+          <NavItemsContainer>
-          <NavItem
+            <NavTitle label="Workspace" />
-            label="People"
+            <NavItem
-            to="/people"
+              label="People"
-            icon={<TbUser size={16} />}
+              to="/people"
-            active={
+              icon={<TbUser size={16} />}
-              !!useMatch({
+              active={
-                path: useResolvedPath('/people').pathname,
+                !!useMatch({
-                end: true,
+                  path: useResolvedPath('/people').pathname,
-              })
+                  end: true,
-            }
+                })
-          />
+              }
-          <NavItem
+            />
-            label="Companies"
+            <NavItem
-            to="/companies"
+              label="Companies"
-            icon={<TbBuilding size={16} />}
+              to="/companies"
-            active={
+              icon={<TbBuilding size={16} />}
-              !!useMatch({
+              active={
-                path: useResolvedPath('/companies').pathname,
+                !!useMatch({
-                end: true,
+                  path: useResolvedPath('/companies').pathname,
-              })
+                  end: true,
-            }
+                })
-          />
+              }
-        </NavItemsContainer>
+            />
+          </NavItemsContainer>
+        </NavbarContent>
       </NavbarContainer>
     </>
   );

front/src/modules/ui/layout/navbar/WorkspaceContainer.tsx

@@ -1,19 +1,30 @@
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { IconSidebarLeftCollapse } from '@/ui/icons';
 
-const StyledContainer = styled.button`
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
-  display: inline-flex;
+
+const StyledContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
   height: 34px;
   align-items: center;
-  cursor: pointer;
   user-select: none;
   border: 0;
   background: inherit;
   padding: ${(props) => props.theme.spacing(2)};
+  padding-top: ${(props) => props.theme.spacing(1)};
   margin-left: ${(props) => props.theme.spacing(1)};
   align-self: flex-start;
+  width: 100%;
+`;
+
+const LogoAndNameContainer = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 `;
 
 type StyledLogoProps = {
@@ -36,8 +47,27 @@ const StyledName = styled.div`
   color: ${(props) => props.theme.text80};
 `;
 
+const CollapseButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+
+  user-select: none;
+  border: 0;
+  background: inherit;
+
+  padding: 0;
+  cursor: pointer;
+
+  color: ${(props) => props.theme.text30};
+`;
+
 function WorkspaceContainer() {
   const currentUser = useRecoilValue(currentUserState);
+  const [isNavOpen, setIsNavOpen] = useRecoilState(isNavbarOpenedState);
 
   const currentWorkspace = currentUser?.workspaceMember?.workspace;
 
@@ -47,8 +77,15 @@ function WorkspaceContainer() {
 
   return (
     <StyledContainer>
-      <StyledLogo logo={currentWorkspace?.logo}></StyledLogo>
+      <LogoAndNameContainer>
-      <StyledName>{currentWorkspace?.displayName}</StyledName>
+        <StyledLogo logo={currentWorkspace?.logo}></StyledLogo>
+        <StyledName>{currentWorkspace?.displayName}</StyledName>
+      </LogoAndNameContainer>
+      {isNavOpen && (
+        <CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+          <IconSidebarLeftCollapse size={16} />
+        </CollapseButton>
+      )}
     </StyledContainer>
   );
 }

front/src/modules/ui/layout/states/isNavbarOpenedState.ts

@@ -0,0 +1,10 @@
+import { atom } from 'recoil';
+
+import { MOBILE_VIEWPORT } from '../styles/themes';
+
+const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
+
+export const isNavbarOpenedState = atom({
+  key: 'ui/isNavbarOpenedState',
+  default: !isMobile,
+});

front/src/modules/ui/layout/states/isThemeEnabledState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isThemeEnabledState = atom<boolean>({
+  key: 'isThemeEnabledState',
+  default: true,
+});

front/src/modules/ui/layout/states/themeEnabledState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const themeEnabledState = atom<boolean>({
-  key: 'ui/theme-enabled',
-  default: true,
-});

front/src/modules/ui/layout/styles/themes.ts

@@ -139,4 +139,6 @@ export const textInputStyle = (props: any) =>
 export const lightTheme = { ...commonTheme, ...lightThemeSpecific };
 export const darkTheme = { ...commonTheme, ...darkThemeSpecific };
 
+export const MOBILE_VIEWPORT = 768;
+
 export type ThemeType = typeof lightTheme;

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

@@ -1,6 +1,11 @@
 import { ReactNode } from 'react';
 import { TbPlus } from 'react-icons/tb';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { IconSidebarRightCollapse } from '@/ui/icons';
+
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 
 export const TOP_BAR_MIN_HEIGHT = '40px';
 
@@ -39,6 +44,24 @@ const AddButtonContainer = styled.div`
   margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
+const CollapseButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+
+  user-select: none;
+  border: 0;
+  background: inherit;
+
+  padding: 0;
+  cursor: pointer;
+
+  color: ${(props) => props.theme.text30};
+`;
+
 type OwnProps = {
   title: string;
   icon: ReactNode;
@@ -46,9 +69,16 @@ type OwnProps = {
 };
 
 export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
+  const [isNavOpen, setIsNavOpen] = useRecoilState(isNavbarOpenedState);
+
   return (
     <>
       <TopBarContainer>
+        {!isNavOpen && (
+          <CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+            <IconSidebarRightCollapse size={16} />
+          </CollapseButton>
+        )}
         {icon}
         <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
         {onAddButtonClick && (

front/src/modules/ui/tables/states/isSomeInputInEditModeState.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
 export const isSomeInputInEditModeState = atom<boolean>({
-  key: 'ui/table/is-in-edit-mode',
+  key: 'isSomeInputInEditModeState',
   default: false,
 });

front/src/modules/ui/tables/states/rowSelectionState.ts

@@ -2,6 +2,6 @@ import { RowSelectionState } from '@tanstack/react-table';
 import { atom } from 'recoil';
 
 export const currentRowSelectionState = atom<RowSelectionState>({
-  key: 'ui/table-row-selection-state',
+  key: 'currentRowSelectionState',
   default: {},
 });

front/src/modules/ui/tables/states/selectedRowIdsState.ts

@@ -3,7 +3,7 @@ import { selector } from 'recoil';
 import { currentRowSelectionState } from './rowSelectionState';
 
 export const selectedRowIdsState = selector<string[]>({
-  key: 'ui/table-selected-row-ids',
+  key: 'selectedRowIdsState',
   get: ({ get }) => {
     const currentRowSelection = get(currentRowSelectionState);