Merge pull request #14 from ArpitSiNgh08/main

Chat page half done

Author: ArpitSiNgh08

frontend/package-lock.json

@@ -15,32 +15,33 @@
     "@chakra-ui/react": "^2.0.0",
     "@chakra-ui/skeleton": "^2.1.0",
     "@chakra-ui/spinner": "^2.1.0",
+    "@chakra-ui/system": "^2.0.0",
     "@chakra-ui/toast": "^7.0.2",
     "@chakra-ui/tooltip": "^2.3.1",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@firebase/app": "^0.9.27",
+    "@firebase/auth": "^1.6.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
     "dotenv": "^16.4.5",
     "emailjs-com": "^3.2.0",
+    "firebase": "^10.8.0",
+    "framer-motion": "^6.0.0",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "react-leaflet": "^4.2.1",
-    "react-icons": "^5.3.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "react-scrollable-feed": "^2.0.2",
+    "react-split-pane": "^0.1.92",
     "socket.io-client": "^4.7.5",
     "update": "^0.7.4",
-    "web-vitals": "^2.1.4",
-    "firebase": "^10.8.0",
-    "@firebase/app": "^0.9.27",
-    "@firebase/auth": "^1.6.0",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "framer-motion": "^6.0.0",
-    "@chakra-ui/system": "^2.0.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -69,4 +70,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

frontend/package.json

@@ -1,5 +1,7 @@
-import { Box } from "@chakra-ui/layout";
+import SplitPane from "react-split-pane";
+import { Box, useBreakpointValue, Drawer, DrawerOverlay, DrawerContent, DrawerBody, IconButton } from "@chakra-ui/react";
 import { useState } from "react";
+import { FiMenu } from "react-icons/fi";
 import Chatbox from "../components/Chatbox";
 import MyChats from "../components/MyChats";
 import SideDrawer from "../components/miscellaneous/SideDrawer";
@@ -10,20 +12,62 @@ import "./chat.css";
 const Chatpage = () => {
   const [fetchAgain, setFetchAgain] = useState(false);
   const { user } = ChatState();
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+
+  // Responsive mode: "mobile", "medium", "large"
+  const mode = useBreakpointValue({
+    base: "mobile",
+    md: "medium",
+    lg: "large",
+  });
 
   return (
-    <div className="chats-sec" style={{ width: "100%", height:"100%"}}>
+    <div className="chats-sec" style={{ width: "100%", height: "100vh" }}>
       {/* {user && <SideDrawer />} */}
-      <div className="chat-main">
-        <div className="sidebar">
-          {user && <MyChats fetchAgain={fetchAgain} />}
-        </div>
-        <div className="chatting">
-          {user && (
-            <Chatbox fetchAgain={fetchAgain} setFetchAgain={setFetchAgain} />
-          )}
-        </div>
-      </div>
+
+      {(mode === "mobile" || mode === "medium") && (
+        <>
+          <IconButton
+            icon={<FiMenu />}
+            aria-label="Open My Chats"
+            position="fixed"
+            top={4}
+            left={4}
+            zIndex={2000}
+            onClick={() => setDrawerOpen(true)}
+            colorScheme="blue"
+          />
+          <Drawer isOpen={isDrawerOpen} placement="left" onClose={() => setDrawerOpen(false)}>
+            <DrawerOverlay />
+            <DrawerContent bg="#0f1924" maxWidth={"60vw"} width="60vw" >
+              <DrawerBody>
+                {user && <MyChats fetchAgain={fetchAgain} />}
+              </DrawerBody>
+            </DrawerContent>
+          </Drawer>
+          <Box className="chatting" w="100%" h="100vh">
+            {user && <Chatbox fetchAgain={fetchAgain} setFetchAgain={setFetchAgain} />}
+          </Box>
+        </>
+      )}
+
+      {mode === "large" && (
+        <SplitPane
+          split="vertical"
+          minSize={200}
+          defaultSize={550}
+          style={{ height: "100vh" }}
+        >
+          <div className="sidebar" style={{ background: "#0f1924", height: "100%", overflowX: "hidden" }}>
+            {user && <MyChats fetchAgain={fetchAgain} />}
+          </div>
+          <div className="chatting">
+            {user && (
+              <Chatbox fetchAgain={fetchAgain} setFetchAgain={setFetchAgain} />
+            )}
+          </div>
+        </SplitPane>
+      )}
     </div>
   );
 };

frontend/src/Pages/Chatpage.js

@@ -1,4 +1,3 @@
-
 .chats-sec {
   display: flex;
   flex-direction: column;
@@ -9,29 +8,23 @@
 .chat-main {
   display: flex;
   height: 100%;
-  background-color:#8CC7FF29 !important;
+  background-color:#8CC7FF29 !important;  
 }
 
 .sidebar {
-
-
-  background: #338ada !important;
-  overflow: hidden;
-  height: 100%;
-  width: 40%;
+  
+  overflow-y: auto;
+  
   transition: width 0.3s ease;
-  padding: 10px;
 }
 
 .chatting {
-  
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  background-color: white !important;
   padding: 10px;
   transition: width 0.3s ease;
-  width: 60%;
-  background-color: #8CC7FF29  !important;
 }
 
 .task-allocator {
@@ -130,23 +123,22 @@
 
 .sidebar {
   overflow-y: auto;
-
   transition: width 0.3s ease;
 }
 
-.sidebar.full {
+/* .sidebar.full {
   width: 50%;
 }
 
 .sidebar.reduced {
   width: 30%;
-}
+} */
 
 .chatting {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: white !important;
+  background-color: #0f1924 !important;
 
   padding: 10px;
   transition: width 0.3s ease;
@@ -180,3 +172,20 @@
   border-top: 1px solid #ddd;
   background-color: #f8f9fa;
 }
+
+/* Add to chat.css */
+.SplitPane .Resizer {
+  background: #05549e;
+  opacity: 0.5;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+}
+.SplitPane .Resizer:hover {
+  transition: all 2s ease;
+}
+.SplitPane .Resizer.vertical {
+  width: 8px;
+  margin: 0 -4px;
+  cursor: col-resize;
+}