chore: updates

src/routes/home/Menu.js

@@ -37,7 +37,11 @@ export default function Menu({ toggle, expand = true }) {
           alt="setting icon"
           className="icon"
         />
-        {expand && <span className="txt">Settings</span>}
+        {expand && (
+          <span className="txt animate__animated animate__fadeIn">
+            Settings
+          </span>
+        )}
       </li>
       <li className="menu" onClick={toggle}>
         <img
@@ -49,7 +53,9 @@ export default function Menu({ toggle, expand = true }) {
           alt="expand icon"
           className="icon"
         />
-        {expand && <span className="txt">Expand</span>}
+        {expand && (
+          <span className="txt animate__animated animate__fadeIn">Expand</span>
+        )}
       </li>
     </StyledMenus>
   );

src/routes/home/ServerDropList.js

@@ -1,6 +1,6 @@
 // import React from 'react';
 import styled from "styled-components";
-import { HiChevronDoubleLeft } from "react-icons/hi";
+// import { HiChevronDoubleLeft } from "react-icons/hi";
 
 const StyledWrapper = styled.div`
   height: 56px;
@@ -38,7 +38,11 @@ export default function ServerDropList({ data, expand = true }) {
     <StyledWrapper className={expand ? "expand" : ""}>
       <div className="server">
         <img className="logo" src={data.logo} alt="logo" />
-        {expand && <h2 className="title">{data.name}</h2>}
+        {expand && (
+          <h2 className="title animate__animated animate__fadeIn">
+            {data.name}
+          </h2>
+        )}
       </div>
     </StyledWrapper>
   );

src/routes/home/Tools.js

@@ -73,19 +73,29 @@ export default function Tools({ expand = true }) {
               alt="logo"
             />
           </div>
-          {expand && <h2 className="title">Webrowse</h2>}
+          {expand && (
+            <h2 className="title animate__animated animate__fadeIn">
+              Webrowse
+            </h2>
+          )}
         </li>
         <li className="tool">
           <div className="logo">
             <IoLogoGithub size={40} className="icon" />
           </div>
-          {expand && <h2 className="title">Github</h2>}
+          {expand && (
+            <h2 className="title animate__animated animate__fadeIn">Github</h2>
+          )}
         </li>
         <li className="tool add">
           <div className="logo">
             <RiAddFill className="icon" size={40} color="#4B5563" />
           </div>
-          {expand && <h2 className="title">Add new app</h2>}
+          {expand && (
+            <h2 className="title animate__animated animate__fadeIn">
+              Add new app
+            </h2>
+          )}
         </li>
       </ul>
     </StyledWrapper>