mobile view

ui/shared/monaco/CodeEditor.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import type { File, Monaco } from './types';
 
 import useClientRect from 'lib/hooks/useClientRect';
+import useIsMobile from 'lib/hooks/useIsMobile';
 
 import CodeEditorBreadcrumbs from './CodeEditorBreadcrumbs';
 import CodeEditorLoading from './CodeEditorLoading';
@@ -40,7 +41,9 @@ const CodeEditor = ({ data }: Props) => {
   const [ containerRect, containerNodeRef ] = useClientRect<HTMLDivElement>();
 
   const { colorMode } = useColorMode();
-  const editorWidth = containerRect ? containerRect.width - SIDE_BAR_WIDTH : 0;
+  const isMobile = useIsMobile();
+
+  const editorWidth = containerRect ? containerRect.width - (isMobile ? 0 : SIDE_BAR_WIDTH) : 0;
 
   React.useEffect(() => {
     instance?.editor.setTheme(colorMode === 'light' ? 'blockscout-light' : 'blockscout-dark');

ui/shared/monaco/CodeEditorSideBar.tsx

 import type { HTMLChakraProps } from '@chakra-ui/react';
-import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs, useBoolean } from '@chakra-ui/react';
 import _throttle from 'lodash/throttle';
 import React from 'react';
 
@@ -16,9 +16,12 @@ interface Props {
   selectedFile: string;
 }
 
+const CONTAINER_WIDTH = 250;
+
 const CodeEditorSideBar = ({ onFileSelect, data, monaco, selectedFile }: Props) => {
 
   const [ isStuck, setIsStuck ] = React.useState(false);
+  const [ isDrawerOpen, setIsDrawerOpen ] = useBoolean(false);
 
   const themeColors = useThemeColors();
 
@@ -40,42 +43,85 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco, selectedFile }: Props)
     setIsStuck((event.target as HTMLDivElement).scrollTop > 0);
   }, 100));
 
+  const handleFileSelect = React.useCallback((index: number, lineNumber?: number) => {
+    isDrawerOpen && setIsDrawerOpen.off();
+    onFileSelect(index, lineNumber);
+  }, [ isDrawerOpen, onFileSelect, setIsDrawerOpen ]);
+
   return (
-    <Box
-      w="250px"
-      flexShrink={ 0 }
-      bgColor={ themeColors['sideBar.background'] }
-      fontSize="13px"
-      overflowY="scroll"
-      onScroll={ handleScrollThrottled.current }
-      pb="22px"
-    >
-      <Tabs isLazy lazyBehavior="keepMounted" variant="unstyled" size="13px">
-        <TabList
-          columnGap={ 3 }
-          position="sticky"
-          top={ 0 }
-          left={ 0 }
-          bgColor={ themeColors['sideBar.background'] }
-          zIndex="1"
-          px={ 2 }
-          boxShadow={ isStuck ? 'md' : 'none' }
-          borderTopRightRadius="md"
-        >
-          <Tab { ...tabProps }>Explorer</Tab>
-          <Tab { ...tabProps }>Search</Tab>
-        </TabList>
+    <>
+      <Box
+        w={ `${ CONTAINER_WIDTH }px` }
+        flexShrink={ 0 }
+        bgColor={ themeColors['sideBar.background'] }
+        fontSize="13px"
+        overflowY="scroll"
+        onScroll={ handleScrollThrottled.current }
+        position={{ base: 'absolute', lg: 'static' }}
+        right={{ base: isDrawerOpen ? '0' : `-${ CONTAINER_WIDTH }px`, lg: undefined }}
+        top={{ base: 0, lg: undefined }}
+        h="100%"
+        pb="22px"
+        boxShadow={{ base: isDrawerOpen ? 'md' : 'none', lg: 'none' }}
+        zIndex={{ base: '2', lg: undefined }}
+        transitionProperty="right"
+        transitionDuration="normal"
+        transitionTimingFunction="ease-in-out"
+        borderTopRightRadius="md"
+        borderBottomRightRadius="md"
+      >
+        <Tabs isLazy lazyBehavior="keepMounted" variant="unstyled" size="13px">
+          <TabList
+            columnGap={ 3 }
+            position="sticky"
+            top={ 0 }
+            left={ 0 }
+            bgColor={ themeColors['sideBar.background'] }
+            zIndex="1"
+            px={ 2 }
+            boxShadow={ isStuck ? 'md' : 'none' }
+            borderTopRightRadius="md"
+          >
+            <Tab { ...tabProps }>Explorer</Tab>
+            <Tab { ...tabProps }>Search</Tab>
+          </TabList>
 
-        <TabPanels>
-          <TabPanel p={ 0 }>
-            <CodeEditorFileExplorer data={ data } onFileSelect={ onFileSelect } selectedFile={ selectedFile }/>
-          </TabPanel>
-          <TabPanel p={ 0 }>
-            <CodeEditorSearch data={ data } onFileSelect={ onFileSelect } monaco={ monaco } isInputStuck={ isStuck }/>
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </Box>
+          <TabPanels>
+            <TabPanel p={ 0 }>
+              <CodeEditorFileExplorer data={ data } onFileSelect={ handleFileSelect } selectedFile={ selectedFile }/>
+            </TabPanel>
+            <TabPanel p={ 0 }>
+              <CodeEditorSearch data={ data } onFileSelect={ handleFileSelect } monaco={ monaco } isInputStuck={ isStuck }/>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Box>
+      <Box
+        boxSize="24px"
+        p="4px"
+        position="absolute"
+        display={{ base: 'block', lg: 'none' }}
+        right={ isDrawerOpen ? `${ CONTAINER_WIDTH - 1 }px` : '0' }
+        top="calc(50% - 12px)"
+        backgroundColor={ themeColors['sideBar.background'] }
+        borderTopLeftRadius="4px"
+        borderBottomLeftRadius="4px"
+        boxShadow="md"
+        onClick={ setIsDrawerOpen.toggle }
+        zIndex="1"
+        transitionProperty="right"
+        transitionDuration="normal"
+        transitionTimingFunction="ease-in-out"
+        title={ isDrawerOpen ? 'Open sidebar' : 'Close sidebar' }
+        aria-label={ isDrawerOpen ? 'Open sidebar' : 'Close sidebar' }
+      >
+        <Box
+          className="codicon codicon-tree-item-expanded"
+          transform={ isDrawerOpen ? 'rotate(-90deg)' : 'rotate(+90deg)' }
+          boxSize="16px"
+        />
+      </Box>
+    </>
   );
 };
 

ui/shared/monaco/CodeEditorTab.tsx

@@ -67,7 +67,7 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
         onClick={ handleClose }
         borderRadius="sm"
         opacity={ isCloseDisabled ? 0.3 : 1 }
-        visibility={ isActive ? 'visible' : 'hidden' }
+        visibility={{ base: 'visible', lg: isActive ? 'visible' : 'hidden' }}
         color={ themeColors['icon.foreground'] }
         _hover={{ bgColor: isCloseDisabled ? 'transparent' : themeColors['custom.inputOption.hoverBackground'] }}
       />