responsive web design on home page

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

@@ -3,12 +3,13 @@ import Image from "next/image";
 import {Badge} from "../Badge";
 import {CommunityCardProps} from "./types";
 import * as utils from "../../utils";
+import {md_screen_image, md_screen_wrapper, sm_screen_image, sm_screen_wrapper} from "./style";
 
 export const CommunityCard = (props: CommunityCardProps) => {
   return (
     <div
       onClick={props.onClick}
-      className="flex flex-col-reverse md:flex-row min-h-[246px] border hover:drop-shadow-xl rounded-2xl bg-white">
+      className={`flex flex-col-reverse h-full min-h-[246px] border hover:drop-shadow-xl rounded-2xl bg-white mx-auto ${md_screen_wrapper} ${sm_screen_wrapper}`}>
       <div className={"flex flex-col grow"}>
         <div className="flex flex-col justify-start px-6 py-7">
           <h2 className="mb-2 text-2xl font-medium line-clamp-1 break-all">
@@ -35,7 +36,7 @@ export const CommunityCard = (props: CommunityCardProps) => {
         </div>
       </div>
       <Image
-        className="rounded-tr-2xl w-[100%] max-h-[246px] md:w-[229px] border-l rounded-b-2xl object-cover"
+        className={`rounded-tr-2xl w-[100%] max-h-[auto]  border-l rounded-b-2xl object-cover ${md_screen_image} ${sm_screen_image}`}
         src={props.communityAvatar}
         width={229}
         height={0}

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/store/features/index.ts

@@ -1,3 +1,4 @@
 export * from "./community";
 export * from "./user";
 export * from "./profile";
+export * from "./responsive_toggles";

apps/web/src/store/features/responsive_toggles.ts

@@ -0,0 +1,22 @@
+import type {PayloadAction} from '@reduxjs/toolkit';
+import {createSlice} from '@reduxjs/toolkit';
+
+export interface ResponsiveToggles {
+  leftPanelToggle: boolean;
+}
+const initialState: ResponsiveToggles = {
+  leftPanelToggle: false,
+};
+
+export const responsiveTogglesSlice = createSlice({
+  name: 'responsiveToggle',
+  initialState,
+  reducers: {
+    toggleLeftPanel: (state, action: PayloadAction<boolean>) => {
+      state.leftPanelToggle = action.payload;
+    },
+  },
+});
+
+export const {toggleLeftPanel} = responsiveTogglesSlice.actions;
+export default responsiveTogglesSlice.reducer;

apps/web/src/store/store.ts

@@ -3,6 +3,7 @@ import userReducer from "./features/user";
 import communityReducer from "./features/community";
 import profileReducer from "./features/profile";
 import threadReducer from "./features/thread";
+import responsiveToggleReducer from "./features/responsive_toggles";
 import {loadFromLocalStorage, saveToLocalStorage} from "./storage";
 
 export const store = configureStore({
@@ -11,6 +12,7 @@ export const store = configureStore({
     user: userReducer,
     profile: profileReducer,
     thread: threadReducer,
+    responsiveToggles: responsiveToggleReducer,
   },
   preloadedState: loadFromLocalStorage(),
 });

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";

apps/web/tailwind.config.cjs

@@ -7,6 +7,23 @@ module.exports = {
         accent: "#ff225b",
       },
     },
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      'tablet': {'min':'520px','max':'1001px'},
+      'mobile': {'max':'521px'},
+      '860-1001': {'min':'860px','max':'1001px'},
+      '521-861': {'min':'521px','max':'861px'},
+      'max-680': {'max':'680px'},
+      'min-680': {'min':'680px'},
+      'min-500': {'min':'500px'},
+      'min-1001': {'min':'1001px'},
+      'max-1000': {'max':'1000px'},
+      // => @media (min-width: 1536px) { ... }
+    }
   },
   plugins: [
     require('@tailwindcss/line-clamp'),