feat: setting for mobile friendly

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} />}