Expand on right drawer (#769)

Ok

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

@@ -8,7 +8,7 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  width: 220px;
+  width: ${({ theme }) => theme.leftNavBarWidth};
 `;
 
 export default function MainNavbar({ children }: OwnProps) {

front/src/modules/ui/right-drawer/components/RightDrawer.tsx

@@ -12,6 +12,8 @@ import {
 import { isDefined } from '~/utils/isDefined';
 
 import { useScopedHotkeys } from '../../hotkey/hooks/useScopedHotkeys';
+import { useRightDrawer } from '../hooks/useRightDrawer';
+import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';
@@ -41,23 +43,39 @@ export function RightDrawer() {
     isRightDrawerOpenState,
   );
 
+  const [isRightDrawerExpanded] = useRecoilState(isRightDrawerExpandedState);
+
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
 
+  const { closeRightDrawer } = useRightDrawer();
+
   const rightDrawerRef = useRef(null);
+
   useListenClickOutsideArrayOfRef({
     refs: [rightDrawerRef],
-    callback: () => setIsRightDrawerOpen(false),
+    callback: () => closeRightDrawer(),
     mode: ClickOutsideMode.absolute,
   });
+
   const theme = useTheme();
 
   useScopedHotkeys(
     [Key.Escape],
-    () => setIsRightDrawerOpen(false),
+    () => closeRightDrawer(),
     RightDrawerHotkeyScope.RightDrawer,
     [setIsRightDrawerOpen],
   );
 
+  const rightDrawerWidthExpanded = `calc(100% - ${
+    theme.leftNavBarWidth
+  } - ${theme.spacing(2)})`;
+
+  const rightDrawerWidth = isRightDrawerOpen
+    ? isRightDrawerExpanded
+      ? rightDrawerWidthExpanded
+      : theme.rightDrawerWidth
+    : '0';
+
   if (!isDefined(rightDrawerPage)) {
     return <></>;
   }
@@ -65,7 +83,7 @@ export function RightDrawer() {
   return (
     <StyledContainer
       animate={{
-        width: isRightDrawerOpen ? theme.rightDrawerWidth : '0',
+        width: rightDrawerWidth,
       }}
       transition={{
         duration: theme.animation.duration.normal,

front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
+import { RightDrawerTopBarExpandButton } from './RightDrawerTopBarExpandButton';
 
 const StyledRightDrawerTopBar = styled.div`
   align-items: center;
@@ -10,20 +11,19 @@ const StyledRightDrawerTopBar = styled.div`
   display: flex;
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
+  gap: ${({ theme }) => theme.spacing(1)};
   height: 56px;
-  justify-content: space-between;
-  padding-left: 8px;
-  padding-right: 8px;
+  justify-content: flex-start;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+
+  padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = {
-  title?: string | null | undefined;
-};
-
-export function RightDrawerTopBar({ title }: OwnProps) {
+export function RightDrawerTopBar() {
   return (
     <StyledRightDrawerTopBar>
       <RightDrawerTopBarCloseButton />
+      <RightDrawerTopBarExpandButton />
     </StyledRightDrawerTopBar>
   );
 }

front/src/modules/ui/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -1,42 +1,19 @@
-import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
-
 import { IconChevronsRight } from '@/ui/icon/index';
 
-import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
-
-const StyledButton = styled.button`
-  align-items: center;
-  background: none;
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  height: 24px;
-  padding: 3px;
-
-  transition: ${({ theme }) => theme.clickableElementBackgroundTransition};
-
-  width: 24px;
-  &:hover {
-    background: ${({ theme }) => theme.background.transparent.light};
-  }
-  svg {
-    color: ${({ theme }) => theme.font.color.tertiary};
-  }
-`;
+import { IconButton } from '../../button/components/IconButton';
+import { useRightDrawer } from '../hooks/useRightDrawer';
 
 export function RightDrawerTopBarCloseButton() {
-  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+  const { closeRightDrawer } = useRightDrawer();
 
   function handleButtonClick() {
-    setIsRightDrawerOpen(false);
+    closeRightDrawer();
   }
 
   return (
-    <StyledButton onClick={handleButtonClick}>
-      <IconChevronsRight size={16} />
-    </StyledButton>
+    <IconButton
+      icon={<IconChevronsRight size={16} />}
+      onClick={handleButtonClick}
+    />
   );
 }

front/src/modules/ui/right-drawer/components/RightDrawerTopBarExpandButton.tsx

@@ -0,0 +1,31 @@
+import {
+  IconLayoutSidebarRightCollapse,
+  IconLayoutSidebarRightExpand,
+} from '@tabler/icons-react';
+import { useRecoilState } from 'recoil';
+
+import { IconButton } from '../../button/components/IconButton';
+import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
+
+export function RightDrawerTopBarExpandButton() {
+  const [isRightDrawerExpanded, setIsRightDrawerExpanded] = useRecoilState(
+    isRightDrawerExpandedState,
+  );
+
+  function handleButtonClick() {
+    setIsRightDrawerExpanded(!isRightDrawerExpanded);
+  }
+
+  return (
+    <IconButton
+      icon={
+        isRightDrawerExpanded ? (
+          <IconLayoutSidebarRightCollapse size={16} />
+        ) : (
+          <IconLayoutSidebarRightExpand size={16} />
+        )
+      }
+      onClick={handleButtonClick}
+    />
+  );
+}

front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

@@ -22,7 +22,7 @@ type Story = StoryObj<typeof RightDrawerTopBar>;
 export const Default: Story = {
   render: getRenderWrapperForComponent(
     <div style={{ width: '500px' }}>
-      <RightDrawerTopBar title={'Title'} />
+      <RightDrawerTopBar />
     </div>,
   ),
   parameters: {

front/src/modules/ui/right-drawer/hooks/useRightDrawer.ts

@@ -1,15 +1,31 @@
 import { useRecoilState } from 'recoil';
 
+import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
 
-export function useOpenRightDrawer() {
+export function useRightDrawer() {
   const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+  const [, setIsRightDrawerExpanded] = useRecoilState(
+    isRightDrawerExpandedState,
+  );
+
   const [, setRightDrawerPage] = useRecoilState(rightDrawerPageState);
 
-  return function openRightDrawer(rightDrawerPage: RightDrawerPages) {
+  function openRightDrawer(rightDrawerPage: RightDrawerPages) {
     setRightDrawerPage(rightDrawerPage);
+    setIsRightDrawerExpanded(false);
     setIsRightDrawerOpen(true);
+  }
+
+  function closeRightDrawer() {
+    setIsRightDrawerExpanded(false);
+    setIsRightDrawerOpen(false);
+  }
+
+  return {
+    openRightDrawer,
+    closeRightDrawer,
   };
 }

front/src/modules/ui/right-drawer/states/isRightDrawerExpandedState.ts

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

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

@@ -35,6 +35,7 @@ const common = {
     checkboxColumnWidth: '32px',
   },
   rightDrawerWidth: '500px',
+  leftNavBarWidth: '220px',
   clickableElementBackgroundTransition: 'background 0.1s ease',
   lastLayerZIndex: 2147483647,
 };