feat: session list responsive

src/routes/chat/Layout/index.tsx

@@ -123,8 +123,8 @@ const Layout: FC<Props> = ({
               {selects && <Operations context={context} id={to} />}
             </div>
           </div>
-          {users && <div className="members">{users}</div>}
-          {aside && <div className="aside">{aside}</div>}
+          {users && <div className="members hidden md:block">{users}</div>}
+          {aside && <div className="aside !hidden md:!block">{aside}</div>}
         </main>
         {!readonly && isActive && (
           <DnDTip context={context} name={name} />

src/routes/chat/index.tsx

@@ -1,5 +1,6 @@
 import { memo, useState } from "react";
 import { useParams } from "react-router-dom";
+import clsx from "clsx";
 import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import Server from "../../common/component/Server";
@@ -12,7 +13,9 @@ import { useAppSelector } from "../../app/store";
 import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
 import GuestChannelChat from "./GuestChannelChat";
 import GuestSessionList from "./GuestSessionList";
+import IconList from '../../assets/icons/list.svg';
 function ChatPage() {
+  const [sessionListVisible, setSessionListVisible] = useState(false);
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [usersModalVisible, setUsersModalVisible] = useState(false);
   const { channel_id = 0, user_id = 0 } = useParams();
@@ -28,6 +31,9 @@ function ChatPage() {
   const toggleChannelModalVisible = () => {
     setChannelModalVisible((prev) => !prev);
   };
+  const toggleSessionList = () => {
+    setSessionListVisible(prev => !prev);
+  };
   const tmpSession =
     sessionUids.findIndex((i) => i == user_id) > -1
       ? undefined
@@ -45,10 +51,13 @@ function ChatPage() {
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
-      <StyledWrapper className={isGuest ? "guest" : ""}>
-        <div className="left hidden md:flex">
+      <StyledWrapper className={`${isGuest ? "!pr-1" : ""} md:!pr-12`}>
+        <div className={clsx("left !fixed top-0 left-0 z-40 transition-all md:!relative md:translate-x-0 md:overflow-auto", sessionListVisible ? "translate-x-0" : "-translate-x-full")}>
           <Server readonly={isGuest} />
           {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
+          <button className="absolute top-1/2 -right-[24px] z-50 p-2 rounded-full bg-slate-300/80 md:hidden" onClick={toggleSessionList}>
+            <IconList />
+          </button>
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}

src/routes/chat/styled.tsx

@@ -2,10 +2,9 @@ import styled from "styled-components";
 const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
-  padding: 8px 48px 10px 0;
-  &.guest {
-    padding-right: 0;
-  }
+  padding-top: 8px;
+  padding-bottom: 10px;
+  padding-right: 4px;
   > .left {
     background-color: #fff;
     position: relative;
@@ -14,7 +13,7 @@ const StyledWrapper = styled.div`
     min-width: 268px;
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
     height: 100%;
-    overflow: auto;
+    /* overflow: auto; */
     border-radius: 16px 0 0 16px;
     .list {
       margin: 12px 8px;

src/routes/chat/utils.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import dayjs from "dayjs";
-import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import { isImage } from "../../common/utils";
 import { ContentTypes } from "../../app/config";
@@ -86,38 +85,6 @@ export const renderPreviewMessage = (message = null) => {
   }
   return res;
 };
-const StyledWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  > .overlay {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-  > .check {
-    display: none;
-    margin-top: 18px;
-    margin-left: 8px;
-  }
-  > .message {
-    flex: 1;
-  }
-  &.select {
-    &:hover {
-      border-radius: var(--br);
-      background: #f5f6f7;
-    }
-    > .check {
-      display: block;
-    }
-  }
-`;
 
 const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...rest }) => {
   const dispatch = useDispatch();
@@ -129,13 +96,13 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...res
     dispatch(updateSelectMessages({ context, id, operation, data: mid }));
   };
   return (
-    <StyledWrapper className={selectMode ? "select" : ""} {...rest}>
-      <Checkbox className="check" checked={selected} />
+    <div className={`flex items-start gap-2 relative w-full ${selectMode ? "hover:bg-slate-100" : ""}`} {...rest}>
+      {selectMode && <Checkbox className="!mt-4 !ml-2" checked={selected} />}
       {children}
       {selectMode && (
-        <div className="overlay" onClick={selectMode ? toggleSelect : undefined}></div>
+        <div className="absolute left-0 top-0 w-full h-full cursor-pointer" onClick={selectMode ? toggleSelect : undefined}></div>
       )}
-    </StyledWrapper>
+    </div>
   );
 };
 type Params = {