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/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 />
-        <NavItemsContainer>
-          <NavTitle label="Workspace" />
-          <NavItem
-            label="People"
-            to="/people"
-            icon={<TbUser size={16} />}
-            active={
-              !!useMatch({
-                path: useResolvedPath('/people').pathname,
-                end: true,
-              })
-            }
-          />
-          <NavItem
-            label="Companies"
-            to="/companies"
-            icon={<TbBuilding size={16} />}
-            active={
-              !!useMatch({
-                path: useResolvedPath('/companies').pathname,
-                end: true,
-              })
-            }
-          />
-        </NavItemsContainer>
+        <NavbarContent>
+          <WorkspaceContainer />
+          <NavItemsContainer>
+            <NavTitle label="Workspace" />
+            <NavItem
+              label="People"
+              to="/people"
+              icon={<TbUser size={16} />}
+              active={
+                !!useMatch({
+                  path: useResolvedPath('/people').pathname,
+                  end: true,
+                })
+              }
+            />
+            <NavItem
+              label="Companies"
+              to="/companies"
+              icon={<TbBuilding size={16} />}
+              active={
+                !!useMatch({
+                  path: useResolvedPath('/companies').pathname,
+                  end: true,
+                })
+              }
+            />
+          </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`
-  display: inline-flex;
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
+
+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>
-      <StyledName>{currentWorkspace?.displayName}</StyledName>
+      <LogoAndNameContainer>
+        <StyledLogo logo={currentWorkspace?.logo}></StyledLogo>
+        <StyledName>{currentWorkspace?.displayName}</StyledName>
+      </LogoAndNameContainer>
+      {isNavOpen && (
+        <CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+          <IconSidebarLeftCollapse size={16} />
+        </CollapseButton>
+      )}
     </StyledContainer>
   );
 }