mobile UI improvements and code cleanup

src/components/Dataform/index.jsx

@@ -73,7 +73,7 @@ const DataForm = memo(() => {
     >
       {!isLoading && (
         <div>
-          <div className="fixed bottom-0 flex justify-center items-center right-0 left-0">
+          <div className="fixed bottom-0 flex justify-center items-center right-0 left-0 z-10">
             <MultiSelectBar />
           </div>
 

src/components/FileItem/index.jsx

@@ -220,7 +220,7 @@ const FileItem = React.memo((props) => {
           {hasThumbnail ? (
             <div className="w-full min-h-[88px] max-h-[88px] h-full flex">
               <img
-                className=" object-cover"
+                className="object-cover"
                 src={image}
                 onError={imageOnError}
               />

src/components/Files/index.jsx

@@ -39,12 +39,9 @@ const Files = memo(() => {
           )}
           {!isHome && (
             <React.Fragment>
-              <div className="hidden sm:block">
+              <div className="block">
                 <ParentBar />
               </div>
-              <h2 className="block sm:hidden m-0 text-[22px] font-medium">
-                Files
-              </h2>
             </React.Fragment>
           )}
 

src/components/Header/index.tsx

@@ -1,12 +1,22 @@
 import { useNavigate } from "react-router-dom";
 import SearchBar from "../SearchBar";
+import MenuIcon from "../../icons/MenuIcon";
+import { useAppDispatch, useAppSelector } from "../../hooks/store";
+import { useCallback, useMemo } from "react";
+import { toggleDrawer } from "../../reducers/leftSection";
 
 const Header = () => {
+  const drawerOpen = useAppSelector((state) => state.leftSection.drawOpen);
+  const dispatch = useAppDispatch();
   const navigate = useNavigate();
+
+  const toggleDrawerClick = useCallback(() => {
+    dispatch(toggleDrawer());
+  }, [toggleDrawer]);
   return (
     <header>
       <div className="px-6 flex justify-between min-h-[68px] items-center py-[15px]">
-        <div className="flex items-center w-[260px]">
+        <div className="items-center w-[260px] hidden mobileMode:flex">
           <a
             className="inline-flex items-center justify-center cursor-pointer"
             onClick={() => navigate("/")}
@@ -14,8 +24,17 @@ const Header = () => {
             <img className="w-[35px]" src="/images/icon.png" alt="logo" />
           </a>
         </div>
+        <div className="items-center flex mobileMode:hidden mr-4">
+          <a className="inline-flex items-center justify-center cursor-pointer">
+            <MenuIcon
+              id="menu-icon"
+              onClick={toggleDrawerClick}
+              className="text-[#3c85ee] w-[35px]"
+            />
+          </a>
+        </div>
         <SearchBar />
-        <div className="flex justify-end w-[260px]">
+        <div className="justify-end w-[260px] hidden mobileMode:flex">
           <div>
             <div>
               <a

src/components/LeftSection/LeftSection.jsx

@@ -1,129 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { createFolderAPI } from "../../api/foldersAPI";
-import { useFoldersClient } from "../../hooks/folders";
-import { showCreateFolderPopup } from "../../popups/folder";
-import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
-import AddNewDropdown from "../AddNewDropdown";
-import HomeListIcon from "../../icons/HomeListIcon";
-import TrashIcon from "../../icons/TrashIcon";
-import classNames from "classnames";
-import PhotoIcon from "../../icons/PhotoIcon";
-
-const LeftSection = (props) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { isHome, isTrash, isMedia } = useUtils();
-  const navigate = useNavigate();
-  const addNewDisabled = useRef(false);
-
-  const openDropdown = useCallback(() => {
-    if (addNewDisabled.current) return;
-    setIsDropdownOpen(true);
-  }, []);
-
-  const closeDropdown = useCallback(() => {
-    addNewDisabled.current = true;
-    setIsDropdownOpen(false);
-    // Clicking out of bounds on the add new button will cause it to reopen
-    setTimeout(() => (addNewDisabled.current = false), 300);
-  }, []);
-
-  const goHome = () => {
-    navigate("/home");
-  };
-
-  const goTrash = () => {
-    navigate("/trash");
-  };
-
-  const goMedia = () => {
-    navigate("/media");
-  };
-
-  return (
-    <div
-      className="menu__block p-6 hidden mobileMode:block border-r w-[270px] min-w-[270px]"
-      ref={props.leftSectionRef}
-      style={
-        props.leftSectionMode === ""
-          ? {}
-          : props.leftSectionMode === "open"
-          ? { left: "0px" }
-          : { left: "-290px" }
-      }
-    >
-      <div className="navigation__block flex flex-col h-full">
-        <div>
-          <div className="add__new">
-            <a onClick={openDropdown}>
-              <p>ADD NEW</p>
-              <span>
-                <img src="/assets/dropselect.svg" alt="dropselect" />
-              </span>
-            </a>
-            {/* TODO: Remove this props */}
-            {isDropdownOpen && (
-              <AddNewDropdown closeDropdown={closeDropdown} {...props} />
-            )}
-          </div>
-          <div className="pr-[20px] pb-4">
-            <ul className="m-0 list-none p-0 cursor-pointer">
-              <li>
-                <a
-                  onClick={goHome}
-                  className={classNames(
-                    "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                    isHome ? "text-[#3c85ee]" : "text-[#637381]"
-                  )}
-                >
-                  <span>
-                    <HomeListIcon />
-                  </span>
-                  <p className="ml-3">Home</p>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div className="border-t border-[#E8EEF2] pr-[20px] pt-3 pb-3">
-          <ul className="m-0 list-none p-0 cursor-pointer ">
-            <li>
-              <a
-                onClick={goMedia}
-                className={classNames(
-                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                  isMedia ? "text-[#3c85ee]" : "text-[#637381]"
-                )}
-              >
-                <span>
-                  <PhotoIcon className="w-[20px] h-[20px]" />
-                </span>
-                <p className="ml-3">Media</p>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div className="border-t border-[#E8EEF2] pr-[20px] pt-4">
-          <ul className="m-0 list-none p-0 cursor-pointer ">
-            <li>
-              <a
-                onClick={goTrash}
-                className={classNames(
-                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                  isTrash ? "text-red-500" : "text-[#637381]"
-                )}
-              >
-                <span>
-                  <TrashIcon />
-                </span>
-                <p className="ml-3">Trash</p>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LeftSection;

src/components/LeftSection/index.jsx

@@ -1,145 +1,155 @@
-import LeftSection from "./LeftSection";
-import { showAddOptions } from "../../actions/addOptions";
-import { startAddFile } from "../../actions/files";
-import { startAddFolder } from "../../actions/folders";
-import Swal from "sweetalert2";
-import { connect } from "react-redux";
-import React from "react";
-import { openUploadOverlay, setLeftSectionMode } from "../../actions/main";
+import React, { useCallback, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { createFolderAPI } from "../../api/foldersAPI";
+import { useFoldersClient } from "../../hooks/folders";
+import { showCreateFolderPopup } from "../../popups/folder";
+import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
+import AddNewDropdown from "../AddNewDropdown";
+import HomeListIcon from "../../icons/HomeListIcon";
+import TrashIcon from "../../icons/TrashIcon";
+import classNames from "classnames";
+import PhotoIcon from "../../icons/PhotoIcon";
+import { useAppDispatch, useAppSelector } from "../../hooks/store";
+import { closeDrawer } from "../../reducers/leftSection";
 
-class LeftSectionContainer extends React.Component {
-  constructor(props) {
-    super(props);
+const LeftSection = (props) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const leftSectionOpen = useAppSelector((state) => state.leftSection.drawOpen);
+  const { isHome, isTrash, isMedia } = useUtils();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const addNewDisabled = useRef(false);
 
-    this.wrapperRef = React.createRef();
-    this.uploadInput = React.createRef();
+  const openDropdown = useCallback(() => {
+    if (addNewDisabled.current) return;
+    setIsDropdownOpen(true);
+  }, []);
 
-    this.leftSectionRef = React.createRef();
+  const closeDropdown = useCallback(() => {
+    addNewDisabled.current = true;
+    setIsDropdownOpen(false);
+    // Clicking out of bounds on the add new button will cause it to reopen
+    setTimeout(() => (addNewDisabled.current = false), 300);
+  }, []);
 
-    this.state = {
-      open: false,
-      hideFolderTree: false,
-    };
-  }
+  const goHome = () => {
+    closeDrawerEvent();
+    navigate("/home");
+  };
 
-  createFolder = async (e) => {
-    let inputValue = "";
+  const goTrash = () => {
+    closeDrawerEvent();
+    navigate("/trash");
+  };
 
-    const { value: folderName } = await Swal.fire({
-      title: "Enter Folder Name",
-      input: "text",
-      inputValue: inputValue,
-      showCancelButton: true,
-      inputValidator: (value) => {
-        if (!value) {
-          return "Please Enter a Name";
-        }
-      },
-    });
+  const goMedia = () => {
+    closeDrawerEvent();
+    navigate("/media");
+  };
 
-    if (folderName === undefined || folderName === null) {
+  const closeDrawerEvent = (e) => {
+    if (
+      e &&
+      (!leftSectionOpen ||
+        e.target.id === "search-bar" ||
+        e.target.id === "menu-icon")
+    ) {
       return;
     }
 
-    const parent = this.props.parent;
-    const owner = this.props.auth.id;
-    const parentList = this.props.parentList;
-    const isGoogle = this.props.isGoogle;
-
-    this.props.dispatch(
-      startAddFolder(folderName, owner, parent, parentList, isGoogle)
-    );
-    this.showDropDown();
+    dispatch(closeDrawer());
   };
 
-  handleClickOutside = (e) => {
-    if (
-      this.leftSectionRef &&
-      !this.leftSectionRef.current.contains(event.target)
-    ) {
-      if (this.props.leftSectionMode === "open") {
-        this.props.dispatch(setLeftSectionMode("close"));
-      }
-    }
-  };
+  const { wrapperRef } = useClickOutOfBounds(closeDrawerEvent);
 
-  componentDidMount = () => {
-    document.addEventListener("mousedown", this.handleClickOutside);
+  return (
+    <div
+      ref={wrapperRef}
+      className={classNames(
+        "p-6 fixed mobileMode:relative border-r w-[270px] min-w-[270px] bg-white h-full z-20 mt-[9px] animate-movement",
+        {
+          "-left-[270px] mobileMode:left-0": !leftSectionOpen,
+          "left-0": leftSectionOpen,
+        }
+      )}
+    >
+      <div className="flex flex-col h-full">
+        <div>
+          <div className="relative mb-[30px]">
+            <a
+              onClick={openDropdown}
+              className="flex items-center justify-center bg-[#3c85ee] no-underline rounded-[5px]"
+            >
+              <p className="m-0 w-full text-center text-white text-[16px] font-medium">
+                ADD NEW
+              </p>
+              <span className="min-w-[50px] min-h-[45px] rounded-tr-[5px] rounded-br-[5px] flex items-center justify-center">
+                <img src="/assets/dropselect.svg" alt="dropselect" />
+              </span>
+            </a>
+            {/* TODO: Remove this props */}
+            {isDropdownOpen && (
+              <AddNewDropdown closeDropdown={closeDropdown} {...props} />
+            )}
+          </div>
+          <div className="mr-[20px] py-2 hover:bg-[#f6f5fd]">
+            <ul className="m-0 list-none p-0 cursor-pointer">
+              <li>
+                <a
+                  onClick={goHome}
+                  className={classNames(
+                    "flex items-center text-[#3c85ee] font-medium no-underline animate",
+                    isHome ? "text-[#3c85ee]" : "text-[#637381]"
+                  )}
+                >
+                  <span>
+                    <HomeListIcon />
+                  </span>
+                  <p className="ml-3">Home</p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="border-t border-[#E8EEF2] mr-[20px] py-2 hover:bg-[#f6f5fd]">
+          <ul className="m-0 list-none p-0 cursor-pointer ">
+            <li>
+              <a
+                onClick={goMedia}
+                className={classNames(
+                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
+                  isMedia ? "text-[#3c85ee]" : "text-[#637381]"
+                )}
+              >
+                <span>
+                  <PhotoIcon className="w-[20px] h-[20px] -ml-[2px]" />
+                </span>
+                <p className="ml-3">Media</p>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div className="border-t border-[#E8EEF2] mr-[20px] py-2 hover:bg-[#f6f5fd]">
+          <ul className="m-0 list-none p-0 cursor-pointer ">
+            <li>
+              <a
+                onClick={goTrash}
+                className={classNames(
+                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
+                  isTrash ? "text-red-500" : "text-[#637381]"
+                )}
+              >
+                <span>
+                  <TrashIcon />
+                </span>
+                <p className="ml-3">Trash</p>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-    const hideFolderTree = localStorage.getItem("hide-folder-tree");
-
-    if (hideFolderTree) {
-      this.setState(() => ({
-        hideFolderTree,
-      }));
-    }
-  };
-
-  componentWillUnmount = () => {
-    document.removeEventListener("mousedown", this.handleClickOutside);
-  };
-
-  addButtonEvent = () => {
-    const currentAddOptions = !this.props.showAddOptions;
-    this.props.dispatch(showAddOptions(currentAddOptions));
-  };
-
-  handleUpload = (e) => {
-    e.preventDefault();
-    console.log("handle upload");
-
-    this.props.dispatch(
-      startAddFile(
-        this.uploadInput.current,
-        this.props.parent,
-        this.props.parentList,
-        this.props.storageSwitcher
-      )
-    );
-    this.uploadInput.current.value = "";
-  };
-
-  showDropDown = () => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        open: !this.state.open,
-      };
-    });
-  };
-
-  showUploadOverlay = () => {
-    this.showDropDown();
-    this.props.dispatch(openUploadOverlay());
-  };
-
-  render() {
-    return (
-      <LeftSection
-        addButtonEvent={this.addButtonEvent}
-        wrapperRef={this.wrapperRef}
-        uploadInput={this.uploadInput}
-        createFolder={this.createFolder}
-        handleUpload={this.handleUpload}
-        showDropDown={this.showDropDown}
-        showUploadOverlay={this.showUploadOverlay}
-        leftSectionRef={this.leftSectionRef}
-        state={this.state}
-        {...this.props}
-      />
-    );
-  }
-}
-
-const connectPropToState = (state) => ({
-  auth: state.auth,
-  parent: state.parent.parent,
-  parentList: state.parent.parentList,
-  storage: state.storage,
-  showAddOptions: state.addOptions.showAddOptions,
-  isGoogle: state.filter.isGoogle,
-  storageSwitcher: state.storageSwitcher.selected,
-  leftSectionMode: state.main.leftSectionMode,
-});
-
-export default connect(connectPropToState)(LeftSectionContainer);
+export default LeftSection;

src/components/Medias/index.tsx

@@ -33,7 +33,7 @@ const Medias = memo(() => {
           "grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[10px]"
         )}
       >
-        <div className="fixed bottom-0 flex justify-center items-center right-0 left-0">
+        <div className="fixed bottom-0 flex justify-center items-center right-0 left-0 z-10">
           <MultiSelectBar />
         </div>
         {files?.pages.map((filePage, index) => (

src/components/MultiSelectBar/index.tsx

@@ -106,7 +106,7 @@ const MultiSelectBar: React.FC = () => {
   if (!multiSelectMode) return <div></div>;
 
   return (
-    <div className="flex justify-center items-center z-10">
+    <div className="flex justify-center items-center">
       <div className="border border-[#ebe9f9] bg-[#ebe9f9] rounded-full p-2 px-5 text-black text-sm mb-4 max-w-[600px] w-full mt-4 min-w-[300px] shadow-lg">
         <div className="flex flex-row items-center justify-between">
           <div className="flex flex-row items-center">

src/components/ParentBar/ParentBar.jsx

@@ -34,7 +34,7 @@ const ParentBar = memo(() => {
   // }
 
   return (
-    <div className="w-full items-center hidden sm:flex">
+    <div className="w-full items-center flex">
       <div className="flex items-center">
         <a
           className="text-[#637381] text-[18px] leading-[21px] font-medium m-0 no-underline animate cursor-pointer"
@@ -47,7 +47,7 @@ const ParentBar = memo(() => {
         </span>
         <p
           onClick={goToFolder}
-          className="text-[#212b36] text-[18px] leading-[21px] font-medium m-0 whitespace-nowrap max-w-[300px] overflow-hidden text-ellipsis cursor-pointer"
+          className="text-[#212b36] text-[18px] leading-[21px] font-medium m-0 whitespace-nowrap max-w-[170px] sm:max-w-[300px] overflow-hidden text-ellipsis cursor-pointer"
         >
           {folder.name}
         </p>

src/components/QuickAccess/index.jsx

@@ -44,8 +44,8 @@ const QuickAccess = memo(() => {
             ? "justify-center xs:justify-normal"
             : "justify-normal",
           {
-            "max-h-36 sm:max-h-40": !quickAccessExpanded,
-            "max-h-[720px] sm:max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]":
+            "max-h-32 sm:max-h-40": !quickAccessExpanded,
+            "max-h-[700px] sm:max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]":
               quickAccessExpanded,
           }
         )}

src/components/SearchBar/index.tsx

@@ -10,7 +10,7 @@ import { FileInterface } from "../../types/file";
 import { setPopupFile } from "../../actions/popupFile";
 import Spinner from "../Spinner";
 import classNames from "classnames";
-import { is } from "@babel/types";
+import { closeDrawer } from "../../reducers/leftSection";
 
 const SearchBar = memo(() => {
   const [searchText, setSearchText] = useState("");
@@ -85,6 +85,10 @@ const SearchBar = memo(() => {
     resetState();
   };
 
+  const onFocus = () => {
+    dispatch(closeDrawer());
+  };
+
   const searchTextPlaceholder = useMemo(() => {
     if (isMedia) {
       return "Search Media";
@@ -121,6 +125,8 @@ const SearchBar = memo(() => {
         value={searchText}
         placeholder={searchTextPlaceholder}
         className="w-full min-h-[42px] border border-[#BEC9D3] pl-[45px] pr-[15px] text-[16px] text-black rounded-[5px]"
+        onFocus={onFocus}
+        id="search-bar"
       />
       <div
         className="absolute left-0 bg-white shadow-xl rounded-[4px] w-full top-[42px] max-h-[400px] overflow-y-scroll border border-[#BEC9D3]"

src/hooks/utils.ts

@@ -26,14 +26,14 @@ export const useUtils = () => {
   return { isHome, isTrash, isMedia };
 };
 
-export const useClickOutOfBounds = (outOfBoundsCallback: () => any) => {
+export const useClickOutOfBounds = (outOfBoundsCallback: (e: any) => any) => {
   console.log("out");
   const wrapperRef = useRef<HTMLDivElement>(null);
   // TODO: Remove this any
   const outOfBoundsClickCheck = useCallback(
     (e: any) => {
       if (wrapperRef && !wrapperRef.current?.contains(e.target as Node)) {
-        outOfBoundsCallback();
+        outOfBoundsCallback(e);
       }
     },
     [outOfBoundsCallback]

src/icons/MenuIcon.tsx

@@ -0,0 +1,15 @@
+type MenuIconType = React.SVGAttributes<SVGSVGElement>;
+
+const MenuIcon: React.FC<MenuIconType> = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <title>menu</title>
+      <path
+        d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default MenuIcon;

src/reducers/leftSection.ts

@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  drawOpen: false,
+};
+
+const leftSectionSlice = createSlice({
+  name: "selected",
+  initialState,
+  reducers: {
+    toggleDrawer: (state) => {
+      state.drawOpen = !state.drawOpen;
+    },
+    closeDrawer: (state) => {
+      state.drawOpen = false;
+    },
+  },
+});
+
+export const { toggleDrawer, closeDrawer } = leftSectionSlice.actions;
+
+export default leftSectionSlice.reducer;

src/store/configureStore.ts

@@ -19,6 +19,7 @@ import folderTreeReducer from "../reducers/folderTree";
 import uploadStorageSwitcherReducer from "../reducers/uploadStorageSwitcher";
 import mobileContextMenuReducer from "../reducers/mobileContextMenu";
 import selectedReducer from "../reducers/selected";
+import leftSectionReducer from "../reducers/leftSection";
 
 //const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
@@ -30,6 +31,7 @@ const store = configureStore({
     folders: folderReducer,
     filter: filterReducer,
     selected: selectedReducer,
+    leftSection: leftSectionReducer,
     selectedItem: selectedItemReducer,
     uploads: uploadsReducer,
     storage: storageReducer,