refactor: update UXs

src/routes/home/CurrentUser.js

@@ -1,81 +0,0 @@
-import { useEffect } from "react";
-import styled from "styled-components";
-import { AiOutlineCaretDown, AiOutlineSound } from "react-icons/ai";
-import { MdOutlineKeyboardVoice } from "react-icons/md";
-import { useSelector, useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
-
-import { clearAuthData } from "../../app/slices/auth.data";
-import { useLazyLogoutQuery } from "../../app/services/auth";
-
-const StyledWrapper = styled.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  padding: 16px 12px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .profile {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 5px;
-    .avatar {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-    }
-    .toggle {
-    }
-  }
-  .settings {
-    gap: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .icon {
-      cursor: pointer;
-    }
-  }
-`;
-export default function CurrentUser({ expand = true }) {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const [logout, { isSuccess }] = useLazyLogoutQuery();
-  const { user } = useSelector((store) => store.authData);
-  const handleLogout = () => {
-    logout();
-  };
-  useEffect(() => {
-    if (isSuccess) {
-      dispatch(clearAuthData());
-      navigate("/login");
-    }
-  }, [isSuccess]);
-
-  if (!user) return null;
-  const { name } = user;
-  return (
-    <StyledWrapper>
-      <div className="profile" title={name}>
-        <img
-          onDoubleClick={handleLogout}
-          title={name}
-          src={`https://avatars.dicebear.com/api/adventurer-neutral/${name}.svg`}
-          alt="user avatar"
-          className="avatar"
-        />
-        <AiOutlineCaretDown className="toggle" width={20} color="#C4C4C4" />
-      </div>
-      {expand && (
-        <div className="settings">
-          <AiOutlineSound className="icon" size={15} color="#1C1C1E" />
-          <MdOutlineKeyboardVoice className="icon" size={15} color="#1C1C1E" />
-        </div>
-      )}
-    </StyledWrapper>
-  );
-}

src/routes/home/Menu.js

@@ -0,0 +1,56 @@
+// import React from 'react'
+import styled from "styled-components";
+const StyledMenus = styled.ul`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 8px 12px;
+  .menu {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    gap: 10px;
+    .icon {
+      width: 24px;
+      height: 24px;
+      transition: all 0.5s ease;
+    }
+    .txt {
+      color: #4b5563;
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+`;
+export default function Menu({ toggle, expand = true }) {
+  return (
+    <StyledMenus>
+      <li className="menu">
+        <img
+          src="https://static.nicegoodthings.com/project/rustchat/menu.setting.png"
+          alt="setting icon"
+          className="icon"
+        />
+        {expand && <span className="txt">Settings</span>}
+      </li>
+      <li className="menu" onClick={toggle}>
+        <img
+          src={
+            expand
+              ? "https://static.nicegoodthings.com/project/rustchat/menu.toggle.collapse.png"
+              : "https://static.nicegoodthings.com/project/rustchat/menu.toggle.expand.png"
+          }
+          alt="expand icon"
+          className="icon"
+        />
+        {expand && <span className="txt">Expand</span>}
+      </li>
+    </StyledMenus>
+  );
+}

src/routes/home/ServerDropList.js

@@ -4,7 +4,7 @@ import { HiChevronDoubleLeft } from "react-icons/hi";
 
 const StyledWrapper = styled.div`
   height: 56px;
-  padding: 0 16px;
+  padding: 0 20px;
   padding-right: 5px;
   display: flex;
   justify-content: space-between;
@@ -20,54 +20,26 @@ const StyledWrapper = styled.div`
     .logo {
       width: 24px;
       height: 24px;
-      background-color: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 4px;
-      img {
-        width: 16px;
-        height: 16px;
-      }
     }
     .title {
       white-space: nowrap;
       font-weight: normal;
-      font-size: 14px;
-      line-height: 20px;
-      color: #4b5563;
-    }
-  }
-  .arrow {
-    cursor: pointer;
-    transform-origin: center;
-    transition: transform 0.5s ease-in-out;
-    display: flex;
-    width: 15px;
-    height: 15px;
-    transform: rotate(180deg);
-    .icon {
-      width: 100%;
-      height: 100%;
-    }
-    &.expand {
-      transform: rotate(0deg);
+      font-style: normal;
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 18px;
+      color: #1c1c1e;
     }
   }
 `;
-export default function ServerDropList({ data, toggle, expand = true }) {
+export default function ServerDropList({ data, expand = true }) {
   if (!data) return null;
   return (
     <StyledWrapper className={expand ? "expand" : ""}>
       <div className="server">
-        <div className="logo">
-          <img src={data.logo} alt="logo" />
-        </div>
+        <img className="logo" src={data.logo} alt="logo" />
         {expand && <h2 className="title">{data.name}</h2>}
       </div>
-      <div onClick={toggle} className={`arrow ${expand ? "expand" : ""}`}>
-        <HiChevronDoubleLeft className="icon" color="#BFBFBF" />
-      </div>
     </StyledWrapper>
   );
 }

src/routes/home/Tools.js

@@ -34,17 +34,17 @@ const StyledWrapper = styled.div`
       color: #4b5563;
     }
     .tool {
+      padding: 5px 4px;
       .logo {
         border-radius: 5.5px;
-        background: #fff;
-        width: 32px;
-        height: 32px;
+        width: 24px;
+        height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         .icon {
-          width: 21px;
-          height: 21px;
+          width: 100%;
+          height: 100%;
         }
       }
       .title {
@@ -53,8 +53,8 @@ const StyledWrapper = styled.div`
       &.add .logo {
         background: none;
         .icon {
-          width: 40px;
-          height: 40px;
+          width: 30px;
+          height: 30px;
         }
       }
     }

src/routes/home/index.js

@@ -7,9 +7,10 @@ import { toggleMenuExpand } from "../../app/slices/ui";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 import Tools from "./Tools";
+import Menu from "./Menu";
 import usePreload from "./usePreload";
 
-import CurrentUser from "./CurrentUser";
+// import CurrentUser from "./CurrentUser";
 
 import ChatIcon from "../../assets/icons/chat.svg";
 import ContactIcon from "../../assets/icons/contact.svg";
@@ -50,11 +51,7 @@ export default function HomePage() {
       />
       <StyledWrapper>
         <div className={`col left ${menuExpand ? "expand" : ""}`}>
-          <ServerDropList
-            data={data?.server}
-            expand={menuExpand}
-            toggle={toggleExpand}
-          />
+          <ServerDropList data={data?.server} expand={menuExpand} />
           <nav className="nav">
             <NavLink className="link" to={"/chat"}>
               <img src={ChatIcon} alt="chat icon" /> {menuExpand && `Chat`}
@@ -64,8 +61,10 @@ export default function HomePage() {
               {menuExpand && `Contacts`}
             </NavLink>
           </nav>
+          <div className="divider"></div>
           <Tools expand={menuExpand} />
-          <CurrentUser expand={menuExpand} />
+          <Menu toggle={toggleExpand} expand={menuExpand} />
+          {/* <CurrentUser expand={menuExpand} /> */}
         </div>
         <div className="col right">
           <Outlet />

src/routes/home/styled.js

@@ -14,6 +14,12 @@ const StyledWrapper = styled.div`
       width: 64px;
       box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
       transition: all 0.5s ease-in;
+      > .divider {
+        width: -webkit-fill-available;
+        height: 1px;
+        background-color: #d4d4d4;
+        margin: 8px 16px;
+      }
       &.expand {
         width: 180px;
       }
@@ -31,7 +37,7 @@ const StyledWrapper = styled.div`
         align-items: center;
         gap: 10px;
         text-decoration: none;
-        padding: 10px 8px;
+        padding: 8px;
         font-weight: 600;
         font-size: 14px;
         line-height: 20px;