Create collapse menu for the left menu

Author: congmul

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import './sass/index.scss';
 import LeftMenu from './components/LeftMenu/LeftMenu';
 import Editor from './components/Editor/Editor';
@@ -10,17 +10,27 @@ import petStoreAPISpec from './assets/petstore.apispec.json';
 function App() {
   const [ content, setContent ] = useState<string | undefined>();
   const [ leftMenuCollapse, setLeftMenuCollapse] = useState(false);
+  const rightMenuRef:React.RefObject<HTMLDivElement> = useRef(null);
 
   useEffect(() => {
     // Check IndexedDB to grab API Specification
     // if there is no exsiting spec.
     setContent(JSON.stringify(petStoreAPISpec, null, 2));
   }, [])
+
+  useEffect(() => {
+    if(!rightMenuRef.current) return;
+    if(!leftMenuCollapse){
+        rightMenuRef.current.style.width = "calc(100vw - 350px)";
+    }else{
+      rightMenuRef.current.style.width = "calc(100vw - 65px)";
+    }
+  }, [leftMenuCollapse])
   return (
     <>
       <div className="app-wrapper">
         <LeftMenu setContent={setContent} leftMenuCollapse={leftMenuCollapse} setLeftMenuCollapse={setLeftMenuCollapse} />
-        <div className="editor-page-wrapper">
+        <div className="editor-page-wrapper" ref={rightMenuRef}>
           <ReactSplitPane
             size={'50%'}
           >

src/components/LeftMenu/LeftMenu.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { BsChevronDoubleLeft, BsChevronDoubleRight } from "react-icons/bs";
-import ReadJSONYAMLfile from '../Readfile/Readfile';
+import ReadJSONYAMLfile, { ICONReadJSONYAMLfile } from '../Readfile/Readfile';
 import TooltipComponent from '../Tooltip/Tooltip';
 
 interface LeftMenuTypes{
@@ -9,18 +9,35 @@ interface LeftMenuTypes{
     setLeftMenuCollapse: React.Dispatch<React.SetStateAction<boolean>>
 }
 const LeftMenu:React.FC<LeftMenuTypes> = ({setContent, leftMenuCollapse, setLeftMenuCollapse}) => {
+    const leftMenuRef:React.RefObject<HTMLDivElement> = useRef(null);
+
+    function handleCollapse() {
+        if(!leftMenuRef.current) return;
+        if(!leftMenuCollapse){
+            leftMenuRef.current.style.flex = "0 0 65px";
+            leftMenuRef.current.style.width = "65px";
+        }else{
+            leftMenuRef.current.style.flex = "0 0 349px";
+            leftMenuRef.current.style.width = "349px";        
+        }
+        setLeftMenuCollapse((pre) => !pre);
+    }
     return(
-        <div className="left-menu">
-            <ReadJSONYAMLfile setContent={setContent} />
+        <div className="left-menu" ref={leftMenuRef}>
+            {
+                leftMenuCollapse
+                ?   <ICONReadJSONYAMLfile setContent={setContent} />
+                :   <ReadJSONYAMLfile setContent={setContent} />
+            }
 
             <div className="collapse-handle-icon-wrapper">
               <div className="collapse-handle-icon">
                 {
                     leftMenuCollapse
-                    ?   <TooltipComponent message="Show more information" isButtonStyle={true} onClick={() => setLeftMenuCollapse(false) }>
+                    ?   <TooltipComponent message="Show more information" isButtonStyle={true} onClick={handleCollapse}>
                             <BsChevronDoubleRight className="icon" />
                         </TooltipComponent>
-                    :   <TooltipComponent message="Show less information" isButtonStyle={true} onClick={() => setLeftMenuCollapse(true) } >
+                    :   <TooltipComponent message="Show less information" isButtonStyle={true} onClick={handleCollapse} >
                             <BsChevronDoubleLeft className="icon" />
                         </TooltipComponent>
                 }

src/components/Readfile/Readfile.tsx

@@ -1,14 +1,16 @@
 import React, { useState, useRef } from 'react';
 import { useHandleReadFileStatus } from './ReadfileReducer';
-import { Card, Button } from 'react-bootstrap';
+import { Card, Button, Modal } from 'react-bootstrap';
 import { BsXCircle, BsFileEarmark } from "react-icons/bs";
+import TooltipComponent from '../Tooltip/Tooltip';
 
 interface ReadJSONYAMLfileType {
     isMulipleFiles?: boolean
     setContent: React.Dispatch<React.SetStateAction<string | undefined>>
+    closeModal?: () => void
 }
 
-const ReadJSONYAMLfile:React.FC<ReadJSONYAMLfileType> = ({setContent, isMulipleFiles = false}) => {
+const ReadJSONYAMLfile:React.FC<ReadJSONYAMLfileType> = ({setContent, isMulipleFiles = false, closeModal}) => {
     const readFileBoxRef = useRef<HTMLDivElement>(null);
     const [ fileName, setFileName ] = useState();
     const [ fileType, setFileType ] = useState('json');
@@ -112,6 +114,7 @@ const ReadJSONYAMLfile:React.FC<ReadJSONYAMLfileType> = ({setContent, isMulipleF
         setTimeout(() => {
             setContent(selectedSpec);
             closeFileOnclick();
+            closeModal && closeModal();
         }, 500)
     }
     return(<div className="read-file-wrapper">
@@ -157,4 +160,20 @@ const ReadJSONYAMLfile:React.FC<ReadJSONYAMLfileType> = ({setContent, isMulipleF
     </div>)
 }
 
+const ICONReadJSONYAMLfile:React.FC<{setContent: React.Dispatch<React.SetStateAction<string | undefined>>}> = ({ setContent }) => {
+    const [ show, setShow ] = useState(false);
+
+    return(<>
+        <div className="read-file-wrapper collased" onClick={() => setShow(true)}>
+            <TooltipComponent message="Import API Specification" placement='auto' isButtonStyle={true}>
+                <BsFileEarmark />
+            </TooltipComponent>
+        </div>
+        <Modal show={show} onHide={() => setShow(false)}>
+            <Modal.Body><ReadJSONYAMLfile setContent={setContent} closeModal={() => setShow(false)} /></Modal.Body>
+        </Modal>
+    </>)
+}
+
+export { ICONReadJSONYAMLfile };
 export default ReadJSONYAMLfile;

src/sass/components/_leftMenu.scss

@@ -4,14 +4,15 @@
     border-right: 1px dotted var(--color-background-border);
     display: flex;
     flex-direction: column;
+    transition: all 0.2s ease-in-out;
     .collapse-handle-icon-wrapper{
         flex: 1 1 auto;
         display: flex;
         align-items: flex-end;
         .collapse-handle-icon{
             border-top: 0.0625rem solid #f2f2f2;
             width: 100%;
-            padding: 10px 20px 10px 18px;
+            padding: 10px 12px 10px 12px;
             text-align: right;
             .icon{
                 &:hover{

src/sass/components/_readfile.scss

@@ -1,5 +1,9 @@
 .read-file-wrapper{
     padding: 24px;
+    &.collased{
+        padding-left: 12px;
+        padding-right: 12px;
+    }
     .readfile-box{
         position: relative;
         display: flex;