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/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 && (