rwd for home page

apps/web/src/components/CommunityCard/style.tsx

@@ -0,0 +1,5 @@
+export const md_screen_wrapper = "min-1001:flex-row tablet:w-[250px] mobile:w-[400px]";
+export const md_screen_image = "min-1001:w-[229px] tablet:max-h-[150px] mobile:max-h-[200px]";
+
+export const sm_screen_wrapper = "mobile:w-full";
+export const sm_screen_image = "mobile:max-h-[200px]";

apps/web/src/components/LeftPanel/LeftPanel.tsx

@@ -5,18 +5,24 @@ import * as utils from "../../utils";
 import UserOnboard from "../UserOnboard/UserOnboard";
 import {CommunityOnboard} from "../CommunityOnboard";
 import {CommunityList} from "../CommunityList";
-import {selectCommunity, useAppDispatch} from "../../store";
+import {selectCommunity, useAppDispatch, useAppSelector} from "../../store";
 import {GlobalAskQuestion} from "../GlobalAskQuestion";
+import {md_screen} from "./styles";
+import {useEffect} from "react";
 
 const LeftPanel = (props: LeftPanelProp) => {
   const {style} = props;
   const router = useRouter();
   const dispatch = useAppDispatch();
+  const isLeftPanelVisible = useAppSelector((state) => state.responsiveToggles.leftPanelToggle)
 
+  useEffect(() =>{
+    props.handleMargin(isLeftPanelVisible);
+  },[isLeftPanelVisible])
 
   return (
       <div
-          className={`fixed left-0 h-full border-r border-solid border-[#08010d12] ${style}`}
+          className={`fixed left-0 h-full border-r border-solid border-[#08010d12] bg-white z-[999] ${isLeftPanelVisible ? 'block' :md_screen} ${style}`}
       >
         <div className={`h-full flex flex-col justify-between`}>
           <div

apps/web/src/components/LeftPanel/styles.tsx

@@ -0,0 +1 @@
+export const md_screen = "max-680:hidden min-680:block"

apps/web/src/components/LeftPanel/type.ts

@@ -1,3 +1,4 @@
 export type LeftPanelProp = {
   style: string;
+  handleMargin: (value: boolean) => void;
 };

apps/web/src/components/Search/Search.tsx

@@ -2,7 +2,7 @@ import {SearchProps} from "./types";
 
 export const Search = (props: SearchProps) => {
   return (
-    <div className="flex items-center lg:mx-0 lg:max-w-none xl:px-0">
+    <div className="flex items-center lg:mx-0 lg:max-w-none xl:px-0 relative z-[0]">
       <div className="w-full">
         <div className="relative">
           <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-gray-500">

apps/web/src/pages/_app.tsx

@@ -26,6 +26,8 @@ import { store } from "../store";
 import { LeftPanel } from "../components/LeftPanel";
 import {UserProfileWrapper} from "../sections";
 import {UpdateCommunityWrapper} from "../sections/UpdateCommunity";
+import {md_component} from "../styles/app_styels";
+import {useState} from "react";
 
 const projectId = config.walletConnect.projectId;
 const chains = [
@@ -54,6 +56,10 @@ const client = createClient({
 const ethereumClient = new EthereumClient(client, chains);
 
 const MyApp: AppType = ({ Component, pageProps }) => {
+  const [margin, setMargin] = useState<boolean>(true);
+  const handleMargin = (value) =>{
+    setMargin(value);
+  }
   return (
     <>
       <WagmiConfig client={client}>
@@ -71,8 +77,8 @@ const MyApp: AppType = ({ Component, pageProps }) => {
         />
         <Provider store={store}>
           <div className={"w-screen h-screen box-border"}>
-            <LeftPanel style={'w-[75px]'}/>
-            <div className={"max-w-full h-full ml-[75px] box-border"} >
+            <LeftPanel style={'w-[75px]'} handleMargin={handleMargin}/>
+            <div className={`max-w-full h-full ml-[75px] box-border ${!margin && md_component}`} >
               <Component {...pageProps} />
               <UserProfileWrapper />
               <UpdateCommunityWrapper />

apps/web/src/pages/index.tsx

@@ -5,12 +5,14 @@ import {Search} from "../components/Search";
 import {CommunityCard} from "../components/CommunityCard";
 import {LoadMore} from "../components/Button/LoadMore";
 import {useEffect} from "react";
-import {useAppSelector} from "../store";
+import {toggleLeftPanel, useAppDispatch, useAppSelector} from "../store";
 import {isEmpty, isNil} from "lodash";
+import {index_title, md_index_container, md_index_grid} from "../styles/app_styels";
 
 const Home: NextPage = () => {
   const newlyCreatedCommunity = useAppSelector((state) => state.community.newlyCreatedCommunity);
-
+  const dispatch = useAppDispatch();
+  const isLeftPanelVisible = useAppSelector((state) => state.responsiveToggles.leftPanelToggle)
   // @ts-ignore
   const {data, fetchNextPage, hasNextPage, refetch, isFetching} = trpc.public.fetchCommunities.useInfiniteQuery({
       first: 10,
@@ -31,15 +33,24 @@ const Home: NextPage = () => {
     fetchData();
   }, [newlyCreatedCommunity])
 
+  const handleLeftpanelToggle = () =>{
+    dispatch(toggleLeftPanel(!isLeftPanelVisible))
+  }
   return (
-    <div className="container mx-auto">
-      <h1 className="p-4 text-4xl font-medium">discover</h1>
-      <div className="mx-4 max-w-[682px]">
+    <div className={`.container mx-auto ${md_index_container}`}>
+      <div className={"flex row gap-[10px] items-center mx-4"} >
+        <div className={` ${index_title}`} onClick={handleLeftpanelToggle}>
+          <img src={"/hamburger.png"} alt={"hamburger"} width={"100%"} height={"100%"}/>
+        </div>
+        <h1 className="p-4 text-4xl font-medium">discover</h1>
+      </div>
+
+      <div className="mx-4 max-w-[682px] ">
         <Search label={"Search by name or tags"} onQuery={() => {
         }}/>
       </div>
 
-      <div className="m-4 mt-12 grid gap-8 md:grid-cols-1 lg:grid-cols-2">
+      <div className={`m-4 mt-12 grid gap-8 ${md_index_grid}`}>
         {data?.pages?.map((page) => {
           return (
             page?.edges?.map((community) => {

apps/web/src/styles/app_styels.tsx

@@ -0,0 +1,5 @@
+export const md_component = "max-680:ml-[0px]";
+
+export const md_index_grid = "860-1001:grid-cols-3 521-861:grid-cols-2 min-1001:grid-cols-2";
+export const md_index_container = "max-680";
+export const index_title = "min-680:hidden";