renamed some files

src/components/SettingsPage/SettingsAccountSection.tsx

@@ -10,7 +10,7 @@ interface SettingsPageAccountProps {
 const SettingsPageAccount: React.FC<SettingsPageAccountProps> = ({ user }) => {
   return (
     <div>
-      <div className="bg-white-hover p-3 flex items-center w-full">
+      <div className="bg-white-hover p-3 flex items-center w-full rounded-md">
         <p className="text-base">Account</p>
       </div>
       <div>
@@ -31,7 +31,7 @@ const SettingsPageAccount: React.FC<SettingsPageAccountProps> = ({ user }) => {
           </p>
         </div>
         <div className="px-3 py-4 flex flex-row justify-between items-center border-b border-gray-secondary">
-          <p className="text-gray-primary">Logout all account</p>
+          <p className="text-gray-primary">Logout all accounts</p>
           <p className="text-primary hover:text-primary-hover cursor-pointer">
             Logout all
           </p>

src/components/SettingsPage/SettingsGeneralSection.tsx

@@ -4,6 +4,8 @@ const SettingsPageGeneral = () => {
   const [listViewStyle, setListViewStyle] = useState("list");
   const [sortBy, setSortBy] = useState("date");
   const [orderBy, setOrderBy] = useState("descending");
+  const [doubleClickFolders, setDoubleClickFolders] = useState("disabled");
+  const [loadThumbnails, setLoadThumbnails] = useState("enabled");
 
   const fileListStyleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
@@ -36,6 +38,30 @@ const SettingsPageGeneral = () => {
     }
   };
 
+  const doubleClickFoldersChange = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const value = e.target.value;
+    setDoubleClickFolders(value);
+
+    if (value === "enabled") {
+      window.localStorage.setItem("double-click-folders", "true");
+    } else {
+      window.localStorage.removeItem("double-click-folders");
+    }
+  };
+
+  const loadThumbnailsChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    setLoadThumbnails(value);
+
+    if (value === "disabled") {
+      window.localStorage.setItem("not-load-thumbnails", "true");
+    } else {
+      window.localStorage.removeItem("not-load-thumbnails");
+    }
+  };
+
   useEffect(() => {
     const gridModeLocalStorage = window.localStorage.getItem("grid-mode");
     const gridModeEnabled = gridModeLocalStorage === "true";
@@ -46,14 +72,26 @@ const SettingsPageGeneral = () => {
     const orderByLocalStorage = window.localStorage.getItem("order-asc");
     const orderByAscendingEnabled = orderByLocalStorage === "true";
 
+    const doubleClickFoldersLocalStorage = window.localStorage.getItem(
+      "double-click-folders"
+    );
+    const doubleClickFoldersEnabled = doubleClickFoldersLocalStorage === "true";
+
+    const loadThumbnailsLocalStorage = window.localStorage.getItem(
+      "not-load-thumbnails"
+    );
+    const loadThumbnailsDisabled = loadThumbnailsLocalStorage === "true";
+
     setListViewStyle(gridModeEnabled ? "grid" : "list");
     setSortBy(sortByNameEnabled ? "name" : "date");
     setOrderBy(orderByAscendingEnabled ? "ascending" : "descending");
+    setDoubleClickFolders(doubleClickFoldersEnabled ? "enabled" : "disabled");
+    setLoadThumbnails(loadThumbnailsDisabled ? "disabled" : "enabled");
   }, []);
 
   return (
     <div>
-      <div className="bg-white-hover p-3 flex items-center w-full">
+      <div className="bg-white-hover p-3 flex items-center w-full rounded-md">
         <p className="text-base">General settings</p>
       </div>
       <div>
@@ -90,6 +128,28 @@ const SettingsPageGeneral = () => {
             <option value="ascending">Ascending</option>
           </select>
         </div>
+        <div className="px-3 py-4 flex flex-row justify-between items-center border-b border-gray-secondary">
+          <p className="text-gray-primary">Double click to enter folders</p>
+          <select
+            value={doubleClickFolders}
+            onChange={doubleClickFoldersChange}
+            className="text-primary"
+          >
+            <option value="disabled">Disabled</option>
+            <option value="enabled">Enabled</option>
+          </select>
+        </div>
+        <div className="px-3 py-4 flex flex-row justify-between items-center border-b border-gray-secondary">
+          <p className="text-gray-primary">Load thumbnails</p>
+          <select
+            value={loadThumbnails}
+            onChange={loadThumbnailsChange}
+            className="text-primary"
+          >
+            <option value="enabled">Enabled</option>
+            <option value="disabled">Disabled</option>
+          </select>
+        </div>
       </div>
     </div>
   );

src/components/SettingsPage/SettingsPage.tsx

@@ -5,15 +5,18 @@ import classNames from "classnames";
 import AccountIcon from "../../icons/AccountIcon";
 import TuneIcon from "../../icons/TuneIcon";
 import { useNavigate } from "react-router-dom";
-import SettingsPageAccount from "./SettingsPageAccount";
+import SettingsAccountSection from "./SettingsAccountSection";
 import { getUserDetailedAPI } from "../../api/user";
 import Spinner from "../Spinner/Spinner";
 import Swal from "sweetalert2";
-import SettingsPageGeneral from "./SettingsPageGeneral";
+import SettingsGeneralSection from "./SettingsGeneralSection";
+import { useClickOutOfBounds } from "../../hooks/utils";
+import MenuIcon from "../../icons/MenuIcon";
 
 const SettingsPage = () => {
   const [user, setUser] = useState(null);
   const [tab, setTab] = useState("account");
+  const [showSidebarMobile, setShowSidebarMobile] = useState(false);
   const navigate = useNavigate();
 
   const goHome = () => {
@@ -46,6 +49,13 @@ const SettingsPage = () => {
     getUser();
   }, []);
 
+  const { wrapperRef } = useClickOutOfBounds(() => setShowSidebarMobile(false));
+
+  const changeTab = (tab: string) => {
+    setTab(tab);
+    setShowSidebarMobile(false);
+  };
+
   if (!user) {
     return (
       <div className="w-screen h-screen flex justify-center items-center">
@@ -56,9 +66,20 @@ const SettingsPage = () => {
 
   return (
     <div>
-      <Header />
-      <div className="mt-[70px] flex flex-row">
-        <div className="px-4 border-r border-gray-secondary w-64 h-screen">
+      <div className="hidden sm:block">
+        <Header />
+      </div>
+      <div className="flex flex-row sm:mt-[70px]">
+        <div
+          ref={wrapperRef}
+          className={classNames(
+            "fixed sm:relative px-4 border-r border-gray-secondary w-72 h-screen animate-movement bg-white",
+            {
+              "-ml-72 sm:ml-0": !showSidebarMobile,
+              "ml-0": showSidebarMobile,
+            }
+          )}
+        >
           <a
             onClick={goHome}
             className="text-gray-600 hover:text-primary cursor-pointer flex flex-row items-center space-x-1 pt-6"
@@ -74,7 +95,7 @@ const SettingsPage = () => {
                   ? "text-primary bg-white-hover"
                   : "text-gray-primary"
               )}
-              onClick={() => setTab("account")}
+              onClick={() => changeTab("account")}
             >
               <AccountIcon className="w-6 h-6" />
               <p className="ml-3">Account</p>
@@ -86,16 +107,22 @@ const SettingsPage = () => {
                   ? "text-primary bg-white-hover"
                   : "text-gray-primary"
               )}
-              onClick={() => setTab("general")}
+              onClick={() => changeTab("general")}
             >
               <TuneIcon className="w-6 h-6" />
               <p className="ml-3">General</p>
             </div>
           </div>
         </div>
-        <div className="mt-6 px-64 w-full">
-          {tab === "account" && <SettingsPageAccount user={user} />}
-          {tab === "general" && <SettingsPageGeneral />}
+        <div className="mt-6 px-2 sm:px-64 w-full">
+          <div className="block sm:hidden mb-2">
+            <MenuIcon
+              className="w-8 h-8"
+              onClick={() => setShowSidebarMobile(!showSidebarMobile)}
+            />
+          </div>
+          {tab === "account" && <SettingsAccountSection user={user} />}
+          {tab === "general" && <SettingsGeneralSection />}
         </div>
       </div>
     </div>