feat: setting for mobile friendly

src/common/component/ChannelModal/index.tsx

@@ -132,7 +132,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
             )}
           </div>
         )}
-        <div className={clsx(`min-w-[400px] flex flex-col items-center p-8 box-border`, !is_public && "w-[344px] justify-evenly")}>
+        <div className={clsx(`w-80 md:min-w-[400px] flex flex-col items-center p-8 box-border`, !is_public && "w-[344px] justify-evenly")}>
           <h3 className="font-semibold text-xl text-gray-600 mb-4 dark:text-white">{t("create_channel")}</h3>
           <p className="text-gray-400 mb-12 text-sm font-normal">
             {!is_public

src/common/component/GoBackNav.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useMatch, useNavigate } from 'react-router-dom';
+import IconArrow from '../../assets/icons/arrow.left.svg';
+type Props = {
+    path?: string,
+    className?: string
+}
+
+const GoBackNav = ({ path, className = "" }: Props) => {
+    const navigate = useNavigate();
+    const isChannelChatPage = useMatch("/chat/channel/:channel_id");
+    const isDMChatPage = useMatch("/chat/dm/:user_id");
+    const isProfilePage = useMatch("/users/:user_id");
+    console.log("routt", isChannelChatPage, isDMChatPage);
+    const isChatPage = !!isChannelChatPage || !!isDMChatPage;
+    const handleBack = () => {
+        if (path) {
+            navigate(path);
+        } else if (isChatPage) {
+            navigate("/chat");
+        } else if (isProfilePage) {
+            navigate("/users");
+        } else {
+            navigate(-1);
+        }
+    };
+    return (
+        <button className={`p-1 absolute left-0 md:hidden ${className}`} onClick={handleBack}>
+            <IconArrow className="dark:stroke-white  w-6 h-6" />
+        </button>
+    );
+};
+
+export default GoBackNav;

src/common/component/InviteLink.tsx

@@ -16,7 +16,7 @@ const InviteLink: FC<Props> = () => {
   return (
     <div className="flex flex-col items-start pb-8">
       <span className="font-semibold text-sm mb-2 text-gray-500 dark:text-gray-50">{t("share_invite_link")}</span>
-      <div className="w-[512px] mb-3 relative">
+      <div className="w-full md:w-[512px] mb-3 relative">
         <Input readOnly className={"large !pr-16"} placeholder="Generating" value={link} />
         <Button onClick={copyLink} className="ghost small border_less absolute right-1 top-1/2 -translate-y-1/2">
           {linkCopied ? "Copied" : t("action.copy", { ns: "common" })}
@@ -24,7 +24,7 @@ const InviteLink: FC<Props> = () => {
       </div>
       <span className="text-xs text-gray-600 dark:text-gray-100">{t("invite_link_expire")}</span>
       <div className="w-44 h-44 my-2">
-        <QRCode link={link} />
+        <QRCode size={1200} link={link} />
       </div>
       <Button className="ghost" disabled={generating} onClick={handleNewLink}>
         {generating ? `Generating` : t("generate_new_link")}

src/common/component/InviteModal/InviteByEmail.tsx

@@ -78,7 +78,7 @@ const InviteByEmail: FC<Props> = ({ cid }) => {
         </div>
       </div>
       <div className="w-44 h-44 my-2">
-        {!generating && <QRCode link={link} />}
+        {!generating && <QRCode size={1200} link={link} />}
       </div>
       <div className="text-xs text-gray-600 dark:text-gray-200">
         {t("invite_link_expire")}

src/common/component/ManageMembers/index.tsx

@@ -61,7 +61,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
         </p>
       </div>
 
-      <ul className="flex flex-col gap-1 w-[512px] mb-44">
+      <ul className="flex flex-col gap-1 w-full md:w-[512px] mb-44">
         {uids.map((uid) => {
           const currUser = users.byId[uid];
           if (!currUser) return null;
@@ -80,7 +80,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
                   <span className="font-bold text-sm text-gray-600 dark:text-white flex items-center gap-1">
                     {name} {owner && <IconOwner />}
                   </span>
-                  <span className="text-xs text-gray-500 dark:text-slate-50">{email}</span>
+                  <span className="hidden md:block text-xs text-gray-500 dark:text-slate-50">{email}</span>
                 </div>
               </div>
               <div className="flex items-center gap-7">

src/common/component/Message/PinMessageModal.tsx

@@ -34,7 +34,7 @@ const PinMessageModal: FC<Props> = ({ closeModal, mid = 0, gid = 0 }) => {
   return (
     <Modal>
       <StyledModal
-        className="min-w-[406px]"
+        className="min-w-[320px] md:min-w-[406px]"
         buttons={
           <>
             <Button onClick={closeModal} className="cancel">

src/common/component/Message/index.tsx

@@ -96,7 +96,7 @@ const Message: FC<IProps> = ({
       onContextMenu={readOnly ? undefined : handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
-      className={clsx(`group w-[85%] md:w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
+      className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
         readOnly && "hover:bg-transparent",
         showExpire && "bg-red-200",
         pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"

src/common/component/MobileAppTip.tsx

@@ -19,7 +19,7 @@ const Container = (props: ContainerProps) => {
     localStorage.removeItem(KEY_MOBILE_APP_TIP);
     toast.dismiss(id);
   };
-  return <div className="flex items-center gap-2 whitespace-nowrap">
+  return <div className="flex flex-col md:flex-row items-center gap-2 whitespace-nowrap">
     <div>
       <Trans i18nKey={"mobile_app"}>
         <strong className="font-bold" />

src/common/component/NewVersion.tsx

@@ -16,7 +16,7 @@ const Index: FC<Props> = ({ id, handleUpdate }) => {
   }, []);
 
   return (
-    <div className="flex items-center gap-2 whitespace-nowrap">
+    <div className="flex flex-col md:flex-row items-center gap-2 whitespace-nowrap">
       <div>
         <Trans i18nKey={"new_version"}>
           <strong className="font-bold" />

src/common/component/QRCode.tsx

@@ -1,5 +1,5 @@
 // import React from 'react';
-import { QRCodeCanvas } from 'qrcode.react';
+import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
 import { useAppSelector } from '../../app/store';
 
 type Props = {
@@ -10,11 +10,12 @@ type Props = {
 const QRCode = ({ link, size = 512 }: Props) => {
     const logo = useAppSelector(store => store.server.logo);
     return (
-        <QRCodeCanvas value={link}
+        <QRCodeSVG value={link}
+
             className="rounded border border-solid border-gray-200 dark:border-gray-500 p-1 !w-full !h-full"
             size={size}
             bgColor={"#fff"}
-            fgColor={"#22ccee"}
+            fgColor={"#000"}
             level={"L"}
             includeMargin={false}
             imageSettings={{

src/common/component/SaveTip.tsx

@@ -13,7 +13,7 @@ const SaveTip: FC<Props> = ({ saveHandler, resetHandler }) => {
   const { t } = useTranslation("setting");
   // const btnClass=clsx("")
   return (
-    <div className="z-50 w-full p-2 absolute bottom-16 left-0 flex items-center justify-between font-semibold text-gray-700 border border-solid border-gray-200 dark:border-gray-400 dark:bg-gray-600 shadow-xl rounded-full">
+    <div className="z-50 w-full p-2 absolute bottom-4 md:bottom-16 left-0 flex flex-col md:flex-row items-center justify-between font-semibold text-gray-700 border border-solid border-gray-200 dark:border-gray-400 bg-white dark:bg-gray-600 shadow-xl rounded-full">
       <span className="p-2 text-sm dark:text-gray-200">{t('save_tip')}</span>
       <div className="flex items-center gap-3">
         <Button className="small ghost border_less !text-gray-700 !shadow-none dark:!text-gray-100" onClick={resetHandler}>

src/common/component/Server.tsx

@@ -39,7 +39,7 @@ export default function Server({ readonly = false }: Props) {
 
   return (
     <div className="relative flex items-center justify-between gap-2 px-4 py-2">
-      <NavLink to={`/setting?f=${pathname}`}>
+      <NavLink to={`/setting/overview?f=${pathname}`}>
         <div className="flex items-center gap-2">
           <div className="w-8 h-8">
             <img alt={`${name} logo`} className="w-full h-full object-cover rounded-full" src={logo} />

src/common/component/StyledSettingContainer.tsx

@@ -1,22 +1,26 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
-import { useLocation, NavLink } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import IconBack from "../../assets/icons/arrow.left.svg";
 import { Nav } from "../../routes/settingChannel/navs";
 import clsx from "clsx";
+import GoBackNav from "./GoBackNav";
+import MobileNavs from "../../routes/home/MobileNavs";
 export interface Danger {
   title: string;
   handler: () => void;
 }
 
 interface Props {
+  pathPrefix?: string,
   closeModal: () => void;
   title?: string;
   navs: Nav[];
-  dangers: [Danger | boolean];
+  dangers: [Danger | boolean] | [];
-  nav: { title: string; name?: string; component?: ReactNode };
+  nav?: { title: string; name?: string; component?: ReactNode };
 }
 
 const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
+  pathPrefix = "/setting",
   closeModal,
   title = "Settings",
   navs = [],
@@ -24,20 +28,21 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
   nav,
   children
 }) => {
-  const { pathname } = useLocation();
+
   return (
+    <>
       <div className="w-screen h-screen flex">
-      <div className="h-screen min-w-[120px] md:min-w-[212px] overflow-scroll px-4 py-8 bg-neutral-100 dark:bg-gray-800">
+        <div className={clsx("h-screen w-full md:max-w-[212px] overflow-scroll px-4 py-8 bg-neutral-100 dark:bg-gray-800", nav && "hidden md:block")}>
-        <h2 onClick={closeModal} className="flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
+          <h2 onClick={closeModal} className="hidden md:flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
             <IconBack className="dark:fill-gray-400" /> {title}
           </h2>
           {navs.map(({ title, items }) => {
             return (
-            <ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400">
+              <ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-5 md:mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400">
                 {items.map(({ name, title }) => {
                   return (
-                  <li key={name} className={clsx(`text-xs md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200  rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
+                    <li key={name} className={clsx(`md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200  md:rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
-                    <NavLink to={`${pathname}?nav=${name}`} className="block md:px-3 py-1">{title}</NavLink>
+                      <NavLink to={`${pathPrefix}/${name}`} className="block md:px-3 py-1">{title}</NavLink>
                     </li>
                   );
                 })}
@@ -45,7 +50,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
             );
           })}
           {dangers.length ? (
-          <ul className="flex flex-col gap-2 mb-9 text-xs md:text-sm font-semibold text-red-500 dark:text-red-400">
+            <ul className="flex flex-col gap-2 mb-9 md:text-sm font-semibold text-red-500 dark:text-red-400">
               {dangers.map((d) => {
                 if (typeof d === "boolean" || !d) return null;
                 const { title, handler } = d;
@@ -58,11 +63,14 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
             </ul>
           ) : null}
         </div>
-      <div className="bg-white w-full max-h-full overflow-auto p-8 dark:bg-gray-700">
+        <div className={clsx("relative bg-white w-full max-h-full overflow-auto px-4 md:px-8 py-2 md:py-8 dark:bg-gray-700", !nav ? "hidden md:block" : "!pb-4")}>
-        {nav && <h4 className="font-bold text-xl text-gray-600 mb-8 dark:text-gray-100">{nav.title}</h4>}
+          <GoBackNav path={pathPrefix} className="!left-1 top-1.5" />
+          {nav && <h4 className="font-bold text-xl text-gray-600 mb-4 md:mb-8 pl-4 md:pl-0 dark:text-gray-100">{nav.title}</h4>}
           {children}
         </div>
       </div>
+      {!nav && <MobileNavs />}
+    </>
   );
 };
 

src/common/component/UsersModal.tsx

@@ -24,7 +24,7 @@ const UsersModal: FC<Props> = ({ closeModal }) => {
 
   return (
     <Modal>
-      <div className="flex flex-col w-[440px] max-h-[402px] bg-white drop-shadow rounded-lg" ref={wrapperRef}>
+      <div className="flex flex-col w-80 md:w-[440px] max-h-[402px] bg-white drop-shadow rounded-lg" ref={wrapperRef}>
         <div className="shadow-md p-2">
           <input className=" p-2 text-sm" value={input} onChange={handleSearch} placeholder={t("search_user_placeholder")} />
         </div>

src/routes/chat/ChannelChat/PinList.tsx

@@ -18,7 +18,7 @@ const PinList: FC<Props> = ({ id }: Props) => {
   };
   const noPins = pins.length == 0;
   return (
-    <div className="p-4 drop-shadow-md overflow-y-scroll max-h-[90vh] min-w-[486px] rounded-xl bg-gray-50 dark:bg-gray-800">
+    <div className="p-4 drop-shadow-md overflow-y-scroll min-w-[320px] md:min-w-[486px] md:max-h-[90vh] rounded-xl bg-gray-50 dark:bg-gray-800">
       <h4 className=" text-gray-600 dark:text-gray-400 mb-4 font-semibold">{t("pinned_msg")}({pins.length})</h4>
       {noPins ? (
         <div className="flex flex-col items-center gap-2 w-full p-4">

src/routes/chat/ChannelChat/index.tsx

@@ -23,7 +23,7 @@ import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
 import { useTranslation } from "react-i18next";
-import GoBackNav from "../GoBackNav";
+import GoBackNav from "../../../common/component/GoBackNav";
 type Props = {
   cid?: number;
   dropFiles?: File[];
@@ -170,7 +170,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           {hasMore ? (
             <LoadMore pullUp={pullUp} pulling={pulling} />
           ) : (
-            <div className="pt-14 flex flex-col items-start gap-2">
+            <div className="pt-14 px-1 md:px-0 flex flex-col items-start gap-2">
               <h2 className="font-bold text-4xl dark:text-white">{t("welcome_channel", { name })}</h2>
               <p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name })} </p>
               {loginUser?.is_admin && (

src/routes/chat/DMChat/index.tsx

@@ -11,7 +11,7 @@ import LoadMore from "../LoadMore";
 import { renderMessageFragment } from "../utils";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
 import { useAppSelector } from "../../../app/store";
-import GoBackNav from "../GoBackNav";
+import GoBackNav from "../../../common/component/GoBackNav";
 type Props = {
   uid: number;
   dropFiles?: File[];

src/routes/chat/GoBackNav.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import IconArrow from '../../assets/icons/arrow.left.svg';
-// type Props = {}
-
-const GoBackNav = () => {
-    const navigate = useNavigate();
-    const handleBack = () => {
-        navigate(-1);
-    };
-    return (
-        <button className='p-2 absolute left-2 md:hidden' onClick={handleBack}>
-            <IconArrow className="dark:stroke-white  w-6 h-6" />
-        </button>
-    );
-};
-
-export default GoBackNav;

src/routes/chat/GuestChannelChat/index.tsx

@@ -7,7 +7,7 @@ import Layout from "../Layout";
 import { renderMessageFragment } from "../utils";
 import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
-import GoBackNav from "../GoBackNav";
+import GoBackNav from "../../../common/component/GoBackNav";
 
 type Props = {
   cid?: number;

src/routes/chat/Layout/LicenseOutdatedTip.tsx

@@ -8,7 +8,7 @@ const LicenseUpgradeTip = () => {
   const { t } = useTranslation("chat");
   const navigateTo = useNavigate();
   const handleRedirect = () => {
-    navigateTo("/setting?nav=license");
+    navigateTo("/setting/license");
   };
 
   return (

src/routes/home/MobileNavs.tsx

@@ -5,6 +5,7 @@ import { useAppSelector } from '../../app/store';
 
 import ChatIcon from "../../assets/icons/chat.svg";
 import UserIcon from "../../assets/icons/user.svg";
+import SettingIcon from "../../assets/icons/setting.svg";
 
 // type Props = {}
 
@@ -13,6 +14,7 @@ const MobileNavs = () => {
     const { pathname } = useLocation();
     const isChatHomePath = useMatch(`/chat`);
     const isDMChat = useMatch(`/chat/dm/:user_id`);
+    // const isSettingPage = useMatch(`/setting`);
     const isChannelChat = useMatch(`/chat/channel/:channel_id`);
     const {
         ui: {
@@ -44,8 +46,8 @@ const MobileNavs = () => {
                     {({ isActive }) => {
                         const active = isActive || isChatPage;
                         return <div className='flex flex-col gap-1 items-center'>
-                            <ChatIcon className={!active ? "fill-gray-600" : "fill-gray-400"} />
+                            <ChatIcon className={!active ? "fill-gray-500" : "fill-primary-500"} />
-                            <span className={clsx('text-xs', !active ? "text-gray-500" : "text-gray-400")}>Chats</span>
+                            <span className={clsx('text-xs', !active ? "text-gray-500" : "text-primary-500")}>Chats</span>
                         </div>;
                     }}
                 </NavLink>
@@ -54,8 +56,18 @@ const MobileNavs = () => {
                 <NavLink className={() => `${linkClass}`} to={userNav}>
                     {({ isActive: active }) => {
                         return <div className='flex flex-col gap-1 items-center'>
-                            <UserIcon className={!active ? "fill-gray-600" : "fill-gray-400"} />
+                            <UserIcon className={!active ? "fill-gray-500" : "fill-primary-500"} />
-                            <span className={clsx('text-xs', !active ? "text-gray-500" : "text-gray-400")}>Contacts</span>
+                            <span className={clsx('text-xs', !active ? "text-gray-500" : "text-primary-500")}>Contacts</span>
+                        </div>;
+                    }}
+                </NavLink>
+            </li>
+            <li>
+                <NavLink className={() => `${linkClass}`} to={'/setting'}>
+                    {({ isActive: active }) => {
+                        return <div className='flex flex-col gap-1 items-center'>
+                            <SettingIcon className={clsx("w-6 h-6", !active ? "fill-gray-500" : "fill-primary-500")} />
+                            <span className={clsx('text-xs', !active ? "text-gray-500" : "text-primary-500")}>Settings</span>
                         </div>;
                     }}
                 </NavLink>

src/routes/home/User.tsx

@@ -14,7 +14,7 @@ const User: FC<Props> = ({ uid }) => {
 
   return (
     <div className="px-3 py-2.5 invisible md:visible">
-      <NavLink to={`/setting?nav=my_account&f=${pathname}`}>
+      <NavLink to={`/setting/my_account?f=${pathname}`}>
         <div className="w-8 h-8">
           <Avatar className=" object-cover w-full h-full rounded-full" width={32} height={32} src={user.avatar} name={user.name} />
         </div>

src/routes/index.tsx

@@ -130,8 +130,9 @@ const PageRoutes = () => {
                 </LazyIt>
               }
             />
-            <Route path="channel/:cid" element={<LazyIt><SettingChannelPage /></LazyIt>} />
+            <Route path=":nav?" element={<LazyIt><SettingPage /></LazyIt>} />
-            <Route path="dm/:uid" element={<LazyIt><SettingDMPage /></LazyIt>} />
+            <Route path="channel/:cid/:nav?" element={<LazyIt><SettingChannelPage /></LazyIt>} />
+            <Route path="dm/:uid/:nav?" element={<LazyIt><SettingDMPage /></LazyIt>} />
           </Route>
           <Route
             index

src/routes/login/index.tsx

@@ -131,7 +131,7 @@ export default function LoginPage() {
           <h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("login.title")}</h2>
           <span className="text-gray-400 dark:text-gray-100">{t("login.desc")}</span>
         </div>
-        <form className="flex flex-col gap-5 w-[320px] md:min-w-[360px] " onSubmit={handleLogin}>
+        <form className="flex flex-col gap-5 w-80 md:min-w-[360px] " onSubmit={handleLogin}>
           <Input
             className="large"
             name="email"

src/routes/reg/RegWithUsername.tsx

@@ -105,7 +105,7 @@ const RegWithUsername: FC = () => {
           visible to others in spaces you joined.
         </span>
       </div>
-      <form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleAuth}>
+      <form className="flex flex-col gap-5 w-80 md:min-w-[360px]" onSubmit={handleAuth}>
         <Input
           className="large"
           name="username"

src/routes/reg/Register.tsx

@@ -103,12 +103,12 @@ export default function Reg() {
   return (
     <>
       <div className="flex-center flex-col pb-6">
-        <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
+        <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 md:mb-7 rounded-full" />
-        <h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">{t("reg.title")}</h2>
+        <h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("reg.title")}</h2>
-        <span className="text-gray-400 dark:text-gray-100">{t("reg.desc")}</span>
+        <span className="hidden md:block text-gray-400 dark:text-gray-100">{t("reg.desc")}</span>
       </div>
 
-      <form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
+      <form className="flex flex-col gap-5 w-80 md:min-w-[360px]" onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
         <Input
           className="large"
           name="email"

src/routes/reg/index.tsx

@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 export default function RegContainer() {
   return (
-    <div className="flex-center h-screen dark:bg-gray-700">
+    <div className="flex-center h-screen overflow-x-hidden overflow-y-auto dark:bg-gray-700">
       <div className="py-8 px-10 shadow-md rounded-xl">
         <Outlet />
       </div>

src/routes/setting/APIDocument.tsx

@@ -35,7 +35,7 @@ const APIDocument = () => {
                             👉 {t("api_doc.step_1")}
                         </h3>
                         {/* <div className="flex flex-col gap-1"> */}
-                        <img className='border border-solid rounded-md border-gray-300 shadow-lg w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step1.png" alt="step 1" />
+                        <img className='border border-solid rounded-md border-gray-300 shadow-lg md:w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step1.png" alt="step 1" />
                         {/* </div> */}
                     </div>
                     <div className="flex flex-col gap-2">
@@ -50,13 +50,13 @@ const APIDocument = () => {
                                 <IconCopy onClick={handleCopy} className="absolute right-2 bottom-2 cursor-pointer" />
                             </p>
                         </div>
-                        <img className='border border-solid rounded-md border-gray-300 shadow-lg w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step2.jpg" alt="step 2" />
+                        <img className='border border-solid rounded-md border-gray-300 shadow-lg md:w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step2.jpg" alt="step 2" />
                     </div>
                     <div className="flex flex-col gap-2">
                         <h3 className='text-gray-700 dark:text-white text-lg flex items-center gap-2'>
                             👉  {t("api_doc.last")}
                         </h3>
-                        <img className='border border-solid rounded-md border-gray-300 shadow-lg w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step3.png" alt="step 3" />
+                        <img className='border border-solid rounded-md border-gray-300 shadow-lg md:w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step3.png" alt="step 3" />
                     </div>
                 </div>
 

src/routes/setting/BotConfig/index.tsx

@@ -73,7 +73,7 @@ export default function BotConfig() {
           </h2>
           <p className='text-gray-500 dark:text-gray-400 text-xs'>{t("manage_desc")}</p>
         </div>
-        <div className="w-fit  overflow-hidden">
+        <div className="w-full md:w-fit overflow-auto md:overflow-hidden">
           <table className="min-w-full table-auto">
             <thead className="border-b dark:border-b-gray-500 bg-gray-50 dark:bg-gray-600">
               <tr>

src/routes/setting/MyAccount.tsx

@@ -61,12 +61,12 @@ export default function MyAccount() {
   return (
     <>
       <div className="flex flex-col items-start gap-8">
-        <div className="p-6 flex flex-col items-center md:w-[512px] bg-gray-100 dark:bg-gray-800 rounded-2xl">
+        <div className="md:p-6 flex flex-col items-center w-full md:w-[512px] md:bg-gray-100 md:dark:bg-gray-800 md:rounded-2xl">
           <AvatarUploader url={avatar} name={name} uploadImage={uploadAvatar} />
           <div className="mt-2 mb-16 font-bold text-lg text-gray-800 dark:text-white">
             {name} <span className="font-normal text-gray-500">#{uid}</span>
           </div>
-          <div className="w-full flex flex-col items-start md:flex-row justify-between mb-6">
+          <div className="w-full flex items-start justify-between mb-6">
             <div className="flex flex-col text-gray-500 dark:text-gray-50">
               <span className="text-xs uppercase  font-semibold">{t("username")}</span>
               <span className="text-sm ">
@@ -77,7 +77,7 @@ export default function MyAccount() {
               {ct("action.edit")}
             </Button>
           </div>
-          <div className="w-full flex flex-col items-start md:flex-row justify-between mb-6">
+          <div className="w-full flex items-start justify-between mb-6">
             <div className="flex flex-col text-gray-500 dark:text-gray-50">
               <span className="text-xs uppercase  font-semibold">{t("email")}</span>
               <span className="text-sm">{email}</span>
@@ -86,7 +86,7 @@ export default function MyAccount() {
               {ct("action.edit")}
             </Button>
           </div>
-          <div className="w-full flex flex-col items-start md:flex-row justify-between mb-6">
+          <div className="w-full flex items-start justify-between mb-6">
             <div className="flex flex-col text-gray-500 dark:text-gray-50">
               <span className="text-xs uppercase  font-semibold">{t("password")}</span>
               <span className="text-sm">*********</span>

src/routes/setting/Widget.tsx

@@ -34,7 +34,7 @@ export default function Widget() {
       <div className="text-gray-500 dark:text-white text-sm mt-5 mb-2">
         {t('config')}:
       </div>
-      <div className="w-[700px] border border-solid border-gray-300 dark:border-gray-400 rounded overflow-hidden">
+      <div className="w-full md:w-[700px] border border-solid border-gray-300 dark:border-gray-400 rounded overflow-auto md:overflow-hidden">
         <table className="min-w-full table-auto">
           <thead className="border-b bg-gray-50 dark:bg-gray-500">
             <tr>

src/routes/setting/config/Firebase.tsx

@@ -77,7 +77,7 @@ export default function ConfigFirebase() {
     client_email,
   } = values as FirebaseConfig;
   return (
-    <div className="setting-container">
+    <div className="setting-container max-md:w-full max-md:h-auto">
       <StyledRadio
         options={Object.values(Options)}
         values={Object.keys(Options)}

src/routes/setting/config/Logins.tsx

@@ -70,7 +70,7 @@ export default function Logins() {
   const valuesChanged = clientIdChanged || changed || githubChanged;
 
   return (
-    <div className="setting-container">
+    <div className="setting-container max-md:w-full max-md:h-auto">
       <div className="inputs">
         <div className="input">
           <div className="row">

src/routes/setting/config/SMTP.tsx

@@ -53,7 +53,7 @@ export default function ConfigSMTP() {
   if (!values) return null;
   const { host, port, from, username, password, enabled = false } = values as SMTPConfig;
   return (
-    <div className="setting-container">
+    <div className="setting-container max-md:w-full">
       <div className="inputs">
         <div className="input row">
           <Label className="dark:text-gray-200">{t("enable")}</Label>

src/routes/setting/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import StyledSettingContainer from "../../common/component/StyledSettingContainer";
 import useNavs from "./navs";
 import LogoutConfirmModal from "./LogoutConfirmModal";
@@ -12,7 +12,7 @@ export default function Setting() {
   const [searchParams] = useSearchParams();
   const navs = useNavs();
   const flattenNaves = navs.map(({ items }) => items).flat();
-  const navKey = searchParams.get("nav");
+  const { nav: navKey } = useParams();;
   const [logoutConfirm, setLogoutConfirm] = useState(false);
   const navigateTo = useNavigate();
   pageFrom = pageFrom ? pageFrom : searchParams.get("f") || "/";
@@ -25,7 +25,7 @@ export default function Setting() {
     setLogoutConfirm((prev) => !prev);
   };
 
-  const currNav = flattenNaves.find((n) => n.name == navKey) || flattenNaves[0];
+  const currNav = flattenNaves.find((n) => n.name == navKey);
 
   return (
     <>
@@ -36,7 +36,7 @@ export default function Setting() {
         navs={navs}
         dangers={[{ title: t("action.logout"), handler: toggleLogoutConfirm }]}
       >
-        {currNav.component}
+        {navKey ? currNav?.component : null}
       </StyledSettingContainer>
       {logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfirm} />}
     </>

src/routes/settingChannel/index.tsx

@@ -11,7 +11,7 @@ let from: string = "";
 
 export default function ChannelSetting() {
   const { t } = useTranslation("setting");
-  const { cid = 0 } = useParams();
+  const { cid = 0, nav: navKey } = useParams();
   const { loginUser, channel } = useAppSelector((store) => {
     return {
       loginUser: store.authData.user,
@@ -26,7 +26,6 @@ export default function ChannelSetting() {
       return items;
     })
     .flat();
-  const navKey = searchParams.get("nav");
   from = from ? from : searchParams.get("f") || "/";
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [leaveConfirm, setLeaveConfirm] = useState(false);
@@ -41,13 +40,14 @@ export default function ChannelSetting() {
     setLeaveConfirm((prev) => !prev);
   };
   if (!cid) return null;
-  const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0];
+  const currNav = flattenNavs.find((n) => n.name == navKey);
   const canDelete = loginUser?.is_admin || channel?.owner == loginUser?.uid;
   const canLeave = !channel?.is_public;
 
   return (
     <>
       <StyledSettingContainer
+        pathPrefix={`/setting/channel/${cid}`}
         nav={currNav}
         closeModal={close}
         title="Channel Setting"
@@ -63,7 +63,7 @@ export default function ChannelSetting() {
           }
         ]}
       >
-        {currNav.component}
+        {navKey ? currNav?.component : null}
       </StyledSettingContainer>
       {deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={+cid} />}
       {leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfirm} id={+cid} />}

src/routes/settingDM/index.tsx

@@ -11,7 +11,7 @@ let from: string = "";
 export default function DMSetting() {
   // const { t } = useTranslation("setting");
   const { t: ct } = useTranslation();
-  const { uid = 0 } = useParams();
+  const { uid = 0, nav: navKey } = useParams();
   const { loginUser } = useAppSelector((store) => {
     return {
       loginUser: store.authData.user,
@@ -26,7 +26,6 @@ export default function DMSetting() {
       return items;
     })
     .flat();
-  const navKey = searchParams.get("nav");
   from = from ? from : searchParams.get("f") || "/";
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const close = () => {
@@ -37,24 +36,25 @@ export default function DMSetting() {
     setDeleteConfirm((prev) => !prev);
   };
   if (!uid) return null;
-  const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0];
+  const currNav = flattenNavs.find((n) => n.name == navKey);
   const canDelete = loginUser?.is_admin;
 
   return (
     <>
       <StyledSettingContainer
+        pathPrefix={`/setting/dm/${uid}`}
         nav={currNav}
         closeModal={close}
         title="DM Setting"
         navs={navs}
-        dangers={[
+        dangers={
-          canDelete && {
+          canDelete ? [{
             title: ct("action.remove_user"),
             handler: toggleDeleteConfirm
+          }] : []
         }
-        ]}
       >
-        {currNav.component}
+        {navKey ? currNav?.component : null}
       </StyledSettingContainer>
       {deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={+uid} />}
     </>

src/routes/users/index.tsx

@@ -9,6 +9,7 @@ import Profile from "../../common/component/Profile";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import useFilteredUsers from "../../common/hook/useFilteredUsers";
 import clsx from "clsx";
+import GoBackNav from "../../common/component/GoBackNav";
 
 function UsersPage() {
   const dispatch = useDispatch();
@@ -48,6 +49,7 @@ function UsersPage() {
         !isUserDetail && "hidden md:flex"
       )}>
         {isUserDetail ? <Profile uid={+user_id} /> : <BlankPlaceholder type="user" />}
+        <GoBackNav />
       </div>
     </div>
   );