mobile responsive

Wadie-ess · Oct 24, 2023 · a9273d1 · a9273d1
1 parent ac20834
commit a9273d1
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/.DS_Store b/.github/.DS_Store
diff --git a/backend/.DS_Store b/backend/.DS_Store
diff --git a/frontend/.DS_Store b/frontend/.DS_Store
diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx
@@ -91,6 +91,8 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
 
   const currentRoom = chatRooms.find((room) => room.id === SelectedChat);
 
+  const toggleChatRooms = useChatStore((state) => state.toggleChatRooms);
+
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   // Function to open the modal
@@ -107,6 +109,14 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
     <>
       <div className="flex flex-row justify-between bg-[#1A1C26] p-3 border-b-2  border-black  ">
         <div className="flex flex-row ">
+          <div className="flex items-center justify-center h-full mr-4 md:hidden">
+            <button
+              className="w-8 h-8 rounded-md bg-slate-700 flex items-center justify-center hover:bg-slate-600"
+              onClick={() => toggleChatRooms()}
+            >
+              =
+            </button>
+          </div>
           <div className="pr-1">
             <img
               className="w-12 rounded-full "

diff --git a/frontend/code/src/Components/Chat/Components/RecentChat.tsx b/frontend/code/src/Components/Chat/Components/RecentChat.tsx
@@ -27,7 +27,7 @@ export const RecentConversations = () => {
     <div className="h-full flex flex-col ">
       <OnlineNowUsers />
       {MyUsers.length > 0 ? (
-        <div className="flex-grow overflow-y-auto no-scrollbar">
+        <div className="flex-grow overflow-y-auto no-scrollbar bg-[#1A1C26]">
           {MyUsers.filter((friend) => friend.messages.length > 0).map(
             // to change 0 to the last message here
             (friend) => (

diff --git a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
@@ -76,7 +76,7 @@ export const RoomChatPlaceHolder = () => {
   }, [ChatRoomsState.selectedChatID]);
 
   return ChatRoomsState.recentRooms.length > 0 ? (
-    <div>
+    <div className="bg-[#1A1C26] h-full">
       {ChatRoomsState.recentRooms.map((room) => (
         <div
           key={room.id}
@@ -158,7 +158,7 @@ export const CreateNewRoomModal = () => {
     setSelectedOption(RoomType.public);
   };
   return (
-    <div className="modal " id="my_modal_8">
+    <div className="modal w-screen" id="my_modal_8">
       <div className="modal-box bg-[#1A1C26]  no-scrollbar  w-[85%] md:w-[50%] ">
         <div className="flex flex-col">
           <div className="flex flex-row justify-center">

diff --git a/frontend/code/src/Components/Chat/Controllers/ChatControllers.tsx b/frontend/code/src/Components/Chat/Controllers/ChatControllers.tsx
@@ -18,6 +18,8 @@ export interface ChatState {
   currentRoomMessages: Message[];
   isLoading: boolean;
 
+  showChatRooms: boolean;
+
   recentRooms: ChatRoom[];
   fillRecentRooms: (rooms: ChatRoom[]) => void;
   setIsLoading: (isLoading: boolean) => void;
@@ -26,13 +28,18 @@ export interface ChatState {
   createNewRoom: (name: string, roomType: RoomType, id: string) => void;
   addNewMessage: (message: Message) => void;
   changeChatType: (type: ChatType) => void;
+  toggleChatRooms: (value?: boolean) => void;
 }
 
 export const useChatStore = create<ChatState>()((set) => ({
   selectedChatID: "1",
   selectedChatType: ChatType.Chat,
   recentRooms: chatRooms,
   isLoading: false,
+
+  // UI state
+  showChatRooms: false,
+
   // to fix this
   currentMessages: users.find((user) => user.id === "1")?.messages as Message[],
   currentRoomMessages: chatRooms.find((room) => room.id === "1")
@@ -117,4 +124,10 @@ export const useChatStore = create<ChatState>()((set) => ({
 
       return { ...state };
     }),
+
+  toggleChatRooms: (value?: boolean) =>
+    set((state) => ({
+      ...state,
+      showChatRooms: value === undefined ? !state.showChatRooms : value,
+    })),
 }));
diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx
@@ -19,6 +19,7 @@ import { NullPlaceHolder } from "./Components/RoomChatHelpers";
 import { getRoomMembersCall } from "./Services/ChatServices";
 
 import toast from "react-hot-toast";
+import { classNames } from "../../Utils/helpers";
 
 export interface ConversationProps {
   onRemoveUserPreview: () => void;
@@ -28,23 +29,36 @@ export const Chat = () => {
   const [showUserPreview, setShowUserPreview] = useState(false);
   const selectedChatType = useChatStore((state) => state.selectedChatType);
 
+  const showChatRooms = useChatStore((state) => state.showChatRooms);
+  const toggleChatRooms = useChatStore((state) => state.toggleChatRooms);
+
   const chatRooms = useChatStore((state) => state.recentRooms);
   const handleRemoveUserPreview = () => {
     setShowUserPreview(!showUserPreview);
   };
   return (
     <>
-      <div className="flex h-full divide-black divide-x-4 bg-[#1A1C26]">
+      <div className="flex h-full divide-black divide-x-4 bg-[#1A1C26] relative">
         <div
-          className={` ${
-            showUserPreview === true ? "w-5/12 " : "w-5/12 md:w-4/12"
-          }`}
+          className={classNames(
+            showUserPreview === true ? "w-9/12 " : "w-9/12 md:w-[350px]",
+            "absolute md:relative h-full",
+            "z-20 transition-transform transform data-[mobile-show=true]:translate-x-0 data-[mobile-show=false]:-translate-x-[1000px] md:!transform-none md:!transition-none duration-300"
+          )}
+          data-mobile-show={showChatRooms}
         >
-          {<RecentConversations />}
+          <RecentConversations />
         </div>
+        {showChatRooms && (
+          <div
+            className="z-10 absolute inset-0 md:hidden bg-black/40"
+            onClick={() => toggleChatRooms()}
+          />
+        )}
         <div
           className={` ${
-            showUserPreview ? "w-6/12" : "w-8/12"
+            // showUserPreview ? "w-6/12" : "w-8/12"
+            "w-auto flex-1"
           } overflow-hidden bg-gray-900`}
         >
           {chatRooms.length < 1 && selectedChatType === ChatType.Room ? (
@@ -53,7 +67,11 @@ export const Chat = () => {
             <Conversation onRemoveUserPreview={handleRemoveUserPreview} />
           )}
         </div>
-        <div className={` ${showUserPreview ? "w-3/12" : ""}  bg-[#1A1C26]`}>
+        <div
+          className={` ${
+            showUserPreview ? "w-3/12" : "!hidden"
+          }  bg-[#1A1C26] hidden sm:block`}
+        >
           {showUserPreview && (
             <UserPreviewCard onRemoveUserPreview={handleRemoveUserPreview} />
           )}

diff --git a/frontend/code/src/Utils/helpers.ts b/frontend/code/src/Utils/helpers.ts
@@ -0,0 +1,4 @@
+export function classNames(...args: (string | number | boolean)[]) {
+    return args.filter(Boolean).map(String).join(' ');
+}
+