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] 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;
     }