diff --git a/src/Back_end/Routes/apiroutes.js b/src/Back_end/Routes/apiroutes.js index 758ca55..1e47a2d 100644 --- a/src/Back_end/Routes/apiroutes.js +++ b/src/Back_end/Routes/apiroutes.js @@ -13,8 +13,9 @@ const client = new google.auth.OAuth2( process.env.REDIRECT_URL ); console.log(client); -const checkTokensMiddleware = async (req, res, next) => {//even though this function is not called still using the express sessions if the request exits in the session - const tokens = req.session.tokens; //then the fetching data when expiry occurs still happens +const checkTokensMiddleware = async (req, res, next) => { + //even though this function is not called still using the express sessions if the request exits in the session + const tokens = req.session.tokens; //then the fetching data when expiry occurs still happens if (!tokens || !tokens.access_token || !tokens.refresh_token) { return res.status(401).json({ error: "OAuth2 tokens not set" }); } @@ -83,8 +84,8 @@ router.get("/googleauth/redirect", async (req, res) => { try { const { tokens } = await client.getToken(code); client.setCredentials(tokens); - //req.session.tokens = tokens; - res.redirect("http://localhost:5177"); + req.session.tokens = tokens; + res.redirect("http://localhost:5173"); } catch (error) { console.error("Error handling OAuth2 redirect:", error); res.status(500).send("Error handling OAuth2 redirect"); @@ -136,7 +137,7 @@ router.post("/createEvent", async (req, res) => { }); const createdEvent = response.data; - res.status(200); + res.status(200).json({ message: "Event added successfully" }); } catch (error) { console.error("Error creating event:", error); res.status(500).json({ error: "Failed to create event" }); diff --git a/src/Front_end/homepage/ToDo_list/assigntask.jsx b/src/Front_end/homepage/ToDo_list/assigntask.jsx index 0ada61c..bf86a9f 100644 --- a/src/Front_end/homepage/ToDo_list/assigntask.jsx +++ b/src/Front_end/homepage/ToDo_list/assigntask.jsx @@ -371,20 +371,22 @@ const Assigntask = () => { setNoDueDate(false); // Ensure "No Due Date" is unchecked when a due date is selected }} /> - +
+ +
* Required diff --git a/src/Front_end/homepage/ToDo_list/assigntask.module.css b/src/Front_end/homepage/ToDo_list/assigntask.module.css index e91cbcc..fba624a 100644 --- a/src/Front_end/homepage/ToDo_list/assigntask.module.css +++ b/src/Front_end/homepage/ToDo_list/assigntask.module.css @@ -164,7 +164,10 @@ margin-top: 10px; animation: fadeInOut 5s ease-in-out; /* Apply fadeInOut animation for notifications */ } - +.datelabel label { + font-size: medium; + width: 45px; +} .requiredLabel { display: block; color: red; @@ -180,3 +183,16 @@ opacity: 0; } } +@media (max-width: 550px) { + .box { + width: 300px; + padding: 10px; + } + .datelabel { + font-size: 15px; + margin-left: 2px; + } + .checkboxes label { + font-size: 15px; + } +} diff --git a/src/Front_end/homepage/ToDo_list/mytodolist.module.css b/src/Front_end/homepage/ToDo_list/mytodolist.module.css index 670ab41..dbb4c28 100644 --- a/src/Front_end/homepage/ToDo_list/mytodolist.module.css +++ b/src/Front_end/homepage/ToDo_list/mytodolist.module.css @@ -99,3 +99,8 @@ font-size: 0.8rem; margin-top: 5px; } +@media (max-width: 500px) { + .box { + width: 325px; + } +} diff --git a/src/Front_end/homepage/ToDo_list/viewchanneltask.module.css b/src/Front_end/homepage/ToDo_list/viewchanneltask.module.css index c3f6ed4..884bf56 100644 --- a/src/Front_end/homepage/ToDo_list/viewchanneltask.module.css +++ b/src/Front_end/homepage/ToDo_list/viewchanneltask.module.css @@ -141,3 +141,21 @@ .taskMetaNone { color: rgb(128, 31, 240); } +@media (max-width: 830px) { + .tasks { + flex-direction: column; + } +} +@media (max-width: 450px) { + .box { + padding: 3px; + } + .todo, + .done { + font-size: smaller; + padding: 6px; + } + .taskItem { + padding: 3px; + } +} diff --git a/src/Front_end/homepage/ToDo_list/viewusertask.module.css b/src/Front_end/homepage/ToDo_list/viewusertask.module.css index 799ee3c..c2d7704 100644 --- a/src/Front_end/homepage/ToDo_list/viewusertask.module.css +++ b/src/Front_end/homepage/ToDo_list/viewusertask.module.css @@ -50,6 +50,7 @@ .todo, .done { + font-size: medium; flex: 1; margin: 10px; padding: 10px; @@ -141,3 +142,21 @@ .taskMetaNone { color: rgb(128, 31, 240); } +@media (max-width: 830px) { + .tasks { + flex-direction: column; + } +} +@media (max-width: 450px) { + .box { + padding: 3px; + } + .todo, + .done { + font-size: smaller; + padding: 6px; + } + .taskItem { + padding: 3px; + } +} diff --git a/src/Front_end/homepage/Totalsearch/totalsearch.module.css b/src/Front_end/homepage/Totalsearch/totalsearch.module.css index 34b6cd4..216ebbb 100644 --- a/src/Front_end/homepage/Totalsearch/totalsearch.module.css +++ b/src/Front_end/homepage/Totalsearch/totalsearch.module.css @@ -1,59 +1,80 @@ * { - box-sizing: border-box; - } - + box-sizing: border-box; +} + +.container { + width: 100%; + max-width: 600px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + position: relative; /* Ensure relative positioning for absolute children */ +} + +.input { + width: 100%; + padding: 10px; + font-size: 15px; + height: 85%; + border-radius: 5px; +} + +.results { + width: 100%; + display: grid; + gap: 1px; + position: absolute; + z-index: 2; + top: calc( + 100% + 10px + ); /* Adjust top position to create a gap below the input */ + background-color: #fff; /* Ensure a white background for results */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for a card-like appearance */ + border-radius: 4px; /* Rounded corners for the results box */ + max-height: 300px; /* Limit max height if needed */ + overflow-y: auto; /* Enable scrolling if results exceed max height */ +} + +.resultItem { + padding: 10px; + border: 1px solid #ccc; + background-color: #f9f9f9; + cursor: pointer; /* Add pointer cursor for clickable items */ +} + +.resultItem:hover { + background-color: #ebebeb; /* Lighten background on hover */ +} + +.item { + padding: 10px; +} + +.dmContact { + border-left: 5px solid #1a73e8; /* Blue color for DM Contacts */ +} + +.channel { + border-left: 5px solid #34a853; /* Green color for Channels */ +} +@media (max-width: 850px) { .container { - width: 100%; - max-width: 600px; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - position: relative; /* Ensure relative positioning for absolute children */ - } - - .input { - width: 100%; - padding: 10px; - font-size: 15px; - height: 85%; - border-radius: 5px; - } - - .results { - width: 100%; - display: grid; - gap: 1px; - position: absolute; - z-index: 2; - top: calc(100% + 10px); /* Adjust top position to create a gap below the input */ - background-color: #fff; /* Ensure a white background for results */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for a card-like appearance */ - border-radius: 4px; /* Rounded corners for the results box */ - max-height: 300px; /* Limit max height if needed */ - overflow-y: auto; /* Enable scrolling if results exceed max height */ - } - - .resultItem { - padding: 10px; - border: 1px solid #ccc; - background-color: #f9f9f9; - cursor: pointer; /* Add pointer cursor for clickable items */ + max-width: 550px; } - - .resultItem:hover { - background-color: #ebebeb; /* Lighten background on hover */ - } - - .item { - padding: 10px; +} +@media (max-width: 700px) { + .container { + max-width: 450px; } - - .dmContact { - border-left: 5px solid #1a73e8; /* Blue color for DM Contacts */ +} +@media (max-width: 550px) { + .container { + max-width: 350px; } - - .channel { - border-left: 5px solid #34a853; /* Green color for Channels */ +} +@media (max-width: 450px) { + .container { + max-width: 250px; } - \ No newline at end of file +} diff --git a/src/Front_end/homepage/channels/addchannel.module.css b/src/Front_end/homepage/channels/addchannel.module.css index 70a638e..3c6eb55 100644 --- a/src/Front_end/homepage/channels/addchannel.module.css +++ b/src/Front_end/homepage/channels/addchannel.module.css @@ -90,3 +90,19 @@ color: white; cursor: pointer; } +@media (max-width: 950px) { + .box { + width: 500px; + } +} +@media (max-width: 600px) { + .box { + width: 350px; + } +} +@media (max-width: 400px) { + .box { + width: 320px; + height: 150px; + } +} diff --git a/src/Front_end/homepage/channels/addchannelmember.module.css b/src/Front_end/homepage/channels/addchannelmember.module.css index b208582..91a0be5 100644 --- a/src/Front_end/homepage/channels/addchannelmember.module.css +++ b/src/Front_end/homepage/channels/addchannelmember.module.css @@ -38,7 +38,7 @@ .inputbox { height: 13%; width: 100%; - + display: flex; align-items: center; justify-content: center; @@ -123,8 +123,29 @@ justify-content: center; align-items: center; } -.noUsers{ - width: 100%; +.noUsers { + width: 100%; height: 78%; padding: 10px; -} \ No newline at end of file +} +@media (max-width: 650px) { + .h1 { + font-size: 25px; + } + .box { + height: 380px; + width: 328px; + } + .namep { + font-size: 21px; + } + .mailp { + font-size: 10px; + } + .Suserdsntexist { + width: 65%; + } + .Suserphoto { + width: 35px; + } +} diff --git a/src/Front_end/homepage/channels/channelchat.jsx b/src/Front_end/homepage/channels/channelchat.jsx index e845305..43e82b4 100644 --- a/src/Front_end/homepage/channels/channelchat.jsx +++ b/src/Front_end/homepage/channels/channelchat.jsx @@ -19,6 +19,7 @@ import { IoMdContacts } from "react-icons/io"; import { MdAssignmentAdd } from "react-icons/md"; import { FaTasks } from "react-icons/fa"; import { RiDeleteBin6Fill } from "react-icons/ri"; +import { BsThreeDotsVertical } from "react-icons/bs"; export const Channelchats = () => { const textRef = useRef(""); //usestate didnot work but useref worked to make the input clear after updation @@ -88,8 +89,6 @@ export const Channelchats = () => { useEffect(() => { const message = () => { - console.log(msgupdate); - const chatsDm = supabase .channel("custom-filter-channel") .on( @@ -125,14 +124,26 @@ export const Channelchats = () => { Object.entries(admins)?.map((admin) => { //to allow the add user optiion only for admin console.log(admin); - if (admin[1].id == currentUser[0].id) { + if (admin[1].id === currentUser[0].id) { + console.log(admin[1].id === currentUser[0].id); setaddusericon(true); console.log(addusericon); } }); } }, [channel_data, loadadmincheck]); - + useEffect(() => { + console.log(allowshow); + }, [allowshow]); + useEffect(() => { + console.log(addusericon); + }, [addusericon]); + useEffect(() => { + console.log(accepted); + }, [accepted]); + useEffect(() => { + console.log(loadadmincheck); + }, [loadadmincheck]); const handlesend = async () => { const img = imgRef.current.files[0]; const text = textRef.current.value; @@ -185,7 +196,7 @@ export const Channelchats = () => { id: uuid(), text: text, senderId: currentUser[0].id, - date: new Date().toISOString(), + date: new Date().toLocaleString(), }, ], }) @@ -219,10 +230,6 @@ export const Channelchats = () => { } console.log(fetchedchanneldata); }; - useEffect(() => { - console.log(showmembers); - }, [showmembers]); - useEffect(() => { const message = () => { console.log(msgupdate); @@ -340,51 +347,67 @@ export const Channelchats = () => { console.error("Error removing member:", error); } }; + const [showOptions, setShowOptions] = useState(false); + + const toggleOptions = () => { + setShowOptions(!showOptions); + }; return ( <>
{channel_data?.channelname} - {addusericon && allowshow && accepted ? ( - <> - setViewchanneltask(true)} - style={{ cursor: "pointer" }} - /> - setAssigntask(true)} - style={{ cursor: "pointer" }} - /> - setShowmembers(true)} // Call the function to update state - style={{ cursor: "pointer" }} - /> - setaddchannelmember(true)} // Call the function to update state - style={{ cursor: "pointer" }} - /> - Removechannel()} // Call the function to update state - style={{ cursor: "pointer" }} - /> - - ) : allowshow && accepted ? ( - <> - setViewchanneltask(true)} - style={{ cursor: "pointer" }} - /> - setShowmembers(true)} // Call the function to update state - style={{ cursor: "pointer" }} - /> - - ) : ( - setShowmembers(true)} // Call the function to update state - style={{ cursor: "pointer" }} - /> + + {/* Three-dots icon for additional options */} + + {showOptions && ( +
+ {/* Icons for main actions */} + {addusericon && allowshow && accepted ? ( + <> + setViewchanneltask(true)} + style={{ cursor: "pointer" }} + /> + setAssigntask(true)} + style={{ cursor: "pointer" }} + /> + setShowmembers(true)} + style={{ cursor: "pointer" }} + /> + setaddchannelmember(true)} + style={{ cursor: "pointer" }} + /> + Removechannel()} + style={{ cursor: "pointer" }} + /> + + ) : allowshow && accepted ? ( + <> + setViewchanneltask(true)} + style={{ cursor: "pointer" }} + /> + setShowmembers(true)} + style={{ cursor: "pointer" }} + /> + + ) : ( + setShowmembers(true)} + style={{ cursor: "pointer" }} + /> + )} +
)}
{!channel_data.allowshow && !accepted ? ( @@ -423,10 +446,7 @@ export const Channelchats = () => { />
* { + margin-right: 8px; + /* Ensure icons and three-dots are above other content */ +} + +.additional_options { + height: 38px; + position: absolute; + top: 100%; + bottom: 0; /* Adjust based on your design */ + right: 10px; /* Adjust based on your design */ + background-color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + padding: 5px; + z-index: 1; /* Ensure it's above other content */ } .messages { height: 85%; width: 100%; background-color: rgb(252, 251, 250); - overflow: scroll; + overflow-y: auto; overflow-x: hidden; position: relative; } @@ -51,6 +70,8 @@ } .attachIcon { cursor: pointer; + height: 42px; + width: 34px; } .sendbutton { height: 45px; @@ -61,6 +82,7 @@ cursor: pointer; } .acceptbox { + padding: 10px; height: 100%; width: 100%; display: flex; @@ -70,12 +92,52 @@ font-size: 35px; } .acceptance { - width: 280px; + width: 100%; display: flex; - justify-content: space-between; + justify-content: center; align-items: center; } .decline, .accept { + margin-top: 10px; + height: 40px; + width: 150px; + border-radius: 7px; + background-color: rgb(99, 204, 99); cursor: pointer; } +.accept:hover { + background-color: rgb(98, 202, 98); +} +@media (max-height: 700px) { + .chatinfo { + font-size: 20px; + } +} +@media (max-width: 1282px) { + .sendbutton { + height: 40px; + width: 45px; + } +} +@media (max-width: 1000px) { + .sendbutton { + height: 35px; + width: 40px; + } + .textinput { + width: 80%; + font-size: 15px; + } +} +@media (max-width: 500px) { + .textinput { + width: 75%; + } +} +@media (max-width: 400px) { + .textinput { + height: 90%; + width: 70%; + } +} diff --git a/src/Front_end/homepage/channels/channelmessage.jsx b/src/Front_end/homepage/channels/channelmessage.jsx index 9807bc9..b4a550b 100644 --- a/src/Front_end/homepage/channels/channelmessage.jsx +++ b/src/Front_end/homepage/channels/channelmessage.jsx @@ -1,20 +1,21 @@ import channelmessageCSS from "./channelmessage.module.css"; import { Allconvers } from "../../context api/context"; -import { Chatcontext } from "../../context api/chatcontext"; import { useContext, useState } from "react"; import { Getuserdetails } from "../../database"; +import { Channelcontext } from "../../context api/channelcontext"; export const ChannelMessage = ({ message }) => { const { currentUser } = useContext(Allconvers); - const { data } = useContext(Chatcontext); - const [senderusername,setSenderusername]=useState('') - const [senderimg,setSenderimg]=useState('') + const { channel_data } = useContext(Channelcontext); + const [senderusername, setSenderusername] = useState(""); + const [senderimg, setSenderimg] = useState(""); const sender = Getuserdetails(message?.senderId); sender.then((data) => { - if (Array.isArray(data) && data.length > 0) { //here we are getting a promise as the data + if (Array.isArray(data) && data.length > 0) { + //here we are getting a promise as the data const username = data[0].username; // Check if data is an array and has elements - const sendimg = data[0]?.avatar_url;// Access the username from the first element - setSenderimg(sendimg) - setSenderusername(username) + const sendimg = data[0]?.avatar_url; // Access the username from the first element + setSenderimg(sendimg); + setSenderusername(username); } else { console.log("No data or invalid format"); } diff --git a/src/Front_end/homepage/channels/channelmessage.module.css b/src/Front_end/homepage/channels/channelmessage.module.css index 1958136..52e884c 100644 --- a/src/Front_end/homepage/channels/channelmessage.module.css +++ b/src/Front_end/homepage/channels/channelmessage.module.css @@ -1,57 +1,56 @@ /* message.module.css */ * { - box-sizing: border-box; + box-sizing: border-box; } .message { - width: 99%; - display: flex; - flex-direction: column; - max-height: 40%; - background-color: rgb(240, 239, 239); - margin-bottom: 5px; - min-height: 18px; - position: relative; - border-radius: 5px; - margin-left: 7px; + padding: 5px; + width: 99%; + display: flex; + flex-direction: column; + max-height: 40%; + background-color: rgb(240, 239, 239); + margin-bottom: 5px; + min-height: 18px; + position: relative; + border-radius: 5px; + margin-left: 7px; } .img { - height: 10%; - width: 25%; - border-radius: 5%; - + max-height: 10%; + width: 25%; + border-radius: 5%; } -.date{ - font-size: 10px; - position: absolute; - bottom: 2px; - right: 1px; +.date { + font-size: 10px; + position: absolute; + bottom: 2px; + right: 5px; } .messageinfo { - margin-bottom: 3px; - margin-left: 5px; + margin-bottom: 3px; + margin-left: 5px; } - .messagecontent { - max-width: 98%; - word-wrap: break-word; /* Allow content to break onto multiple lines */ - overflow: hidden; /* Hide overflow content */ - line-height: 1; /* Adjust line height for readability */ - margin-top: 2px; - margin-left: 5px; -} -.sender{ - display: flex; - margin: 2px; - align-items: center; -} -.senderimg{ - height: 25px; - width: 25px; - border-radius:50% ; -} -.sendername{ - font-size: 18px; - font-weight: 700; -} \ No newline at end of file + max-width: 98%; + word-wrap: break-word; /* Allow content to break onto multiple lines */ + overflow: hidden; /* Hide overflow content */ + line-height: 1; /* Adjust line height for readability */ + margin-top: 2px; + margin-left: 5px; +} +.sender { + display: flex; + margin: 2px; + align-items: center; +} +.senderimg { + height: 25px; + width: 25px; + border-radius: 50%; +} +.sendername { + font-size: 18px; + font-weight: 700; +} diff --git a/src/Front_end/homepage/channels/membersofchannel.jsx b/src/Front_end/homepage/channels/membersofchannel.jsx index b36145e..6e36b40 100644 --- a/src/Front_end/homepage/channels/membersofchannel.jsx +++ b/src/Front_end/homepage/channels/membersofchannel.jsx @@ -52,9 +52,7 @@ const Showmembers = () => { useEffect(() => { const fetchdmdata = async () => { - console.log(combinedId); const dmcontactinfo = await fetchUserDmChats(currentUser[0]); - console.log(dmcontactinfo); if (dmcontactinfo) { setDmcontacts(dmcontactinfo); } @@ -115,7 +113,7 @@ const Showmembers = () => { setaddusericon(true); } else { setIsAdmin(false); - setaddusericon(true); + setaddusericon(false); } } } catch (error) { @@ -163,7 +161,7 @@ const Showmembers = () => { setaddusericon(true); } else { setIsAdmin(false); - setaddusericon(true); + setaddusericon(false); } } const channellisten = () => { diff --git a/src/Front_end/homepage/channels/membersofchannel.module.css b/src/Front_end/homepage/channels/membersofchannel.module.css index 0d888e3..f8abe7f 100644 --- a/src/Front_end/homepage/channels/membersofchannel.module.css +++ b/src/Front_end/homepage/channels/membersofchannel.module.css @@ -38,7 +38,6 @@ .inputbox { height: 13%; width: 100%; - display: flex; align-items: center; justify-content: center; @@ -101,7 +100,6 @@ .options { max-height: 120px; width: 80px; - position: absolute; right: 0px; top: 28px; @@ -119,6 +117,15 @@ background-color: rgb(230, 158, 92); cursor: pointer; } -.option:hover{ - background-color: rgb(226, 146, 71); +.option:hover { + background-color: rgb(226, 146, 71); +} +@media (max-width: 650px) { + .box { + height: 380px; + width: 328px; + } + .h1 { + font-size: 25px; + } } diff --git a/src/Front_end/homepage/dm chats/chatboxnav.module.css b/src/Front_end/homepage/dm chats/chatboxnav.module.css index 726b05a..fcd42d3 100644 --- a/src/Front_end/homepage/dm chats/chatboxnav.module.css +++ b/src/Front_end/homepage/dm chats/chatboxnav.module.css @@ -1,75 +1,129 @@ -*{ - padding: 0px; - margin: 0px; - box-sizing: border-box; -} -.searchbar{ - background-color: rgb(229, 229, 231); - height: 8%; - width: 100%; - display: flex; - flex-direction: column; - position: relative; - padding: 4px 3px 0px 10px; - border-bottom: 1px solid rgb(110, 100, 108); -} -.heading{ - height: 60%; - width: 100%; - font-size: 30px; -} -.enter{ - height: 40%; - width: 100%; - display: flex; - align-items: center; - - position: relative; - font-size: 20px; -} -.input{ - height: 20%; - width: 98%; - margin-left: 28px; - margin-top: 4px; - border: 0px; - outline: none; - background-color: transparent; -} -.chats{ - height: 92%; - width: 100%; - background-color: rgb(229, 229, 231); -} -.textwork{ - height: 15%; - width: 100%; - background-color: rgb(229, 229, 231); -} -.Suserbox{ - width: 100%; - height: 35px; - color: black; - font-size: 20px; - display: flex; -} -.Suserbox:hover{ - background-color: aliceblue; - cursor: pointer; -} -.Suserphoto{ - width: 35px; - height: 35px; - background-color: aqua; -} -.img{ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; /* Adjusted font for better compatibility */ +} +.searchbar { + min-height: 85px; + background-color: rgb(244, 244, 247); + height: 8%; + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; /* Adjusted alignment */ + padding: 10px; + border-bottom: 1px solid rgb(110, 100, 108); +} +.heading { + font-size: 24px; /* Reduced font size for heading */ +} +.enter { + width: 100%; + display: flex; + align-items: center; + margin-top: 10px; + position: relative; +} +label { + margin-right: 10px; /* Added margin for label */ + font-size: 16px; /* Adjusted font size */ +} +.in { + width: 100%; + position: relative; +} +.input { + background-color: transparent; + flex: 1; + height: 100%; + padding: 8px; + border: transparent; + border-radius: 5px; + font-size: 16px; + outline: none; + width: 100%; +} +.chats { + height: calc(92% - 40px); /* Adjusted height calculation */ + width: 100%; + overflow-y: auto; /* Added scroll for overflow */ + background-color: rgb(255, 255, 255); +} +.textwork { + height: 15%; + width: 100%; + background-color: rgb(255, 255, 255); +} +.Suserbox { + width: 100%; + height: 60px; + padding: 10px; + display: flex; + align-items: center; + border-bottom: 1px solid #ccc; /* Added border for separation */ +} +.Suserbox:hover { + background-color: #c9c8c8; /* Light background on hover */ + cursor: pointer; +} + +.Suserphoto { + width: 40px; + height: 40px; + background-color: aqua; /* Placeholder color */ + border-radius: 50%; + margin-right: 10px; /* Added margin for spacing */ +} + +.img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; /* Ensure image fits container */ +} + +.Suserinfo { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + padding-right: 10px; /* Adjusted padding */ +} + +@media (max-width: 768px) { + .heading { + font-size: 20px; /* Adjusted font size for smaller screens */ + } + + .input { + font-size: 14px; /* Reduced font size for input */ + } + + .Suserbox { + height: 50px; /* Reduced height for smaller screens */ + } + + .Suserphoto { width: 30px; height: 30px; - border-radius: 50%; -} -.Suserinfo{ - display: flex; - justify-content: center; - align-items: center; - height: 35px; -} \ No newline at end of file + } +} + +@media (max-width: 576px) { + .heading { + font-size: 18px; /* Further reduced font size */ + } + + .Suserbox { + height: 40px; /* Further reduced height */ + } + + .Suserphoto { + width: 25px; + height: 25px; + } +} diff --git a/src/Front_end/homepage/dm chats/chats.jsx b/src/Front_end/homepage/dm chats/chats.jsx index eed5e3b..fc5e7eb 100644 --- a/src/Front_end/homepage/dm chats/chats.jsx +++ b/src/Front_end/homepage/dm chats/chats.jsx @@ -153,7 +153,7 @@ export const Chats = () => { id: uuid(), text: text, senderId: currentUser[0].id, - date: new Date().toISOString(), + date: new Date().toLocaleString(), image: puburl, }, ], @@ -180,7 +180,7 @@ export const Chats = () => { id: uuid(), text: text, senderId: currentUser[0].id, - date: new Date().toISOString(), + date: new Date().toLocaleString(), }, ], }) @@ -215,7 +215,7 @@ export const Chats = () => { />
{ const { currentUser } = useContext(Allconvers); const { data } = useContext(Chatcontext); - const [senderusername,setSenderusername]=useState('') - const [senderimg,setSenderimg]=useState('') + const [senderusername, setSenderusername] = useState(""); + const [messages, setMessages] = useState([]); + const [senderimg, setSenderimg] = useState(""); + const [msgupdate, setMsgupdate] = useState(false); const sender = Getuserdetails(message?.senderId); sender.then((data) => { - if (Array.isArray(data) && data.length > 0) { //here we are getting a promise as the data + if (Array.isArray(data) && data.length > 0) { + //here we are getting a promise as the data const username = data[0].username; // Check if data is an array and has elements - const sendimg = data[0]?.avatar_url;// Access the username from the first element - setSenderimg(sendimg) - setSenderusername(username) + const sendimg = data[0]?.avatar_url; // Access the username from the first element + setSenderimg(sendimg); + setSenderusername(username); } else { console.log("No data or invalid format"); } }); + /* useEffect(() => { + const fetchmessages = async () => { + const messagesuptained = await fetchUsermessages(data.chatId); + if (messagesuptained) { + setMessages(messagesuptained); + } + }; + fetchmessages(); + }, [data.chatId]); + useEffect(() => { + const fetchmessages = async () => { + if (msgupdate) { + const messagesuptained = await fetchUsermessages(data.chatId); + if (messagesuptained) { + setMessages(messagesuptained); + setMsgupdate(false); + } + } + }; + fetchmessages(); + }, [msgupdate]); + + useEffect(() => { + const message = () => { + console.log(msgupdate); + + const chatsDm = supabase + .channel("custommsgfetch") + .on( + "postgres_changes", + { + event: "*", //channels are used to listen to real time changes + schema: "public", //here we listen to the changes in realtime and update the postgres changes here + table: "chats_dm", + select: "messages", + filter: `id=eq.${data.chatId}`, + }, + (payload) => { + setMsgupdate(true); + } + ) + .subscribe(); + + // Cleanup function to unsubscribe from the channel to avoid data leakage + return () => { + supabase.removeChannel(chatsDm); + }; + }; + message(); + }, [data.chatId]); + + const deletemsg = async (id) => { + const updatedMessages = messages.filter((msg) => msg.id !== id); + try { + const { data: updatedData, error } = await supabase + .from("chats_dm") + .update({ + messages: updatedMessages, + }) + .eq("id", data.chatId); + + if (error) { + throw new Error(error.message); + } + + setMessages(updatedData); + } catch (error) { + console.error("Error deleting message:", error.message); + } + };*/ return (
{senderusername} + {/* deletemsg(message.id)} + />*/}
diff --git a/src/Front_end/homepage/google calendar/googlecalendar.module.css b/src/Front_end/homepage/google calendar/googlecalendar.module.css deleted file mode 100644 index 13e2680..0000000 --- a/src/Front_end/homepage/google calendar/googlecalendar.module.css +++ /dev/null @@ -1,153 +0,0 @@ -.container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1000; - } - - .box { - background-color: white; - border-radius: 8px; - width: 80%; - height: 650px; - display: flex; - overflow: hidden; - } - - .header { - display: flex; - justify-content: flex-end; - padding: 10px; - } - - .closeIcon { - cursor: pointer; - font-size: 1.5rem; - color: #666; - } - - .left { - padding: 20px; - border-right: 1px solid #ccc; - min-width: 300px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - } - - .form { - display: flex; - flex-direction: column; - } - - .input { - margin-bottom: 10px; - padding: 8px; - font-size: 1rem; - border: 1px solid #ccc; - border-radius: 4px; - } - - .button { - padding: 10px; - background-color: #007bff; - color: white; - border: none; - cursor: pointer; - border-radius: 4px; - font-size: 1rem; - } - - .button:hover { - background-color: #0056b3; - } - - .right { - padding: 20px; - display: flex; - flex-direction: column; - align-items: center; - } - - .right h2 { - margin-bottom: 10px; - } - - .filterButtons { - margin-bottom: 10px; - } - - .filterButtons button { - margin-right: 10px; - padding: 8px; - cursor: pointer; - border: none; - background-color: #f0f0f0; - border-radius: 4px; - font-size: 1rem; - } - - .filterButtons button:hover { - background-color: #e0e0e0; - } - - .activeButton { - background-color: #27ae60; /* Medium shade of green for active button */ - color: white; - } - - .activeButton:hover { - background-color: #2ecc71; /* Darkest shade of green on hover */ - } - - .button:not(.activeButton):not(:hover) { - background-color: #2ecc71; /* Lightest shade of green when not hovered or selected */ - color: white; - } - - .eventsList { - height: calc(100% - 80px); /* Adjust based on the height of header and filter buttons */ - overflow-y: auto; - padding: 0 10px; /* Optional: Add padding to events list */ - } - - .event { - border-bottom: 1px solid #ccc; - width: 100%; - padding: 10px; - display: flex; - justify-content: space-between; /* Ensure delete button is on the right */ - align-items: center; /* Center align event content vertically */ - } - - .event p { - margin: 5px 0; - } - - .deleteButton { - background-color: #dc3545; /* Red color for delete button */ - color: white; - border: none; - padding: 8px; - cursor: pointer; - border-radius: 4px; - } - - .deleteButton:hover { - background-color: #c82333; /* Darker red on hover */ - } - - /* Optional: Styling for no events message */ - .noEvents { - margin-top: 20px; - text-align: center; - color: #999; - } - \ No newline at end of file diff --git a/src/Front_end/homepage/google calendar/googlecalendar.jsx b/src/Front_end/homepage/googlecalendar.jsx/googlecalendar.jsx similarity index 91% rename from src/Front_end/homepage/google calendar/googlecalendar.jsx rename to src/Front_end/homepage/googlecalendar.jsx/googlecalendar.jsx index 2f2dd75..679b8c4 100644 --- a/src/Front_end/homepage/google calendar/googlecalendar.jsx +++ b/src/Front_end/homepage/googlecalendar.jsx/googlecalendar.jsx @@ -164,12 +164,25 @@ const Googlecalendar = () => {
{events.length > 0 ? ( events.map((event) => ( -
-

{event.summary}

-

{new Date(event.start.dateTime).toLocaleString()}

-

{new Date(event.end.dateTime).toLocaleString()}

- {event.description &&

{event.description}

} -
diff --git a/src/Front_end/homepage/googlecalendar.jsx/googlecalendar.module.css b/src/Front_end/homepage/googlecalendar.jsx/googlecalendar.module.css new file mode 100644 index 0000000..d632f95 --- /dev/null +++ b/src/Front_end/homepage/googlecalendar.jsx/googlecalendar.module.css @@ -0,0 +1,218 @@ +.container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; +} + +.box { + min-width: 300px; + background-color: white; + border-radius: 8px; + width: 55%; + height: 650px; + display: flex; + overflow: hidden; +} + +.header { + display: flex; + justify-content: flex-end; + padding: 10px; +} + +.closeIcon { + cursor: pointer; + font-size: 1.5rem; + color: #666; +} + +.left { + padding: 20px; + border-right: 1px solid #ccc; + min-width: 300px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.form { + display: flex; + flex-direction: column; +} + +.input { + margin-bottom: 10px; + padding: 8px; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 4px; +} + +.button { + padding: 10px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + border-radius: 4px; + font-size: 1rem; +} + +.button:hover { + background-color: #52b335; +} + +.right { + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +.right h2 { + margin-bottom: 10px; +} + +.filterButtons { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 10px; +} + +.button { + margin-right: 10px; + padding: 8px; + cursor: pointer; + border: none; + background-color: #f0f0f0; + border-radius: 4px; + font-size: 1rem; +} + +.button:hover { + background-color: #6e6666; +} + +.activeButton { + margin-right: 10px; + padding: 8px; + cursor: pointer; + border: none; + background-color: #f0f0f0; + border-radius: 4px; + font-size: 1rem; + background-color: #00ff6a; /* Medium shade of green for active button */ + color: rgb(105, 103, 103); +} + +.activeButton:hover { + background-color: #00ff6a; /* Darkest shade of green on hover */ +} + +.button:not(.activeButton):not(:hover) { + background-color: #2ecc71; /* Lightest shade of green when not hovered or selected */ + color: white; +} +.noEvents { + margin-top: 20px; + text-align: center; + color: #999; +} +.eventsContainer { + min-height: 350px; + height: 100%; + width: 100%; + padding: 10px; + overflow-y: auto; +} + +.eventfetched { + background-color: #fff; + border-radius: 8px; + padding: 10px; + margin-bottom: 10px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + position: relative; +} + +.phead { + font-size: 20px; + font-weight: bold; +} + +.datehead { + font-weight: bold; +} + +.description { + margin-top: 5px; +} + +.deleteevent { + position: absolute; /* Position the delete button relative to its closest positioned ancestor (.eventBox) */ + top: 60px; /* Adjust top position as needed */ + right: 15px; /* Adjust right position as needed */ + cursor: pointer; + background-color: #dc3545; + color: #fff; + border: none; + border-radius: 5px; + padding: 5px 10px; + font-size: 14px; +} + +.deleteButton:hover { + background-color: #c82333; +} + +@media (max-width: 1550px) { + .box { + width: 850px; + } + .right { + min-width: 500px; + padding: 10px; + } +} + +@media (max-width: 1060px) { + .box { + overflow-y: auto; + width: 500px; + flex-direction: column; + border-right: none; + border-bottom: 1px solid #ccc; + height: 500px; + } +} +@media (max-width: 560px) { + .right { + min-width: 325px; + padding: 10px; + } + .box { + width: 325px; + } + .button { + margin-bottom: 7px; + margin-right: 5px; + padding: 5px; + font-size: 15px; + } + .activeButton { + margin-bottom: 7px; + margin-right: 5px; + padding: 5px; + font-size: 15px; + } +} diff --git a/src/Front_end/homepage/homepage.jsx b/src/Front_end/homepage/homepage.jsx index d4c3a1b..0a126a7 100644 --- a/src/Front_end/homepage/homepage.jsx +++ b/src/Front_end/homepage/homepage.jsx @@ -8,7 +8,7 @@ import { fetchchannelmember, insert_todoid, } from "../database"; -import { useState, useEffect, useContext } from "react"; +import { useState, useEffect, useContext, useRef } from "react"; import supabase from "../supabase"; import homepaseCSS from "./homepage.module.css"; import { FaEdit } from "react-icons/fa"; @@ -31,9 +31,12 @@ import Viewutask from "./ToDo_list/viewusertask"; import Assigntaskself from "./ToDo_list/mytododlist"; import TodoListChanges from "../Mailing/mailsender"; import Totalsearch from "./Totalsearch/totalsearch"; -import Googlecalendar from "./google calendar/googlecalendar"; +import Googlecalendar from "./googlecalendar.jsx/googlecalendar"; import { FaCalendarAlt } from "react-icons/fa"; import { SiGooglecalendar } from "react-icons/si"; +import { RiArrowDropDownLine } from "react-icons/ri"; +import { FaPlus } from "react-icons/fa"; +import { GiHamburgerMenu } from "react-icons/gi"; function Home(data) { const { @@ -74,6 +77,7 @@ function Home(data) { const [dmcontacts, setDmcontacts] = useState([]); const [fetchdmupdate, setFetchdmupdate] = useState(false); const [currentuserchannels, setCurrentuserchannels] = useState({}); + const [dropdownOpen, setDropdownOpen] = useState(false); useEffect(() => { const fetchData = async () => { @@ -256,6 +260,43 @@ function Home(data) { console.error("Error initiating OAuth:", error); } }; + const toggleDropdown = () => { + setDropdownOpen(!dropdownOpen); + }; + + const handleDMClick = (contact) => { + console.log(contact.userinfo); + handlechatselect(contact.userinfo); + setchat(true); + setConformdm(false); + setDm(false); + setChannelchat(false); + // setDropdownOpen(false); + }; + const [addChannelOpen, setAddChannelOpen] = useState(false); + + const toggleAddChannel = () => { + setAddChannelOpen(!addChannelOpen); + }; + + const handleChannelClick = (channel) => { + handlechannelselect(channel); + + setchat(false); + setConformdm(false); + setDm(false); + setChannelchat(true); + }; + const [sidebarOpen, setSidebarOpen] = useState(false); + const sidebarRef = useRef(null); + const toggleSidebar = () => { + setSidebarOpen(!sidebarOpen); + if (sidebarOpen) { + sidebarRef.current.classList.add(homepaseCSS.opened); + } else { + sidebarRef.current.classList.remove(homepaseCSS.opened); + } + }; return ( <> {viewchanneltasks ? : <>} @@ -272,141 +313,168 @@ function Home(data) {
+
+ +
{currentUser[0]?.id ? : <>}
-
-
+
-
-

{name}

+

{name}

+ {/*
+
+ */}
-
- - {Object.entries(currentuserchannels)?.map((channel) => ( +
+
{ - handlechannelselect(channel[1]); - console.log(channel[1]); - setchat(false); - setConformdm(false); - setDm(false); - setChannelchat(true); + toggleAddChannel(); }} > -
- <> - - - {channel[1]?.channelname} - - -
+

Channels

+
- ))} + { + setAddchannel(true); + }} + style={{ color: "#606264", cursor: "pointer" }} + size={13} + /> +
+ {addChannelOpen && ( +
+ {Object.entries(currentuserchannels)?.map( + (channel) => ( +
{ + handleChannelClick(channel[1]); + toggleSidebar(); + }} + > +
+ + + {channel[1]?.channelname} + +
+
+ ) + )} +
+ )}
-
- - {Object.entries(dmcontacts)?.map((contact) => ( +
+
+

Direct message

+ +
+ { - console.log(contact[1].userinfo); - handlechatselect(contact[1].userinfo); - setchat(true); - setConformdm(false); - setDm(false); + toggleSidebar(); + setDm(true); + setConformdm(true); setChannelchat(false); }} - style={{ - display: - contact[1].showstatus === true ? "flex" : "none", - }} - > - -
- <> - - {contact[1]?.userinfo?.uusername} - - - {contact[1]?.userinfo?.uemail} - - -
+ style={{ color: "#606264", cursor: "pointer" }} + size={13} + /> +
+ {dropdownOpen && ( +
+ {Object.entries(dmcontacts)?.map((contact) => ( +
{ + handleDMClick(contact[1]); + toggleSidebar(); + }} + style={{ + display: + contact[1].showstatus === true + ? "flex" + : "none", + }} + > + +
+ + {contact[1]?.userinfo?.uusername} + + + {contact[1]?.userinfo?.uemail} + +
+
+ ))}
- ))} + )}
signout()} /> setViewtask(true)} - size={30} - color="white" - style={{ cursor: "pointer" }} /> setassigntaskself(true)} - size={30} - color="white" - style={{ cursor: "pointer" }} /> setopencalendarevents(true)} - size={30} - color="white" - style={{ cursor: "pointer", marginTop: "10px" }} />
diff --git a/src/Front_end/homepage/homepage.module.css b/src/Front_end/homepage/homepage.module.css index d35934b..20bee63 100644 --- a/src/Front_end/homepage/homepage.module.css +++ b/src/Front_end/homepage/homepage.module.css @@ -3,8 +3,9 @@ margin: 0px; box-sizing: border-box; } + .whole { - background-color: rgb(74, 1, 83); + background-color: #ffae00; /* Orange background */ position: relative; height: 100vh; width: 100vw; @@ -13,6 +14,7 @@ align-items: center; justify-content: center; } + .box { height: 100vh; width: 100vw; @@ -21,8 +23,10 @@ display: flex; flex-direction: column; } + .top { - background-color: rgb(74, 1, 83); + min-height: 45px; + background-color: #ffae00; /* Orange background */ width: 100%; height: 5%; position: relative; @@ -30,67 +34,91 @@ align-items: center; justify-content: center; } + .search { width: 600px; height: 100%; + display: flex; + justify-content: center; + align-items: center; position: relative; } - +.opnsidebar { + display: none; +} .bottom { height: 95%; width: 100%; - background-color: rgb(74, 1, 83); + background-color: #ffae00; /* Orange background */ display: flex; position: relative; } + .sidebar { height: 100%; width: 20%; - background-color: rgb(74, 1, 83); + background-color: #ffae00; /* Orange background */ position: relative; display: flex; flex-direction: row-reverse; + min-width: 300px; } + .userdetails { + padding: 8px; + min-height: 43px; + font-size: 35px; height: 5%; width: 100%; - background-color: rgb(123, 19, 139); + background-color: #fed330; /* Light yellow background */ display: flex; + align-items: center; + justify-content: baseline; + color: rgb(54, 88, 3); } + .chatbox { - width: 80%; + width: 79.5%; height: 99.5%; - background-color: chocolate; + background-color: #ffffff; /* Light orange background */ overflow: hidden; position: relative; display: flex; flex-direction: column; - border-radius: 0px 7px 7px 0px; + border-radius: 0px 10px 10px 0px; } + .presentcontact { height: 8%; width: 100%; - background-color: rgb(229, 229, 231); - border-bottom: 1px solid rgb(110, 100, 108); + background-color: #ffffff; /* Light yellow background */ + border-bottom: 1px solid #6e646c; /* Dark gray border */ } + .chats { height: 92%; width: 100%; - background-color: rgb(229, 229, 231); + background-color: #ffffff; /* Light yellow background */ } + .left { + padding-top: 10px; + min-width: 40px; width: 12%; height: 100%; - background-color: rgb(74, 1, 83); + background-color: #ffae00; /* Orange background */ } + .right { + min-width: 250px; width: 88%; height: 99.5%; overflow: hidden; border-radius: 7px 0px 0px 7px; position: relative; - background-color: rgb(123, 19, 139); + background-color: #fed330; /* Light yellow background */ } + .userleft { width: 75%; height: 100%; @@ -98,23 +126,10 @@ display: flex; align-items: center; font-size: 30px; - color: white; + color: #ffae00; /* Orange text color */ padding-left: 25px; } -.dm { - height: 25px; - width: 50%; - background-color: transparent; - cursor: pointer; - margin: 3px; -} -.addchannel { - height: 25px; - width: 50%; - background-color: transparent; - cursor: pointer; - margin: 3px; -} + .userright { width: 25%; height: 100%; @@ -122,95 +137,199 @@ justify-content: center; align-items: center; } + .faedit { cursor: pointer; } -.poweroff { - margin: 7px; +.sidebaricons { + height: 25px; + width: 25px; + color: white; cursor: pointer; + margin-bottom: 15px; /* Icon color */ } -.dmcontacts { - height: 400px; - width: 90%; - position: relative; - color: black; - background-color: blanchedalmond; + +.allcom { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; } -.sdmcontact { - height: 40px; - width: 90%; - background-color: rgb(96, 15, 109); + +.community { display: flex; - cursor: pointer; - border-bottom: solid thin black; - border-radius: 10px; - margin-bottom: 2px; + flex-direction: column; /* Ensure components stack vertically */ +} + +.dropmenu1, +.dropmenu { display: flex; + justify-content: center; align-items: center; - overflow: hidden; + position: relative; /* Ensure icons are positioned relative to their container */ } -.sdmcontact:hover { - background-color: rgb(77, 5, 88); + +.droph31, +.droph3 { + margin-right: 10px; /* Adjust as needed */ +} + +.rotateIcon { + transform: rotate(-90deg); + transition: transform 0.3s ease; /* Smooth transition for rotation */ } + .sdmimg { height: 25px; width: 25px; border-radius: 50%; - background-color: azure; + background-color: #feca57; /* Light orange background */ } -.sdmcontactinfo { - color: rgb(222, 225, 228); + +.addChannels, +.directMessages { + margin-bottom: 2px; display: flex; flex-direction: column; - margin-left: 8px; + justify-content: space-around; + align-items: center; /* Spacing between sections */ + position: relative; } -.sdmcontactname { - font-size: 20px; - font-weight: 500; + +.dropdown1, +.dropdown { + padding: 0 10px 0 8px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; /* Ensure dropdown menus are positioned relative */ } -.sdmcontactmail { - font-size: 15px; + +.dropmenu1, +.dropmenu { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + position: relative; /* Ensure icons are positioned relative to their container */ +} + +.droph31, +.droph3 { + color: #606264; + margin-right: 7px; /* Adjust as needed */ +} + +.rotateIcon { + transform: rotate(-90deg); + transition: transform 0.3s ease; /* Smooth transition for rotation */ +} + +.dropdownMenu { + width: 100%; + display: flex; + flex-direction: column; + max-height: 200px; /* Adjust as needed */ + overflow-y: auto; /* Enable scrolling if needed */ } -.schannel { + +.schannel, +.sdmcontact { height: 40px; - width: 90%; - background-color: rgb(96, 15, 109); + width: 100%; display: flex; cursor: pointer; - border-bottom: solid thin black; - border-radius: 10px; margin-bottom: 2px; display: flex; align-items: center; overflow: hidden; } -.schannel:hover { - background-color: rgb(77, 5, 88); +.sdmcontact { + padding-left: 5px; } -.sdmimg { - height: 25px; - width: 25px; - border-radius: 50%; - background-color: azure; +.schannel:hover, +.sdmcontact:hover { + background-color: #ffae00; /* Light orange background on hover */ } -.schannelinfo { - color: rgb(222, 225, 228); + +.schannelinfo, +.sdmcontactinfo { + color: #161e2b; /* Dark text color */ display: flex; - align-items: center; + justify-content: center; margin-left: 8px; } -.schannelname { +.sdmcontactinfo { + flex-direction: column; +} +.schannelname, +.sdmcontactname { font-size: 20px; font-weight: 500; - margin-left: 10px; + margin-left: 5px; /* Adjust as needed */ } -.schannelmail { + +.schannelmail, +.sdmcontactmail { font-size: 15px; } -.allcom { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - height: 140px; +.sdmcontactmail { + margin-left: 5px; +} +@media (max-width: 1460px) { + .chatbox { + border-radius: 7px; + width: 100%; + } + .box { + width: 98vw; + } + .opnsidebar { + display: block; /* Show opnsidebar icon */ + position: absolute; + top: 10px; + left: 10px; + cursor: pointer; + } + .sidebar.opened { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 20%; /* Adjust width as needed */ + height: 100%; + background-color: #ffae00; /* Orange background */ + transform: translateX(0); /* Start from the fully visible position */ + transition: transform 0.5s ease; /* Smooth animation for sliding effect */ + } + + .sidebar { + border-radius: 0 15px 15px 0; + overflow: hidden; + position: absolute; + top: 0; + left: -20%; /* Move sidebar off-screen initially */ + z-index: 2; + width: 20%; /* Adjust width as needed */ + height: 100%; + background-color: #ffae00; /* Orange background */ + transform: translateX(-100%); /* Initially hide the sidebar off-screen */ + transition: transform 0.5s ease; /* Smooth animation for sliding effect */ + } +} +@media (max-width: 700px) { + .search { + max-width: 450px; + } +} +@media (max-width: 550px) { + .search { + max-width: 350px; + } +} +@media (max-width: 450px) { + .search { + max-width: 250px; + } }