refactor: mobile UX friendly

src/routes/home/index.tsx

@@ -9,13 +9,14 @@ import usePreload from "../../common/hook/usePreload";
 import Tooltip from "../../common/component/Tooltip";
 import Notification from "../../common/component/Notification";
 import Manifest from "../../common/component/Manifest";
-
 import ChatIcon from "../../assets/icons/chat.svg";
 import UserIcon from "../../assets/icons/user.svg";
 import FavIcon from "../../assets/icons/bookmark.svg";
 import FolderIcon from "../../assets/icons/folder.svg";
 import { useAppSelector } from "../../app/store";
-// const routes = ["/setting", "/setting/channel/:cid"];
+import { isMobile } from "../../common/utils";
+
+
 function HomePage() {
   const { t } = useTranslation();
   const isHomePath = useMatch(`/`);
@@ -42,16 +43,13 @@ function HomePage() {
   const isSettingPage = pathname.startsWith("/setting");
   const isChattingPage = isHomePath || pathname.startsWith("/chat");
   if (isSettingPage) {
-    return (
-      <>
-        <Outlet />
-      </>
-    );
+    return <Outlet />;
   }
   // 有点绕
   const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat";
   const userNav = userPath || "/users";
   const linkClass = `flex items-center gap-2.5 px-3 py-2 font-semibold text-sm text-gray-600 rounded-lg hover:bg-gray-800/10`;
+  const mobile = isMobile();
   return (
     <>
       <Manifest />
@@ -62,42 +60,35 @@ function HomePage() {
             {loginUid && <User uid={loginUid} />}
             <nav className="flex flex-col gap-1 px-3 py-6">
               <NavLink
-                className={() => {
-                  return `${linkClass} ${isChattingPage ? "bg-primary-400 hover:bg-primary-400" : ""}`;
-                }}
+                className={({ isActive }) => `${linkClass} ${(isActive || isChattingPage) ? "bg-primary-400 hover:bg-primary-400" : ""}`}
                 to={chatNav}
               >
                 {({ isActive }) => {
-                  return <Tooltip tip={t("chat")}>
+                  return <Tooltip disabled={mobile} tip={t("chat")}>
                     <ChatIcon className={(isActive || isChattingPage) ? "fill-white" : ""} />
                   </Tooltip>;
                 }}
-
               </NavLink>
               <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 hover:bg-primary-400' : ""}`} to={userNav}>
                 {({ isActive }) => {
-                  return <Tooltip tip={t("members")}>
+                  return <Tooltip disabled={mobile} tip={t("members")}>
                     <UserIcon className={isActive ? "fill-white" : ""} />
                   </Tooltip>;
                 }}
-
               </NavLink>
               <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 hover:bg-primary-400' : ""}`} to={"/favs"}>
                 {({ isActive }) => {
-                  return <Tooltip tip={t("favs")}>
+                  return <Tooltip disabled={mobile} tip={t("favs")}>
                     <FavIcon className={isActive ? "fill-white" : ""} />
                   </Tooltip>;
                 }}
-
-
               </NavLink>
               <NavLink className={({ isActive }) => `${linkClass} ${isActive ? 'bg-primary-400 hover:bg-primary-400' : ""}`} to={"/files"}>
                 {({ isActive }) => {
-                  return <Tooltip tip={t("files")}>
+                  return <Tooltip disabled={mobile} tip={t("files")}>
                     <FolderIcon className={isActive ? "fill-white" : ""} />
                   </Tooltip>;
                 }}
-
               </NavLink>
             </nav>
             <Menu />