feat: tooltip

src/routes/home/Loading.js

@@ -40,7 +40,7 @@ export default function Loading() {
   useEffect(() => {
     const inter = setTimeout(() => {
       setReloadVisible(true);
-    }, 15000);
+    }, 30000);
 
     return () => {
       clearTimeout(inter);

src/routes/home/Menu.js

@@ -1,9 +1,10 @@
 // import React from 'react'
 import { useDispatch } from "react-redux";
 import { toggleSetting } from "../../app/slices/ui";
+import Tooltip from "../../common/component/Tooltip";
 import settingIcon from "../../assets/icons/setting.svg?url";
-import foldIcon from "../../assets/icons/fold.svg?url";
-import unfoldIcon from "../../assets/icons/unfold.svg?url";
+// import foldIcon from "../../assets/icons/fold.svg?url";
+// import unfoldIcon from "../../assets/icons/unfold.svg?url";
 import styled from "styled-components";
 const StyledMenus = styled.ul`
   display: flex;
@@ -33,7 +34,7 @@ const StyledMenus = styled.ul`
     }
   }
 `;
-export default function Menu({ toggle, expand = true }) {
+export default function Menu() {
   const dispatch = useDispatch();
   const handleSetting = () => {
     dispatch(toggleSetting());
@@ -41,14 +42,16 @@ export default function Menu({ toggle, expand = true }) {
   return (
     <StyledMenus>
       <li className="menu" onClick={handleSetting}>
-        <img src={settingIcon} alt="setting icon" className="icon" />
-        {expand && (
+        <Tooltip placement="top" tip="Settings">
+          <img src={settingIcon} alt="setting icon" className="icon" />
+        </Tooltip>
+        {/* {expand && (
           <span className="txt animate__animated animate__fadeIn">
             Settings
           </span>
-        )}
+        )} */}
       </li>
-      <li className="menu" onClick={toggle}>
+      {/* <li className="menu" onClick={toggle}>
         <img
           src={expand ? foldIcon : unfoldIcon}
           alt="expand icon"
@@ -57,7 +60,7 @@ export default function Menu({ toggle, expand = true }) {
         {expand && (
           <span className="txt animate__animated animate__fadeIn">Expand</span>
         )}
-      </li>
+      </li> */}
     </StyledMenus>
   );
 }

src/routes/home/index.js

@@ -9,6 +9,7 @@ import ServerDropList from "./ServerDropList";
 import Loading from "./Loading";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
+import Tooltip from "../../common/component/Tooltip";
 import Notification from "../../common/component/Notification";
 import SettingModal from "../../common/component/Setting";
 import ChannelSettingModal from "../../common/component/ChannelSetting";
@@ -20,7 +21,7 @@ import FolderIcon from "../../assets/icons/folder.svg?url";
 export default function HomePage() {
   const dispatch = useDispatch();
   const {
-    ui: { ready, menuExpand, setting, channelSetting },
+    ui: { ready, setting, channelSetting },
   } = useSelector((store) => {
     return {
       ui: store.ui,
@@ -38,37 +39,43 @@ export default function HomePage() {
     <>
       <Notification />
       <StyledWrapper>
-        <div className={`col left ${menuExpand ? "expand" : ""}`}>
+        <div className={`col left`}>
           <ServerDropList
             data={data?.server}
             memberCount={data.contacts?.length}
-            expand={menuExpand}
+            expand={false}
           />
           <nav className="nav">
             <NavLink className="link" to={"/chat"}>
-              <img src={ChatIcon} alt="chat icon" />{" "}
-              {menuExpand && (
+              <Tooltip tip="Chat">
+                <img src={ChatIcon} alt="chat icon" />
+              </Tooltip>
+              {/* {menuExpand && (
                 <span className="animate__animated animate__fadeIn">Chat</span>
-              )}
+              )} */}
             </NavLink>
             <NavLink className="link" to={"/contacts"}>
-              <img src={ContactIcon} alt="contact icon" />{" "}
-              {menuExpand && (
+              <Tooltip tip="Channel">
+                <img src={ContactIcon} alt="contact icon" />
+              </Tooltip>
+              {/* {menuExpand && (
                 <span className="animate__animated animate__fadeIn">
                   Contacts
                 </span>
-              )}
+              )} */}
             </NavLink>
             <NavLink className="link" to={"/files"}>
-              <img src={FolderIcon} alt="folder icon" />{" "}
-              {menuExpand && (
+              <Tooltip tip="Files">
+                <img src={FolderIcon} alt="folder icon" />
+              </Tooltip>
+              {/* {menuExpand && (
                 <span className="animate__animated animate__fadeIn">Files</span>
-              )}
+              )} */}
             </NavLink>
           </nav>
           <div className="divider"></div>
           {/* <Tools expand={menuExpand} /> */}
-          <Menu toggle={toggleExpand} expand={menuExpand} />
+          <Menu toggle={toggleExpand} />
         </div>
         <div className="col right">
           <Outlet />