add breakpoints to layout component

Author: Roshanjossey

src/components/Layout.tsx

@@ -4,7 +4,7 @@ import Navbar from './navbar/Navbar'
 type LayoutProps = {
   sidebarContentLeft?: ReactNode
   children: ReactNode
-  sidebarContentRight: ReactNode
+  sidebarContentRight?: ReactNode
 }
 
 export default function Layout({
@@ -15,14 +15,24 @@ export default function Layout({
   return (
     <div className="mx-auto bg-gray-200 dark:bg-dark-800 min-h-screen">
       <Navbar />
-      <div className="grid grid-cols-9 gap-10 mt-10 px-60 pt-10">
+      <div className="grid grid-cols-9 gap-10 mt-10 px-4 md:px-60 md:pt-10 ">
         {sidebarContentLeft && (
-          <aside className="col-span-2">{sidebarContentLeft}</aside>
+          <aside className="col-span-2 hidden md:block">
+            {sidebarContentLeft}
+          </aside>
         )}
-        <main className={sidebarContentLeft ? 'col-span-5' : 'col-span-7'}>
+        <main
+          className={
+            sidebarContentLeft ? 'col-span-9 md:col-span-5' : 'md:col-span-7'
+          }
+        >
           {children}
         </main>
-        <aside className="col-span-2">{sidebarContentRight}</aside>
+        {sidebarContentRight && (
+          <aside className="col-span-2 hidden md:block">
+            {sidebarContentRight}
+          </aside>
+        )}
       </div>
       <div></div>
     </div>

src/pages/index.tsx

@@ -36,10 +36,7 @@ const Home = ({
   }
 
   return (
-    <Layout
-      sidebarContentLeft={leftSidebar}
-      sidebarContentRight={<div>Promoted</div>}
-    >
+    <Layout sidebarContentLeft={leftSidebar}>
       <>
         <Feed root={query} />
       </>