From fcda27c3687376ec38a26f3511a875f00d1bf0b6 Mon Sep 17 00:00:00 2001
From: Ayush Goyal <agayush088@gmail.com>
Date: Mon, 14 Oct 2024 12:08:50 +0530
Subject: [PATCH 1/3] fix: sidebar responsiveness

---
 src/App.css                                      |  6 ++++++
 .../Common/SocialSidebar/SidebarElements.jsx     | 11 +++++++++++
 src/components/Feeds/Feeds.jsx                   | 16 +++++++++++++++-
 src/components/Feeds/FeedsElements.jsx           |  5 +++++
 src/components/Header/Navbar/NavbarElements.jsx  |  5 +++++
 5 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index b49ed393..2d03aa84 100644
--- a/src/App.css
+++ b/src/App.css
@@ -54,3 +54,9 @@ html {
 ::-webkit-resizer {
     background-color: #666;
 }
+
+@media (min-width: 980px) {
+    #main-searchbar {
+        display: none;
+    }
+}
diff --git a/src/components/Common/SocialSidebar/SidebarElements.jsx b/src/components/Common/SocialSidebar/SidebarElements.jsx
index ed13e6c9..14db014e 100644
--- a/src/components/Common/SocialSidebar/SidebarElements.jsx
+++ b/src/components/Common/SocialSidebar/SidebarElements.jsx
@@ -13,6 +13,15 @@ export const SidebarContainer = styled.div`
     color: #fff;
     box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
     border-radius: 10px;
+    @media screen and (width <= 1280px) {
+        min-width: 80%;
+    }
+    @media screen and (max-width <= 1080px) {
+        width: 96%;
+    }
+    @media screen and (width <= 980px) {
+        display: none;
+    }
 `;
 
 export const FilterButton = styled.button`
@@ -35,3 +44,5 @@ export const FilterButton = styled.button`
         border-bottom-right-radius: 7px;
     }
 `;
+
+
diff --git a/src/components/Feeds/Feeds.jsx b/src/components/Feeds/Feeds.jsx
index d31dfa57..f79dede2 100644
--- a/src/components/Feeds/Feeds.jsx
+++ b/src/components/Feeds/Feeds.jsx
@@ -9,9 +9,11 @@ import { getAllUserDetails, userDetailReset } from "src/features/userDetail/user
 import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
 import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMaintenance";
 import apiStatus from "src/features/apiStatus";
-import { LeftContainer } from "src/components/Explore/ExploreElements";
+import { LeftContainer, SearchContainer } from "src/components/Explore/ExploreElements";
 import { getFollowData, reset } from "src/features/userDetail/follow/followSlice";
 import Sidebar from "src/components/Common/SocialSidebar/Sidebar";
+import SearchInputBox from "src/components/Common/SearchInputBox";
+
 
 const Feeds = () => {
     const dispatch = useDispatch();
@@ -79,6 +81,18 @@ const Feeds = () => {
                             token={user?.token}
                         />
                     </ModifyFeedContainer>
+                    <div id="main-searchbar">
+                        <SearchContainer>
+                            {/* <input placeholder="search" /> */}
+                            <SearchInputBox
+                                placeholder="Search by name"
+                                value={searchTerm}
+                                onChange={handleSearchTermChange}
+                                setValue={setSearchTerm}
+                                
+                            />
+                        </SearchContainer>
+                    </div>
                     <FeedPosts
                         searchTerm={searchTerm}
                         feeds={combinedData}
diff --git a/src/components/Feeds/FeedsElements.jsx b/src/components/Feeds/FeedsElements.jsx
index ab68c496..517519ff 100644
--- a/src/components/Feeds/FeedsElements.jsx
+++ b/src/components/Feeds/FeedsElements.jsx
@@ -8,6 +8,11 @@ export const FeedsContainer = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-around;
+
+    @media screen and (width <= 1160px) {
+        gap: 1%;
+    }
+    
 `;
 
 export const MiddleSection = styled.div`
diff --git a/src/components/Header/Navbar/NavbarElements.jsx b/src/components/Header/Navbar/NavbarElements.jsx
index fb0542f2..f591e9c7 100644
--- a/src/components/Header/Navbar/NavbarElements.jsx
+++ b/src/components/Header/Navbar/NavbarElements.jsx
@@ -220,6 +220,11 @@ export const RouterNavCreateButtonLink = styled(Link)`
         font-size: 12px;
     }
 
+    @media screen and (width <= 1280px) {
+        min-width: 10px;
+        font-size: 14px;
+    }
+
     /* @media screen and (max-width: 1150px) {
      display: none;
     }

From 5d3343568b44f43b94a041153c402642b616f10a Mon Sep 17 00:00:00 2001
From: Ayush Goyal <agayush088@gmail.com>
Date: Mon, 28 Oct 2024 21:57:03 +0530
Subject: [PATCH 2/3] feat: sidebar_responsiveness fixed

---
 src/components/CaptureTheFlag/CTFElements.jsx |   2 +-
 .../SearchInputBox/SearchInputBoxElements.jsx |   1 +
 .../Common/SocialSidebar/Sidebar.jsx          |   3 +-
 .../Common/SocialSidebar/SidebarElements.jsx  |   9 +-
 src/components/Feeds/Feeds.jsx                |  17 +--
 src/components/Feeds/PostForm/ModifyFeed.jsx  | 143 +++++++++++-------
 src/index.css                                 |   6 +
 7 files changed, 101 insertions(+), 80 deletions(-)

diff --git a/src/components/CaptureTheFlag/CTFElements.jsx b/src/components/CaptureTheFlag/CTFElements.jsx
index 8afb1d08..9eab3056 100644
--- a/src/components/CaptureTheFlag/CTFElements.jsx
+++ b/src/components/CaptureTheFlag/CTFElements.jsx
@@ -241,7 +241,7 @@ export const SearchContainer = styled.div`
     /* margin: 10px 0; */
     background: #090909;
     border-radius: 4px;
-    padding: 25px;
+    padding: 5px;
 `;
 
 export const SearchDifficulty = styled.div`
diff --git a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
index 52091b67..bc458ac3 100644
--- a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
+++ b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
@@ -27,6 +27,7 @@ export const SearchBox = styled.div`
     align-items: center;
     background: #252525;
     border-radius: 5px;
+    width: 100%;
 `;
 
 export const SearchIcon = styled.div`
diff --git a/src/components/Common/SocialSidebar/Sidebar.jsx b/src/components/Common/SocialSidebar/Sidebar.jsx
index e6ee9623..92d55871 100644
--- a/src/components/Common/SocialSidebar/Sidebar.jsx
+++ b/src/components/Common/SocialSidebar/Sidebar.jsx
@@ -22,6 +22,7 @@ const Sidebar = ({
     data,
     selectedTags,
     setSelectedTags,
+    hideNav = false,
 }) => {
     const renderFollowingFilterButtons = () => (
         <>
@@ -87,7 +88,7 @@ const Sidebar = ({
     );
 
     return (
-        <SidebarContainer $sidebarType={sidebarType}>
+        <SidebarContainer $sidebarType={sidebarType} className={hideNav ? "hide-nav" : ""}>
             {sidebarType === "blogs" && (
                 <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "10px" }}>
                     {user?.role === "admin" || user?.role === "team" ? (
diff --git a/src/components/Common/SocialSidebar/SidebarElements.jsx b/src/components/Common/SocialSidebar/SidebarElements.jsx
index 14db014e..e524aa30 100644
--- a/src/components/Common/SocialSidebar/SidebarElements.jsx
+++ b/src/components/Common/SocialSidebar/SidebarElements.jsx
@@ -13,15 +13,14 @@ export const SidebarContainer = styled.div`
     color: #fff;
     box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
     border-radius: 10px;
+
     @media screen and (width <= 1280px) {
         min-width: 80%;
     }
-    @media screen and (max-width <= 1080px) {
+
+    @media screen and (width <= 1080px) {
         width: 96%;
     }
-    @media screen and (width <= 980px) {
-        display: none;
-    }
 `;
 
 export const FilterButton = styled.button`
@@ -44,5 +43,3 @@ export const FilterButton = styled.button`
         border-bottom-right-radius: 7px;
     }
 `;
-
-
diff --git a/src/components/Feeds/Feeds.jsx b/src/components/Feeds/Feeds.jsx
index f79dede2..944d4800 100644
--- a/src/components/Feeds/Feeds.jsx
+++ b/src/components/Feeds/Feeds.jsx
@@ -9,11 +9,9 @@ import { getAllUserDetails, userDetailReset } from "src/features/userDetail/user
 import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
 import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMaintenance";
 import apiStatus from "src/features/apiStatus";
-import { LeftContainer, SearchContainer } from "src/components/Explore/ExploreElements";
+import { LeftContainer } from "src/components/Explore/ExploreElements";
 import { getFollowData, reset } from "src/features/userDetail/follow/followSlice";
 import Sidebar from "src/components/Common/SocialSidebar/Sidebar";
-import SearchInputBox from "src/components/Common/SearchInputBox";
-
 
 const Feeds = () => {
     const dispatch = useDispatch();
@@ -81,18 +79,6 @@ const Feeds = () => {
                             token={user?.token}
                         />
                     </ModifyFeedContainer>
-                    <div id="main-searchbar">
-                        <SearchContainer>
-                            {/* <input placeholder="search" /> */}
-                            <SearchInputBox
-                                placeholder="Search by name"
-                                value={searchTerm}
-                                onChange={handleSearchTermChange}
-                                setValue={setSearchTerm}
-                                
-                            />
-                        </SearchContainer>
-                    </div>
                     <FeedPosts
                         searchTerm={searchTerm}
                         feeds={combinedData}
@@ -114,6 +100,7 @@ const Feeds = () => {
                         data={feeds}
                         selectedTags={selectedTags}
                         setSelectedTags={setSelectedTags}
+                        hideNav={true}
                     />
                 </LeftContainer>
             </FeedsContainer>
diff --git a/src/components/Feeds/PostForm/ModifyFeed.jsx b/src/components/Feeds/PostForm/ModifyFeed.jsx
index 77503f8b..d7d8690f 100644
--- a/src/components/Feeds/PostForm/ModifyFeed.jsx
+++ b/src/components/Feeds/PostForm/ModifyFeed.jsx
@@ -9,6 +9,9 @@ import { cdnContentImagesUrl } from "src/features/apiUrl";
 import { CircleSpinner } from "react-spinners-kit";
 import { toast } from "react-toastify";
 import { ImageInput, ImagePreview, useUploadImages } from "src/components/Common/ImageUpload";
+import { SearchContainer } from "src/components/CaptureTheFlag/CTFElements";
+import SearchInputBox from "src/components/Common/SearchInputBox";
+import { RouterNavCreateButtonLink } from "src/components/Header/Navbar/NavbarElements";
 
 const MAX_IMAGE_SIZE_BYTES = 1048576;
 const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" }) => {
@@ -37,10 +40,14 @@ const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" })
     const [content, setContent] = useState(editFeed?.content || "");
     const [tags, setTags] = useState(editFeed?.tags || []);
     const [showAuthPopup, setShowAuthPopup] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
 
     const MAX_CHARACTER_COUNT = 1500;
 
     const [remainingCharacters, setRemainingCharacters] = useState(MAX_CHARACTER_COUNT);
+    const handleSearchTermChange = (event) => {
+        setSearchTerm(event.target.value);
+    };
 
     useEffect(() => {
         setRemainingCharacters(MAX_CHARACTER_COUNT - content.length);
@@ -98,65 +105,87 @@ const ModifyPost = ({ showPostTags, userDetails, onModifyFeed, editFeed = "" })
     const userDetail = userDetails?.find((userDetail) => userDetail?.user === user?._id);
     const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || editFeed?.avatar || "avatar.png"));
     return (
-        <AddFeedCommentContainer onDrop={(e) => onImageDrop(e, true, 4)} onDragOver={onImageDragOver}>
-            {!editFeed && (
-                <LeftSection>
-                    <PostHeaderImg src={avatar} alt="Profile picture" />
-                </LeftSection>
-            )}
-            <RightSection>
-                <div>
-                    <FeedCommentInput
-                        ref={textareaRef}
-                        placeholder="What's on your mind?"
-                        value={content}
-                        onChange={handleChange}
-                        onPaste={(e) => onImagePaste(e, true, 4)}
+        <>
+            <div id="main-searchbar" className="my-4">
+                <SearchContainer>
+                    {/* <input placeholder="search" /> */}
+                    <SearchInputBox
+                        placeholder="Search by name"
+                        value={searchTerm}
+                        onChange={handleSearchTermChange}
+                        setValue={setSearchTerm}
+                        hideNav={true}
                     />
-                    <p
-                        style={{
-                            color:
-                                remainingCharacters <= 99 ? "#ff2525" : remainingCharacters <= 500 ? "#ff6b08" : "grey",
-                            width: "100%",
-                            textAlign: "right",
-                            fontSize: "12px",
-                            fontWeight: "bold",
-                            // border: '1px solid #ff6b08',
-                            marginTop: "-15px",
-                            marginBottom: "-10px",
-                        }}
-                    >
-                        {remainingCharacters < 0 ? "-" : ""} {Math.abs(remainingCharacters)}
-                    </p>
+                </SearchContainer>
+                <div className="flex justify-between p-2">
+                    <RouterNavCreateButtonLink to={"/feeds/my-feeds"}>View My Feeds</RouterNavCreateButtonLink>
+                    <RouterNavCreateButtonLink to={"/dashboard/saved"}>Saved</RouterNavCreateButtonLink>
                 </div>
-
-                <ImagePreview files={images} filesName={imagesName} onRemove={onImageRemove} />
-
-                {showPostTags && <AddPostTags tags={tags} setTags={setTags} />}
-
-                <FooterSection>
-                    <ImageInput
-                        inputName={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
-                        onChange={(e) => onImageChange(e, true, 4)}
-                        labelStyles={{ background: "transparent", border: "transparent", padding: "0" }}
-                        filesName={imagesName}
-                        multiple
-                        key={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
-                    />
-
-                    {isFeedLoading ? (
-                        <PostFormButton>
-                            <CircleSpinner size={17} />
-                        </PostFormButton>
-                    ) : (
-                        <PostFormButton onClick={handleSubmit}>{editFeed ? "Update" : "Create"}</PostFormButton>
-                    )}
-                </FooterSection>
-            </RightSection>
-
-            {/* Render the AuthPopup component */}
-            {showAuthPopup && <AuthPopup onClose={() => setShowAuthPopup(false)} />}
-        </AddFeedCommentContainer>
+            </div>
+            <AddFeedCommentContainer onDrop={(e) => onImageDrop(e, true, 4)} onDragOver={onImageDragOver}>
+                {!editFeed && (
+                    <LeftSection>
+                        <PostHeaderImg src={avatar} alt="Profile picture" />
+                    </LeftSection>
+                )}
+                <RightSection>
+                    <div>
+                        <FeedCommentInput
+                            ref={textareaRef}
+                            placeholder="What's on your mind?"
+                            value={content}
+                            onChange={handleChange}
+                            onPaste={(e) => onImagePaste(e, true, 4)}
+                        />
+                        <p
+                            style={{
+                                color:
+                                    remainingCharacters <= 99
+                                        ? "#ff2525"
+                                        : remainingCharacters <= 500
+                                          ? "#ff6b08"
+                                          : "grey",
+                                width: "100%",
+                                textAlign: "right",
+                                fontSize: "12px",
+                                fontWeight: "bold",
+                                // border: '1px solid #ff6b08',
+                                marginTop: "-15px",
+                                marginBottom: "-10px",
+                            }}
+                        >
+                            {remainingCharacters < 0 ? "-" : ""} {Math.abs(remainingCharacters)}
+                        </p>
+                    </div>
+
+                    <ImagePreview files={images} filesName={imagesName} onRemove={onImageRemove} />
+
+                    {showPostTags && <AddPostTags tags={tags} setTags={setTags} />}
+
+                    <FooterSection>
+                        <ImageInput
+                            inputName={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
+                            onChange={(e) => onImageChange(e, true, 4)}
+                            labelStyles={{ background: "transparent", border: "transparent", padding: "0" }}
+                            filesName={imagesName}
+                            multiple
+                            key={editFeed ? `${editFeed._id}feedImage` : "feedImage"}
+                        />
+
+                        {isFeedLoading ? (
+                            <PostFormButton>
+                                <CircleSpinner size={17} />
+                            </PostFormButton>
+                        ) : (
+                            <PostFormButton onClick={handleSubmit}>{editFeed ? "Update" : "Create"}</PostFormButton>
+                        )}
+                    </FooterSection>
+                </RightSection>
+
+                {/* Render the AuthPopup component */}
+                {showAuthPopup && <AuthPopup onClose={() => setShowAuthPopup(false)} />}
+            </AddFeedCommentContainer>
+        </>
     );
 };
 
diff --git a/src/index.css b/src/index.css
index 3c28334f..2049d17f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,3 +20,9 @@ code {
     background-color: #ff6b08;
     color: #000000;
 }
+
+@media (width <= 980px) {
+    .hide-nav {
+        display: none !important;
+    }
+}

From b8c93dc7647e3fd718db2f7e5efb0fa5ac371fdf Mon Sep 17 00:00:00 2001
From: Ayush Goyal <agayush088@gmail.com>
Date: Thu, 31 Oct 2024 00:06:13 +0530
Subject: [PATCH 3/3] fixing the sidebar responsiveness

---
 .../Common/SearchInputBox/SearchInputBoxElements.jsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
index bc458ac3..f0f38c59 100644
--- a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
+++ b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
@@ -27,7 +27,11 @@ export const SearchBox = styled.div`
     align-items: center;
     background: #252525;
     border-radius: 5px;
-    width: 100%;
+    width: auto;
+
+    @media screen and (width <= 980px) {
+        width: 100%;
+    }
 `;
 
 export const SearchIcon = styled.div`