feat: setting for mobile friendly

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={[
-          canDelete && {
+        dangers={
+          canDelete ? [{
             title: ct("action.remove_user"),
             handler: toggleDeleteConfirm
-          }
-        ]}
+          }] : []
+        }
       >
-        {currNav.component}
+        {navKey ? currNav?.component : null}
       </StyledSettingContainer>
       {deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={+uid} />}
     </>