From c67d3ee2f102155e2e9781e13d5d33c1ab227cb4 Mon Sep 17 00:00:00 2001
From: Sabir Hassan <sabirbk06@gmail.com>
Date: Fri, 5 Aug 2022 01:10:15 +0500
Subject: [PATCH] fix: improve mobile view for studio page

---
 .../Settings/addPermissionModal.tsx           |  1 +
 web/src/containers/Studio/editor.tsx          | 13 +--
 web/src/containers/Studio/sideBar.tsx         | 87 ++++++++++++++++---
 3 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/web/src/containers/Settings/addPermissionModal.tsx b/web/src/containers/Settings/addPermissionModal.tsx
index f1d7ffa..945ed46 100644
--- a/web/src/containers/Settings/addPermissionModal.tsx
+++ b/web/src/containers/Settings/addPermissionModal.tsx
@@ -147,6 +147,7 @@ const AddPermissionModal = ({
           <Grid item xs={12}>
             <Autocomplete
               multiple
+              disableClearable
               options={paths}
               filterSelectedOptions
               value={selectedPaths}
diff --git a/web/src/containers/Studio/editor.tsx b/web/src/containers/Studio/editor.tsx
index cc8f76e..f0ba49a 100644
--- a/web/src/containers/Studio/editor.tsx
+++ b/web/src/containers/Studio/editor.tsx
@@ -353,9 +353,7 @@ const SASjsEditor = ({
             sx={{
               borderBottom: 1,
               borderColor: 'divider',
-              position: 'fixed',
-              background: 'white',
-              width: '85%'
+              background: 'white'
             }}
           >
             <TabList onChange={handleTabChange} centered>
@@ -372,10 +370,7 @@ const SASjsEditor = ({
             </TabList>
           </Box>
 
-          <StyledTabPanel
-            sx={{ paddingBottom: 0, marginTop: '45px' }}
-            value="1"
-          >
+          <StyledTabPanel sx={{ paddingBottom: 0 }} value="1">
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <RunMenu
                 fileContent={fileContent}
@@ -442,13 +437,13 @@ const SASjsEditor = ({
             </Paper>
           </StyledTabPanel>
           <StyledTabPanel value="2">
-            <div style={{ marginTop: '50px' }}>
+            <div>
               <h2>SAS Log</h2>
               <pre>{log}</pre>
             </div>
           </StyledTabPanel>
           <StyledTabPanel value="3">
-            <div style={{ marginTop: '50px' }}>
+            <div>
               <pre>{webout}</pre>
             </div>
           </StyledTabPanel>
diff --git a/web/src/containers/Studio/sideBar.tsx b/web/src/containers/Studio/sideBar.tsx
index 65af0bc..3c0f639 100644
--- a/web/src/containers/Studio/sideBar.tsx
+++ b/web/src/containers/Studio/sideBar.tsx
@@ -1,6 +1,15 @@
 import React, { useState, useMemo } from 'react'
 import axios from 'axios'
-import { Backdrop, Box, CircularProgress, Drawer, Toolbar } from '@mui/material'
+import {
+  Backdrop,
+  Box,
+  Paper,
+  CircularProgress,
+  Drawer,
+  Toolbar,
+  IconButton
+} from '@mui/material'
+import { FolderOpen } from '@mui/icons-material'
 
 import TreeView from '../../components/tree'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
@@ -33,6 +42,12 @@ const SideBar = ({
   const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
     AlertSeverityType.Success
   )
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen)
+  }
+
   const defaultExpanded = useMemo(() => {
     const splittedPath = selectedFilePath.split('/')
     const arr = ['']
@@ -147,15 +162,8 @@ const SideBar = ({
       .finally(() => setIsLoading(false))
   }
 
-  return (
-    <Drawer
-      variant="permanent"
-      sx={{
-        width: drawerWidth,
-        flexShrink: 0,
-        [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' }
-      }}
-    >
+  const drawer = (
+    <div>
       <Backdrop
         sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
         open={isLoading}
@@ -189,7 +197,64 @@ const SideBar = ({
         title={modalTitle}
         payload={modalPayload}
       />
-    </Drawer>
+    </div>
+  )
+
+  return (
+    <>
+      <Box
+        component={Paper}
+        sx={{
+          margin: '5px',
+          paddingTop: '45px',
+          display: 'flex',
+          alignItems: 'flex-start'
+        }}
+      >
+        <IconButton
+          color="inherit"
+          size="large"
+          aria-label="open drawer"
+          edge="start"
+          onClick={handleDrawerToggle}
+          sx={{ left: '5px', display: { md: 'none' } }}
+        >
+          <FolderOpen />
+        </IconButton>
+      </Box>
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={handleDrawerToggle}
+        ModalProps={{
+          keepMounted: true // Better open performance on mobile.
+        }}
+        sx={{
+          display: { xs: 'block', md: 'none' },
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: {
+            width: 240,
+            boxSizing: 'border-box'
+          }
+        }}
+      >
+        {drawer}
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: 'none', md: 'block' },
+          width: drawerWidth,
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: {
+            width: drawerWidth,
+            boxSizing: 'border-box'
+          }
+        }}
+      >
+        {drawer}
+      </Drawer>
+    </>
   )
 }