feat: lots updates

src/routes/home/index.js

@@ -1,7 +1,9 @@
 // import React from 'react';
-import { useState } from "react";
-import StyledWrapper from "./styled";
+// import { useState } from "react";
 import { Outlet, NavLink } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { toggleMenuExpand } from "../../app/slices/ui";
+import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 import Tools from "./Tools";
 import usePreload from "./usePreload";
@@ -13,33 +15,36 @@ import ContactIcon from "../../assets/icons/contact.svg";
 import NotificationHub from "../../common/component/NotificationHub";
 
 export default function HomePage() {
+  const dispatch = useDispatch();
+  const { menuExpand, token } = useSelector((store) => {
+    return { token: store.authData.token, menuExpand: store.ui.menuExpand };
+  });
   const { data, error, success } = usePreload();
-  const [collaspe, setCollaspe] = useState(false);
-  const toggleCollaspe = () => {
-    setCollaspe((prev) => !prev);
+  const toggleExpand = () => {
+    dispatch(toggleMenuExpand());
   };
   console.log({ data, error, success });
   return (
     <>
-      <NotificationHub />
+      <NotificationHub token={token} />
       <StyledWrapper>
-        <div className={`col left ${collaspe ? "collaspe" : ""}`}>
+        <div className={`col left ${menuExpand ? "expand" : ""}`}>
           <ServerDropList
             data={data?.server}
-            collaspe={collaspe}
-            toggle={toggleCollaspe}
+            expand={menuExpand}
+            toggle={toggleExpand}
           />
           <nav className="nav">
             <NavLink className="link" to={"/chat"}>
-              <img src={ChatIcon} alt="chat icon" /> {!collaspe && `Chat`}
+              <img src={ChatIcon} alt="chat icon" /> {menuExpand && `Chat`}
             </NavLink>
             <NavLink className="link" to={"/contacts"}>
               <img src={ContactIcon} alt="contact icon" />{" "}
-              {!collaspe && `Contacts`}
+              {menuExpand && `Contacts`}
             </NavLink>
           </nav>
-          <Tools collaspe={collaspe} />
-          <CurrentUser collaspe={collaspe} />
+          <Tools expand={menuExpand} />
+          <CurrentUser expand={menuExpand} />
         </div>
         <div className="col right">
           <Outlet />