fix: Make sidebar panel collapsible in Insight editor

ExpediaGroup · Apr 4, 2022 · ecc83c7 · ecc83c7
1 parent 77b2cd1
commit ecc83c7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/...ges/frontend/src/pages/insight-editor/components/insight-editor-sidebar/sidebar-files.tsx b/...ges/frontend/src/pages/insight-editor/components/insight-editor-sidebar/sidebar-files.tsx
@@ -178,22 +178,33 @@ export const SidebarFiles = ({
 
   const isMobile = useBreakpointValue({ base: true, md: false });
 
-  const { isOpen: mobileFilesOpen, onToggle: onFilesToggle } = useDisclosure({ defaultIsOpen: false });
+  const { isOpen: isFilesOpen, onToggle: onFilesToggle } = useDisclosure({ defaultIsOpen: false });
+
+  const iconOption = useBreakpointValue({
+    base: isFilesOpen ? iconFactoryAs('chevronUp') : iconFactoryAs('chevronDown'),
+    md: isFilesOpen ? iconFactoryAs('chevronRight') : iconFactoryAs('folderOpened')
+  });
 
   return (
-    <Flex direction="column" align="stretch" {...flexProps}>
+    <Flex
+      direction="column"
+      align="stretch"
+      flexBasis={{ base: 'unset', md: '20rem', xl: '22rem' }}
+      maxW={{ base: 'unset', md: '20rem', xl: '26rem' }}
+      {...flexProps}
+    >
       <HStack spacing="space-between" onClick={onFilesToggle} align="center">
         <IconButton
           size="sm"
-          display={{ base: 'flex', sm: 'none' }}
+          display={{ base: 'flex', sm: 'flex' }}
           aria-label={'Expand/collapse'}
           variant="ghost"
-          icon={mobileFilesOpen ? iconFactoryAs('chevronUp') : iconFactoryAs('chevronDown')}
-          title={mobileFilesOpen ? 'Collapse the files section' : 'Expand the files section'}
+          icon={iconOption}
+          title={isFilesOpen ? 'Collapse the files section' : 'Expand the files section'}
         />
-        <SidebarHeading p="0.5rem">Files</SidebarHeading>
+        {(isFilesOpen || isMobile) && <SidebarHeading p="0.5rem">Files</SidebarHeading>}
       </HStack>
-      <Collapse in={!isMobile || mobileFilesOpen} animateOpacity>
+      <Collapse in={isFilesOpen || (!isMobile && isFilesOpen)} animateOpacity>
         <FileBrowser
           mt="-2rem"
           mb="1rem"

diff --git a/packages/frontend/src/pages/insight-editor/insight-editor.tsx b/packages/frontend/src/pages/insight-editor/insight-editor.tsx
@@ -368,13 +368,11 @@ export const InsightEditor = memo(
             form={form}
             fileTree={fileTree}
             onFileTreeChanged={fileTreeChange}
-            flexBasis={{ base: 'unset', md: '20rem', xl: '22rem' }}
             flexShrink={0}
-            maxW={{ base: 'unset', md: '20rem', xl: '26rem' }}
             minW={0}
             borderBottomWidth="1px"
             borderLeftWidth="1px"
-            borderRightWidth="1px"
+            borderRightWidth={{ base: '1px', md: '0px' }}
             borderBottomLeftRadius={{ base: 'none', md: 'lg' }}
             onSelectFile={(file) => {
               setSelectedFileId(file?.id);

diff --git a/packages/frontend/src/shared/icon-factory.tsx b/packages/frontend/src/shared/icon-factory.tsx
@@ -92,6 +92,7 @@ import {
   VscDebugDisconnect,
   VscError,
   VscFeedback,
+  VscFolderOpened,
   VscJson,
   VscListTree,
   VscMail,
@@ -132,6 +133,7 @@ const icons = {
   edit: AiFillEdit,
   email: VscMail,
   filter: FaFilter,
+  folderOpened: VscFolderOpened,
   github: GoMarkGithub,
   graphql: GrGraphQl,
   heart: FaRegHeart,